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

CSS Text nicht an korrekter Position

marcel90

Neues Mitglied
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;
  
  
}
 
Werbung:
Zurück
Oben