Sticky Element erzeugt weißen Streifen

PeterLustig9 · 11. Februar 2021

Hallo, ich habe ein Problem. Ein "sticky-element" funktioniert auf meiner Seite ganz gut - nur ganz unten nicht. Ich kann mir das ganze nicht erklären und habe bestimmt schon 2-3h lang vergebens nach dem Fehler gesucht. Ich habe die Hintergrundfarbe in dem Screenshot sehr dunkel gemacht damit man besser erkennen kann was mein Problem ist. Ich möchte den weißen Streifen unten weg haben und der blaue Kasten soll sich auch dort unten noch am untersten Bildrand befinden.

Code

<!---Sidebar--->
<div class="dropdown">
  <button class="dropbtn">Kontaktdaten</button>
  <div class="dropdown-content">
    <h5>Sie erreichen uns unter</h5>
    <h6>..................</h6>
    <h6>F....................</h6>
    <h6>M.....................</h6>
    <h5>Nutzen Sie auch gerne das Kontaktformular</h5>
  </div>
</div>

<!---Footer--->

    <footer>
      <nav>
        <ul>
          <li><a href="Impressum.html">Impressum</a></li>
          <li><a href="Datenschutz.html">Datenschutz</a></li>
        </ul>
      </nav>
      <p>© KLUTH Service GmbH & Co.KG</p>
    </footer>
  </body>
</html>

Alles anzeigen

Code

.dropbtn {
  background-color: #00006c;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;
}

.dropdown {
    position: sticky;
    bottom:0px;
    display: inline-block;
    margin-left: 1150px;
    margin-bottom: 0px;
    z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom:55px;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #00008b}

h5{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 8px 0 8px 0;
}

h6{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#Kontakt {
  background-color: grey;
}
/*Footer******************/

footer {
  width: 100%;
  height: 40px;
  background-color: #3f3f3f;
  margin-top: 0px;
}

footer a {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: right;
  width: 120px;
  padding-top: 10px;
  font-weight: 300;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: left;
  width: 300px;
  padding-top: 1px;
}

Alles anzeigen

PeterLustig9 · 11. Februar 2021

*Anhang*

PeterLustig9 · 11. Februar 2021

Habe es geschafft!!! Keine schöne Lösung aber funktioniert. Für alle die mal vor dem Problem stehen sollten:

Code

.dropbtn {
  background-color: #00006c;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;
}

.dropdown {
    position: sticky;
    bottom:0px;
    display: inline-block;
    margin-left: 1200px;
    z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom:55px;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #00008b}

h5{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 8px 0 8px 0;
}

h6{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#Kontakt {
  background-color: #f0f0f0;
}
/*Footer******************/

footer {
  width: 100%;
  height: 40px;
  background-color: #3f3f3f;
  margin-bottom: -95px;
}

footer a {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: right;
  width: 120px;
  padding-top: 10px;
  font-weight: 300;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: left;
  width: 300px;
  padding-top: 1px;
}

Alles anzeigen

MrMurphy · 11. Februar 2021

Dein Problem resultiert aus den sogenannten "Collapsing Margins".

Das ul-Element und die li-Elemente haben von Haus aus jeweils einen Außenabstand nach oben. Die beiden erzeugen dann den Abstand.

Eine sinnvolle Lösung ist deshalb im CSS jeweils beim ul-Element und für die li-Elemente (also zwei Einträge) ein "margin-top: 0;" einzufügen. Dann kannst du auf dein den negativen margin beim Button verzichten, der zwar funktioniert, aber im allgemeinen als unschöner CSS-Code angesehen wird.

Noch ein Tip, weil ich nicht weiß ob es vor dir so gewollt ist: Mach mal das Fenster schmaler und schaue wie sich der Button verhält. Bei schmalen Fenstern ist der nicht mehr erreichbar.

PeterLustig9 · 11. Februar 2021

Danke dir! Ich habe die Optimierung für andere Auflösungen noch nicht begonnen. Den Button werden ich wahrscheinlich für kleinere Fenster entfernen. Oder hättest du eine andere Idee? mfG

Elly · 17. Februar 2021

Probier statt margin-left: 1200px; mal margin:0 auto; - das sollte ihn horizontal zentrieren.

Elly · 23. Februar 2021

Ich hab grad selbst gecheckt, was meinem JS-Schnipsel gefehlt hat, dass das auch in einem neuen Dokument funktioniert. Es braucht eine Variable, die zuerst definiert wird, in meinem Fall die Navigation nav.

Code

const nav = document.querySelector("nav");
        window.onscroll = ()=>{
          this.scrollY > 20 ? nav.classList.add("sticky") : nav.classList.remove("sticky");
        }

Vielleicht hilft es dir ja weiter.

Sticky Element erzeugt weißen Streifen

Jetzt mitmachen!

Teilen

Tags