CSS Text nicht an korrekter Position

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

marcel90

Neues Mitglied
4 Mai 2019
3
0
1
29
Hallo,
wie in einem anderen Thema von mir bereits erwähnt, spiele ich gerade etwas mit CSS rum.
Der Text "Ausblick über das was noch kommt" verschiebt sich wenn ich die Seite entsprechend hin und her ziehe. Das ist so weit ja auch in Ordnung, da ich diesen auf center gelegt habe. In der Höhe habe ich ein padding von 40% eingestellt. Wenn ich mein Browser nun ziehe, fährt mir der Text aus dem Bild und ich kann scrollen. Ich hätte allerdings gerne, dass der Text weiterhin auf den 40% des Hintergrundbildes bleibt.Dieses ändert sich in der höhe ja schließlich auch nicht. Ich finde den korrekten Befehl dafür einfach nicht.

HTML:
<html>
    <head>
        <title>Meine Seite</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="main-header">
            <div class="navigation">
                <nav>
                    <ul>
                        <li>Home</li>
                        <li>About</li>
                        <li></li>
                        <li></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="screen00">
        
            <p>Ausblick ueber das was noch kommt</p>
        
        </div>
    </body>
</html>

CSS:
*{                               /* Schrift und Schriftfarbe für Homepage */
    font-family: sans-serif;
    color:black;
}

html, body{
    margin: 0;               
    padding: 0;
    background-color: darkgrey;

}

.main-header{
    background-image: url("images/background01.jpg");
    height: 50%;
    width: 100%;

}

.navigation{
    height: 25%;
    width: 100%;

}

.navigation ul{
    margin: 0;
    padding-top: 2%;
    text-align: right;
    padding-right: 3%;
}

.navigation li{
    color: white;
    display: inline;
    padding: 0 1%;
  
}

.screen00{
    background-image: url("images/background02.jpg");
    height: 50%;
    width: 100%;
}

.screen00 p{
    margin: 0%;
    text-align: center;
    padding-top: 40%;
    font-size: 250%;
    color: white;
  
  
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.352
273
83
66
Da musste ich selber überlegen und habe die Erklärung hier gefunden:
yes, vertical padding and margin are relative to width
Von den Lösungen, die dort angegeben werden, finde ich keine zufrieden stellend, am ehesten noch die von willoller, weil sie auf dein Layout gut passt oder die erste Option von "user".
Wenn es dir jedoch darum ging, den Text (annähernd) vertikal zu zentrieren, kannst Du das viel besser mit Flexlayout erreichen:
 
Zuletzt bearbeitet:
Werbung: