ArneS: Lücke über dem header

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

  1. Lücke über dem header

    klawischnigg
    – Informationen zu den Bewertungsregeln

    Hi there,

    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.

    body {
margin:0;
padding:0;
}

    sollte helfen.

    Wenn Du kein User-Stylesheet verwendest dann geben die meisten Browser dem Body-Inhalt üblicherweise etwas Abstand vom Rand...

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Lücke über dem header

      ArneS
      – Informationen zu den Bewertungsregeln

      Ah das wusste ich nicht, hat geklappt vielen Dank für die Hilfe :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Lücke über dem header

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo ArneS,

        die Browser haben heutzutage Entwicklertools an Bord.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Lücke über dem header

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@klawischnigg

      Wenn Du kein User-Stylesheet verwendest dann geben die meisten Browser dem Body-Inhalt üblicherweise etwas Abstand vom Rand...

      Dieses body { margin: 8px } aus dem Broser-Stylesheet ist auch bei der CSS Battle mitunter störend und kostet ein paar Zeichen, das auf 0 zu setzen.

      Nur bei einem Target kommen die 8px gelegen: zusammen mit 192px ergeben sich die geforderten 200px; und 192px sind genau 2in.
      Lösung: <img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>

      😷 LLAP

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln