Lücke zwischen Seiten entfernen funktioniert nicht

html.de-Forum HTML, XHTML & CSS
1

Ich bin gerade dabei einen onepager zu gestalten bei dem die einzelnen Seiten (sections) entweder eine Farbe oder ein Foto im Hintergrund haben.

In der css habe ich die Seiten bildschirmfüllend definiert und eine Größe von 100 % gegeben:

html, body {margin: 0; padding: 0; height: 100%}

Obwohl margin und padding auf 0 sind, bleibt beim Durchscrollen zwischen den Seiten eine weiße Linie als wenn irgendein Ramen noch vorhanden wäre.

Die Sections sind wie folgt definiert:

section {min-height: 100%}

Die Lücke zwischen den Seiten hat genau die Grüße einer Textzeile.

Hat jemand eine Idee?

2

probiere doch mal 100vh statt %

3

Ohne die Seite zu kennen können wir nur raten.

bleibt beim Durchscrollen zwischen den Seiten eine weiße Linie als wenn irgendein Ramen noch vorhanden wäre

Dabei kann es sich um die Auswirkungen von „Collapsing Margins“ handeln.

4

100vh habe ich probiert. Das ändert leider gar nichts.

Den Hintergrund der obersten Seite habe ich so definiert:

#home {
background: url(img/hummel.jpg);
background-position: center center;
background-size: cover;
background-attachment: fixed; /* Das Hintergrundbild bleibt auf der Seite stehen und die nachfolgende Seite schiebt sich darüber */
}

Collapsing Margins sagt mir nichts. Ich denke mal, dass die Margins der einzelnen selections sich überlappen, oder?

5

Hier ist übrigens die komplette css:

html, body {margin: 0; padding: 0; height: 100%;text-align: center} /* der html tag und body tag werden angesprochen: margin ist der Rand um die Seite,
height 100 steht dafür, dass jede Seite 100 % der Seite einnimmt. text-align bestimmnt die Positionierung des Textes. Dort werden die Überschriften ze^ntriert. /
section {min-height: 100%} / Jeder Bereich (Seite) nimmmt 100 % des Bildschirms ein /
a {text-decoration: none;} / Der Text im Menü ist nicht mehr unterstrichen /
li {list-style-type: none;} / Keine Punkte mehr in der Menuausflistung /
h1, h2, h3, a {font-family: ‚Playwrite NL‘,sans-serif; font-weight: 500; color: #494949; padding-top:15%} / Die Überschrisften werden gestaltet: Schriftart und Farbe,
„text-transform: uppercase“ setzt alle Buchstaben auf Großbuchstaben /
h2 {color: #5d7177;} / Farbe der H2 Überschrift wird geändert /
h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px } / Größe der H3 Überschrift wird definiert /
h4, p, table {font-family: ‚Open+Sans‘, sans-serif; color: #494949}
table {
width: 50%; text-align:justify;margin-left: 15%; margin-right: 15%;line-height: 1.8;
} / selbstgestaltete eigenschaften von Tabellen */

#home {
background: url(img/hummel.jpg);
background-position: center center;
background-size: cover;
background-attachment: fixed; /* Das Hintergrundbild bleibt auf der Seite stehen und die nachfolgende Seite schiebt sich darüber */
}

#pfeile {width: 100px;display: block; margin: auto} /* Zentrierung der Pfeile */

#gitarrenunterricht {background-color: rgb(182, 224, 254)}

#kontakt {background-color: rgb(182, 224, 254)}

footer {height:75px;
background-color: rgb(255, 0, 0) }

p {text-align:justify;
margin-left: 15%;
margin-right: 15%;
line-height: 1.8;} /* Eigenschaften von Textblöcken */

nav {
float: right; /* Das Navigationsmenü wird auf die rechte Seite geschoben /
margin: 17px 50px 0 0; / Die Ränder des Navigationsmenüs */
}

nav ul li { /* Die List items im Header werden angesprochen /
float: left; / Position der List Items */
margin-right: 25px;
}

img {margin-top: 15px; width: 50%}

6

Ich habe übrigens eine Lösung des Problems gefunden:

Ich habe jetzt am Anfang der css ALLES auf 0 gesetzt:

  • {
    margin: 0;
    padding: 0;
    }

Kann mir irgendjemand erklären, was da falsch war?

7

Kann mir irgendjemand erklären, was da falsch war?

Gar nichts. Die Lücke war das ganz normale Browserverhalten. Es geht also um die Grundlagen von HTML und CSS.

Ein wichtiger Grund für den Erfolg von HTML und CSS ist die Abwärtskompatibilität. Heißt: Auch (sehr) alte Webseiten sollen noch von aktuellen Browsern dargestellt werden. Aktuell kann in jedem Browser noch die erste Webseite ever korrekt dargestellt werden, noch komplett ohne CSS. Deshalb müssen die Browser und alle Webseitenersteller die alten Regeln beachten, die den damaligen Entwicklern sinnvoll erschienen.

Aus der Abwärtskompatibilität resultieren zum Beispiel auch die Regeln, wann und wie sich Prozentangaben auswirken. Sowas muss man lernen um es zu verstehen.

Webseitenersteller, die die alten Regeln und vor allen deren Möglichkeiten und Auswirkungen nicht lernen werden deshalb immer wieder unangenehm überrascht werden. Die Grundlagen füllen mehrere Kapitel eines Buchs, deshalb ist ein Forum für die Wiedergabe gänzlich ungeeignet.

8

@Bastian1
Leider hast Du nur das CSS gepostet. Wenn man auch das HTML vor sich sehen würde, könnte man sicher angeben, worauf diese Lücke zurück zu führen war.

9

Danke für die Tips. Mich wundert nur, dass

html, body {margin: 0; padding: 0;}

nicht ausreicht um den margin Bereich zu entfernen.

Wie schon geschrieben. Mit

  • {
    margin: 0;
    padding: 0;
    }

hat es geklappt.

Aber danke für die Infos

10

Mit

html, body {margin: 0; padding: 0;}

setzt du nur die margins und paddings von html und body auf Null. Wobei für die paddings Null bei den beiden Elementen sowieso die Vorgabe ist und die margins von html sind als Vorgabe auch Null. Also viel Gewese um einfach den margin von body auf Null zu setzen. Die gleichen Einstellungen hast du also auch mit der Angabe:

body {margin: 0;}

Mit

* { margin: 0; padding: 0; }

setzt du die margins und paddings aller Elemente auf Null. Also auch jene, bei denen es keinen Sinn macht, da du die margins und paddings für eine vernünftige Darstellung wieder angeben musst. Das ist nur eine schlechte Hilfslösung wenn du nur eine eingeschränkte Anzahl unterschiedlicher Elemente verwenden willst. Das ist aber deine Entscheidung.

11
12

Also jetzt bin ich neugierig woran es wirklich liegt. Hier ist der html code der index Datei:

   <link rel="stylesheet" type="text/css" href="style.css">  <!--Definition der Style css Datei-->
  
  <!-- Beginn des neuen eigenen Schriftcodes-->
<link rel="preconnect" href=" https://fonts.googleapis.com ">

  <link rel="preconnect" href=" https://fonts.googleapis.com ">

<title>Überschrift</title>

  <!--Navigationsmenü-->
<nav id="main-nav">

<img src="svg/gitarrenunterricht.svg">
  
  <h1>Startbildschirm</h1>
  

        
<div id="pfeile">
Pfeil 
<!-- Gitarrenunterricht------------------------------------------------------->

        <h1>Gitarrenunterricht</h1>
  
  <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>


<div id="pfeile">
Pfeil 
<!-- Preise------------------------------------------------------->      

  <h1>Unterrichtshonorar</h1>

    <table>
Unterrichtseinheit Preise 20 Minuten Einzelunterricht / Woche € / Monat 30 Minuten Zweiergruppe / Woche € / Monat 
    <tr>
 <td>30 Minuten Einzelunterricht / Woche</td>
 <td> € / Monat</td>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>


<div id="pfeile">
Pfeil 
<h1>Kontakt</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

 </section>

© 2023 

 </body>

Ich habe auch schon probiert die Lücke zwischen den sections in der css mit : section {margin: 0; padding: 0;) zu beseitigen.

Das bringt auch nichts. Ohne

  • {
    margin: 0;
    padding: 0;
    }

ist zwischen den sections immer ein Lücke.

Weiß jemand den genauen Grund?

Danke

13

Ich gehe auch immer gern den Dingen auf den Grund statt mich damit zufrieden zu geben, dass es „irgend wie“ funktioniert. Und mit deinem HTML kann ich auch die Lücke erkennen. Und der Grund sind, wie von @MrMurphy vermutet, die Collapsing Margins, diese führen dazu, dass das margin-top der Überschrift h1 auf die section übertragen wird. Setze ich das margin-top bei den Überschriften auf 0, verschwindet auch die Lücke.
Die Coll. M. sind etwas, was eigentlich fast immer nur nervt und eher selten von Nutzen ist.

14

Die Collapsing Margins sind für Texte durchaus sinnvoll. Sie gehören von Beginn an zum HTML und stammen somit aus der Zeit vor dem Layouten mit Containern. Container sind in dem Beispiel section und footer.

Ich habe auch schon probiert die Lücke zwischen den sections in der css mit : section {margin: 0; padding: 0;) zu beseitigen.

Das sind wieder mal die Vorgaben, damit änderst du also gar nichts. Damit die Collapsing Margins nicht über Containergrenzen hinausgehen können den Containern entweder mittels padding oder border Grenzen mitgegeben werden. 1px reicht vollkommen aus. In deinem Fall kannst du zum Beispiel

   section {
      min-height: 100%;
   }
...
   footer {
      height: 75px;
      background-color: rgb(255, 0, 0);
   }

erweitern um

   section {
      min-height: 100%;
      padding: 1px;
   }
...
   footer {
      height: 75px;
      background-color: rgb(255, 0, 0);
      padding: 1px;
   }

Eine andere Möglichkeit wäre die Container mittels flex oder grid anzuordnen. Auch damit werden die Grenzen der Container für die Collapsing Margins geschlossen.

Noch ein Hinweis: Mit dem float wirst du wahrscheinlich auch noch viel Spass haben. Du verwendest es sachlich und technisch falsch.