Abstand zum Rand

  • Hallo!


    Ich schaffe es einfach nicht, bei den Menüpunkten einen Abstand nach oben hinzubekommen. Präzisierung: Meine damit, dass der Großbuchstabe nicht so nah am Rand pickt, da will ich einen kleinen Abstand haben. Btw, kann man sowas eigentlich vertikal zentrieren?
    Überall mit paddings und margins (generell oder -top, -buttom) schon versucht.
    Statt Listenelemente, habe ich es auch mit spans probiert.
    Es klappt nicht.
    Wo habe ich einen Fehler drin?




  • Hallo


    Zitat

    Wo habe ich einen Fehler drin?


    Dein Grundproblem sind deine veralteten Vorstellungen von HTML und CSS. Mit aktuellem HTML5 und CSS3 hat dein Quelltext leider eher wenig zu tun.


    Durch


    Code
    * {
       margin: 0px;
       padding: 0px;
    }


    werden alle Abstände auf Null gesetzt. Das war vor 15 Jahren mal angesagt, hat sich aber inzwischen als nachteilig herausgestellt. Die meisten Abstände der Browser-Stylesheets sind durchaus sinnvoll und sollten genutzt werden. Wenn du die Eigenschaften trotzdem behalten willst musst du natürlich alle Abstände mit eigenen Werten belegen.


    Andererseits vergibst du unnötigerweise Höhenangaben (height), die das Layout einschränken. Die Höhe von Containern wird durch deren Inhalt bestimmt und soll vom Browser selbst bestimmt werden.


    Zitat

    bei den Menüpunkten einen Abstand nach oben hinzubekommen


    Wenn du dem umgebenden Container .navigation eine Höhe von 2em gibst bleibt bei einer Schriftgröße von 1.5em nur wenig Platz für Abstände. Da du zudem die li-Elemente zu inline-Elementen bestimmst werden die Möglichkeiten Abstände zu bestimmten weiter eingeschränkt. Eine weitere Einschränkung ist das veraltete und überflüssige center-Element.


    Von daher ist die gesamte CSS-Konstruktion zu überdenken.


    Momentan kannst du nur die Höhe von .navigation vergrößern, zum Beispiel auf 4em und den li-Elementen ein line-height von 4em hinzufügen. Oder halt statt der 4em andere dir passende Werte einsetzen.


    Spätestens bei kleineren Fenstern wird dir das Layout aber um die Ohren fliegen.


    Durch das setzen von "display: inline;" reagieren die li-Elemente nicht mehr auf Abstände wie padding oder margin.


    Insgesamt wäre es sinnvoller das Menü mit "display: block;" zu definieren und die Menüpunkte mit float, oder aktueller flex, nebeneinander zu setzen sowie das height bei .navigation und das center-Element wegzulassen. Dazu benötigst du aber mehr Hintergrundwissen.


    Gruss


    MrMurphy

Jetzt mitmachen!

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