ArneS: Lücke über dem header

Beitrag lesen

SELF-Forum

Lücke über dem header

ArneS
– Informationen zu den Bewertungsregeln

Hallo, ich habe eine Frage und zwar habe ich eine Seite mit einem Header und darunter einigen Bildern. Der Header ist über die ganze Breite oben fixiert. Die Bilder lassen sich dann nach unten durchscrollen. Wenn man also scrollt verschwinden die Bilder unter dem Header. jetzt ist aber am oberen Rand der Seite ein kleiner Streifen in dem die Bilder wieder kurz sichtbar sind. Das sieht natürlich nicht ganz so gut aus und ich habe noch nicht herausgefunden warum da so ein kleine Spalt ist.

Hier mein vereinfachter code:

<html>
    <head>
        <link rel="stylesheet" href="css/Test.css">
    </head>
    <body>
        <header>
            Text    Text    Text    Text
        </header>     
        <main>
            <div class="inhalt">               
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">
                <img src="Bilder/Download.jpg" class="Bild">     
            </div>
        </main>           
    </body>    
</html>

und hier der css code:


header{
    background-color: black;
    width: 100%;
    height: 50;
    position:fixed;
    z-index: 2;
    color: white;
    
}

.Bild{
    margin: 10px;
    float: left;
    height: 200px;
    width: 300px;
    object-fit: cover;
    object-position: top;
}

.inhalt{
    position: absolute;
    z-index: 1;
}

Ich hoffe dass mir jemand bei dem Problem helfen kann LG Arne

Beitrag melden
–
Informationen zu den Bewertungsregeln