Versuchen, Hauptbanner mit reaktionsfähigen Text ausgerichtet links

zu zentrieren Ich versuche, mein Banner img, das ist direkt unter der Navigationsleiste zu zentrieren. Ich möchte Text linksbündig darauf platzieren. Ich konnte das tun, aber der Text auf dem Bild reagiert überhaupt nicht. Wie mache ich es so, dass der Text die Größe ändert, wenn der Browser die Größe ändert? Außerdem denke ich, dass mein CSS überall zu finden ist. Wenn du also einen Ratschlag hast, wäre es sehr geschätzt! HierVersuchen, Hauptbanner mit reaktionsfähigen Text ausgerichtet links

ist das Markup:

.topimage img { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
h1 { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: #272727; 
 
    font-size: 45px; 
 
    font-weight: normal; 
 
    left: 650px; 
 
    top: 250px; 
 
    font-family: Helvetica Neue, arial, serif; 
 
} 
 

 
.maintitle p { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: #272727; 
 
    font-size: 17px; 
 
    font-weight: normal; 
 
    left: 650px; 
 
    top: 390px; 
 
    font-family: Helvetica Neue, arial, serif; 
 
} 
 

 
.maintitle ul { 
 
    list-style-type: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.maintitle li { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: #272727; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    left: 650px; 
 
    top: 470px; 
 
    font-family: Helvetica Neue, arial, serif; 
 
    border-style: solid; 
 
    border-width: medium; 
 
    border-color: #272727; 
 
    border-radius: 6px; 
 
    padding: 6px; 
 
} 
 

 
a:visited { 
 
    text-decoration: none; 
 
    color: #272727; 
 
} 
 

 
.maintitle a:hover { 
 
    background-color: #6db618; 
 
    border-color: #6db618; 
 
    color: white; 
 
} 
 

 
.maintitle li:hover { 
 
    background-color: #6db618; 
 
    border-color: #6db618; 
 
    color: white; 
 
}

<div class="topimage"> 
 
    <img alt="plant" src="images/main.png" /> 
 
</div> 
 
<div class="maintitle"> 
 

 
    <h1>Marketing Communications & <br> Digital Design</h1> 
 
    <p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p> 
 
    <ul> 
 
    <li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li> 
 
    </ul> 
 
</div>

Das ist, was ich versuche zu erreichen: enter image description here

Quelle

2017-05-11 Lilrum

Wenn Sie nur die Textgröße ändern möchten, [ 'vw' Einheiten verwenden] (https://css-tricks.com/viewport-sized-typography /) – Blazemonger

CSS-Tipp: Versuchen Sie nicht elementare Selektoren zu verwenden, sie sind ziemlich teuer - versuchen Sie sich zu erinnern css entspricht alles von rechts nach links, so zum Beispiel, Ihre '.maintitle li' Selektor wird alle Elemente für' li' und übereinstimmen Sehen Sie dann nach, welche dieser Elemente sich innerhalb eines Elements mit einer Klasse von Haupttiteln befinden. Dies bedeutet auf einer Seite mit vielen li, wird es alle vor dem Filtern greifen – Pete

Es gibt hier mehrere Probleme. Am wichtigsten ist jedoch Ihre Verwendung von absolute Positionierung. Es ist völlig unnötig. Alles, was Sie wirklich tun müssen, ist ein margin von auto, um die Elemente zu zentrieren.

In diesem Fall können wir die Positionen h1, p und getrennt voneinander in ein Wrapper-Element verschieben.

Wenn Sie die tatsächliche Schriftgröße nach Bildschirmbreite verkleinern möchten, verwenden Sie etwas entlang der Linien von font-size: 10vw;

.wrap{ 
 
    margin: 200px auto 0; 
 
    min-width: 320px; 
 
    max-width: 500px; 
 
} 
 

 
.topimage img { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
h1 { 
 
    z-index: 100; 
 
    color: #272727; 
 
    font-size: 45px; 
 
    font-weight: normal; 
 
    top: 250px; 
 
    font-family: Helvetica Neue, arial, serif; 
 
} 
 

 
.maintitle p { 
 
    z-index: 100; 
 
    color: #272727; 
 
    font-size: 17px; 
 
    font-weight: normal; 
 
    top: 390px; 
 
    font-family: Helvetica Neue, arial, serif; 
 
} 
 

 
.maintitle ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.maintitle li { 
 
    z-index: 100; 
 
    color: #272727; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    font-family: Helvetica Neue, arial, serif; 
 
    border-style: solid; 
 
    border-width: medium; 
 
    border-color: #272727; 
 
    border-radius: 6px; 
 
    padding: 6px; 
 
} 
 

 
a:visited { 
 
    text-decoration: none; 
 
    color: #272727; 
 
} 
 

 
.maintitle a:hover { 
 
    background-color: #6db618; 
 
    border-color: #6db618; 
 
    color: white; 
 
} 
 

 
.maintitle li:hover { 
 
    background-color: #6db618; 
 
    border-color: #6db618; 
 
    color: white; 
 
}

<div class="topimage"> 
 
    <img alt="plant" src="images/main.png" /> 
 
</div> 
 
<div class="maintitle"> 
 

 
    <div class="wrap"> 
 
    <h1>Marketing Communications & <br> Digital Design</h1> 
 
    <p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p> 
 
    <ul> 
 
     <li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Quelle

2017-05-11 14:44:51

* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
    color: #272727; 
 
} 
 

 
body { 
 
    font-family: Helvetica Neue, arial, serif; 
 
} 
 

 
.container { 
 
    max-width: 1024px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0 2%; 
 
} 
 

 
.topimage img { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 

 
.maintitle h1 { 
 
    position: relative; 
 
    color: #272727; 
 
    font-size: 8vw; 
 
} 
 

 
.maintitle p { 
 
    z-index: 100; 
 
    position: relative; 
 
    color: #272727; 
 
    font-size: 4vw; 
 
    font-weight: normal; 
 
} 
 

 
.maintitle ul li { 
 
    z-index: 100; 
 
    position: relative; 
 
    color: #272727; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    border-style: solid; 
 
    border-color: #272727; 
 
    border-radius: 6px; 
 
    padding: 6px; 
 
} 
 
.maintitle ul li:hover { 
 
    background-color: #6db618; 
 
    border-color: #6db618; 
 
    color: white; 
 
}

<div class="container"> 
 
    <div class="topimage"> 
 
    <img alt="plant" src="images/main.png" /> 
 
    </div> 
 
    <div class="maintitle"> 
 
    <h1>Marketing Communications &amp;<br>Digital Design</h1> 
 
    <p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p> 
 
    <ul> 
 
     <li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Quelle

2017-05-11 14:45:51

Ich hätte verstehe es falsch, aber wenn du einen Hintergrund haben willst Mit Text darüber können Sie ein Hintergrundbild in CSS verwenden.

<div class="banner"> 
    <div class="maintitle"> 
    <h1>Marketing Communications & <br> Digital Design</h1> 
    <p>Marketing enthusiast who has also ventured into the digital design 
    world. Combining <br> strategy with creativity is essential in my books!</p> 
    <ul> 
     <li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li> 
    </ul> 
    </div> 
</div>

Und dann die CSS

.banner { 
    background-image:url('images/main.jpg'); 
    background-position:center; 
    position: relative; 
    width: 100%; 
    padding-top: 10px; 
} 

.maintitle { 
    width:100%; 
    blahblahblah 
... }

Quelle

2017-05-11 14:47:11 Chere

Versuchen, Hauptbanner mit reaktionsfähigen Text ausgerichtet links

Antwort

Verwandte Themen