• Hallo

    Der Link funktioniert nicht.

    Deshalb mal ins blaue ein Hinweis auf einen typischen Anfängerfehler:

    Die Breite von Elementen besteht aus

    margin-left
    border-left
    padding-left
    width
    padding-right
    border-right
    margin-right

    Wenn du der Breite (width) 100vw gibst bleibt für weitere Breitenangaben kein Platz mehr.

    Du musst in die Gesamtbreite alle genannten Werte einrechnen.

    Alternativ können mit dem Border-Box-Modell padding und border automatisch von der Breite abgezogen werden. margin muss aber auch in diesem Fall der Breite zugerechnet werden.

    Um einem Element das Border-Box-Modell zuzuweisen benötigt es im CSS die Anweisung

    Code
    box-sizing: border-box;

    Allerdings funktioniert das Border-Box-Modell nicht in allen Konstellationen und Browsern problemlos. Selbst in Browsern, die (angeblich) das Border-Box-Modell umsetzen können, kann es in Einzelfällen Probleme geben. Darüber finden sich im Web aber kaum Informationen. Deshalb muss man es immer selbst in den üblichen Browsern mit seiner Website testen.

    Von daher ist es mit Vorsicht zu verwenden.

    Gruss

    MrMurphy

  • @MrMurphy
    Vielen Dank für die ausführliche Antwort...

    http://moritz347.lima-city.de/test/v2/about.html



    Der Link müsste jetzt klappen...
    Kann ich allem auf der Website box-sizing: border-box; geben? Wenn ja wie? Über

    CSS
    html {	box-sizing: border-box;}




    oder

    CSS
    *{	box-sizing: border-box;}



    Wo kann ich mal nachlesen, was alles automatisch Abstände bekommt? Oder kann ich das über Chrom irgendwie herausfinden?

  • Die zweite Variante.

    Vererbte Styles kannst du auch in den Chrome-DevTools finden. Sie sind dort untergebracht, wo alle CSS-Styles angezeigt werden, wenn du auf ein Element klickst.

  • Hallo

    Bei Breitenangaben in Prozent wird der rechte Scrollbalken nicht berücksichtigt. Die Breite ist bei 100 Prozent die sichtbare Fläche ohne den Scrollbalken.

    Du verwendest für die Breite die Einheit vw.

    Bei der Einheit vw wird hingegen die gesamte Fensterbreite berücksichtigt, also auch der Bereich hinter dem rechten Scrollbalken. Damit dieser Bereich hinter dem Scrollbalken bei 100vw sichtbar werden erscheint zusätzlich der untere Scrollbalken.

    Das grundsätzliche Problem dabei ist, das die Breite des Scrollbalkens nicht vorgegeben ist. Die ist also von Browser zu Browser unterschiedlich. Zumal der Scrollbalken in der Regel bei wenig Inhalt noch ausgeblendet wird. Mit der Einheit vw kann also nicht zuverlässig die gesamte Fensterbreite gefüllt werden. Für seitenbreitenfüllende Webseiten ist also Prozent sinnvoller.

    Gruss

    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!