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

Lücke zwischen Seiten entfernen funktioniert nicht

B

Bastian1

Neues Mitglied
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%}
Zum Vergrößern anklicken....

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%}
Zum Vergrößern anklicken....

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

Hat jemand eine Idee?
 
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
Zum Vergrößern anklicken....

Dabei kann es sich um die Auswirkungen von "Collapsing Margins" handeln.
 
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 */
}
Zum Vergrößern anklicken....

Collapsing Margins sagt mir nichts. Ich denke mal, dass die Margins der einzelnen selections sich überlappen, oder?
 
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%}
Zum Vergrößern anklicken....
 
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?
 
Kann mir irgendjemand erklären, was da falsch war?
Zum Vergrößern anklicken....

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.
 
@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.
 
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
 
Mit

Code: 
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:

Code: 
body {margin: 0;}

Mit

Code: 
* {
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.
 
MrMurphy schrieb:
Mit

Code: 
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:

Code: 
body {margin: 0;}

Mit

Code: 
* {
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.
Zum Vergrößern anklicken....
 
Also jetzt bin ich neugierig woran es wirklich liegt. Hier ist der html code der index Datei:
<!doctype html>
<html lang="de">


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0", user-scalable="yes">

<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.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">



<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+NL:[email protected]&display=swap" rel="stylesheet">
<!-- Ende des neuen eigenen Schriftcodes-->



<title>Überschrift</title>
</head>


<body>

<!--Navigationsmenü-->
<nav id="main-nav">
<ul>
<li><a href="#gitarrenunterricht">Gitarrenunterricht</a></li>
<li><a href="#preise">Preise</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>

<!-- Startseite ------------------------------------------------------->
<section id="home">


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

<h1>Startbildschirm</h1>



<div id="pfeile">
<a href="#gitarrenunterricht">
<img src="svg/pfeil.svg" width="32px" alt="Pfeil"></a>
</div>



<!-- Gitarrenunterricht------------------------------------------------------->


</section>




<section id="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">
<a href="#preise">
<img src="svg/pfeil.svg" width="32px" alt="Pfeil"></a>
</div>
</section>

<!-- Preise------------------------------------------------------->

<section id="preise">

<h1>Unterrichtshonorar</h1>

<table>
<tr>
<th>Unterrichtseinheit</th>
<th>Preise</th>

</tr>
<tr>
<td>20 Minuten Einzelunterricht / Woche</td>
<td> € / Monat</td>

</tr>
<tr>
<td>30 Minuten Zweiergruppe / Woche</td>
<td> € / Monat</td>

</tr>


<tr>
<td>30 Minuten Einzelunterricht / Woche</td>
<td> € / Monat</td>

</tr>
</table>


<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">
<a href="#kontakt">
<img src="svg/pfeil.svg" width="32px" alt="Pfeil"></a>
</div>
</section>

<!-- Kontakt------------------------------------------------------->

<section id="kontakt">

<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>


<!-- Footer------------------------------------------------------->

<footer>

<p> &copy; 2023 </p>

</footer>




</body>


</html>
Zum Vergrößern anklicken....

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
 
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.
 
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.
Zum Vergrößern anklicken....

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

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

erweitern um

Code: 
   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.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben