Problem mit Bild-Positionierung

[marctrix]

Hej Paludis,

Das Problem ist:

Der Text/die Überschriften sitzen nicht mittig in der Navigationsleiste und die Abstände/Aufteilung und Grösse der Hover-Effekte stimmt nicht wie man im Bild sehen kann.

Tipp: fang immer beim innersten Element an, bei der untersten Verschachtelungsebene.

In Deinem Layout hast du ja eine Vorstellung davon, wie groß die Buttons sein sollen.

Zunächst die Höhe: die erreichst du durch hinzufügen von padding (Innenabständen) oben und unten.

Die Elternelemente li werden niemals kleiner sein (wenn du das nicht explizit angibst).

Ein wenig komplizierter wird es, die Links so zu gestalten, dass sie die gewünschte Breite haben (obwohl der code dafür einfach ist, braucht es eine Vorüberlegung):

Wenn du möchtest, dass die Links alle zusammen die gesamte Breite ausfüllen und die Links alle gleich breit sind, möchtest du vielleicht 100% durch die Anzahl der Links teilen. Das funktioniert zwar, hat aber allerhand Nachteile:

1. Du möchtest Rahmen und Abstände innen und außen, die du in Deine Berechnung mit einbeziehen musst, wenn du Prozente und em-Angaben mischst musst du Calc verwenden - ist kompliziert
2. Kommt ein weiterer Menüpunkt hinzu oder fällt einer weg, fängst du mit dem ganzen Mist wieder an

Also sorge dafür, dass Dein Layout-Wunsch auch ohne explizite Breitenangaben erfüllt wird, indem du eine Layout-Methode wählst, bei der der Browser eigenständig für gleich breite Kästen sorgt.

Flexbox oder Grid eignen sich hierfür. Welches du präferierst hängt vom gewünschten Verhalten ab. Auch CSS-LAyout-Tabellen können hier hilfreich sein. In jedem Fall musst du mit media-Queries für ein vernünftiges Aussehen auf kleinen und großen Geräten sorgen.

Der wichtigste Punkt ist aber: den Links kannst du nur eine Breite mitgeben, die sich auf das Elternelement li bezieht - was dir nichts nützt. (Es sei denn: Wenn du mit vw als Einheiten rechnest, aber dann bist du wieder bei Punkt 1 der oben beschriebenen Probleme).

Also müssen die li die Breite vorgeben — wir gehen also vom niedrigsten Element eine Ebene höher, wenn wir nicht mehr weiterkommen.

Die li haben einen schönen Vorteil: sie befinden sich in einer ul - hier kannst du später bequem die gewünschte Gesamtbreite des Konstrukts definieren. Aber bleiben wir erst einmal bei den Listeneinträgen:

Das Standard-CSS-Box-Modell bezieht Angaben zur Ausdehnung der Elemente auf deren Inhalt, Innenabstand und Rahmen werden zusätzlich hinzugefügt. Das macht die Berechnung so kompliziert wie in 1. beschrieben. Abhilfe schafft box-sizing: border-box; — das sorgt dafür, dass sich Angaben wie Breite und Höhe auf das Element inklusive Innenabständen und Rahmen bezieht.

Ich gebe das inzwischen für alle Elemente sowie CSS-generierten Content folgendermaßen standardmäßig an:

*, *::before, *::after { box-sizing: border-box; }

Nun kannst du getrost eine Breite in Prozent angeben.

Bei fünf Elementen also

li {
    width: 20%;
}

Da du einen Abstand zwischen den Links möchtest, kannst du mit ein wenig padding im li dafür sorgen, dass sich die Links nicht berühren. Du möchtest den Abstand nur zwischen den Links. Also beispielsweise am Ende (rechts) von jedem li — außer am letzten.

Hier hilft dir der not-Selektor:

li:not(:last-child) {
    padding-right: .125rem;
}

Jetzt haben die li die richtige Breite und sie sorgen dafür, dass die beinhalteten Links nicht aneinander stoßen können.

Bleibt nur noch ein Problem: wie dafür sorgen, dass die Links die gesamte Breite ausfüllen? Inline-Elemente kann man nicht breiter ziehen. Inline-Block schon. Ein width: 100%; würde normalerweise wieder zu Problem 1 zu führen, was aber durch box-sizing: border-box für alle Elemente gelöst ist. Es geht aber noch einfacher: with: auto sorgt dafür dass ein Element die gesamte Breite einnimmt, ohne breiter als das Elternelement zu werden. Ud das schöne: es gibt eine Darstellungsart, die das standardmäßig tut. Nicht inline-block, sondern block.

Der gesamte Code lautet also:

*, *::before, *::after { box-sizing: border-box; }

li {
    width: 20%;
}
li:not(:last-child) {
    padding-right: .125rem;
}
a {
    display: block;
    padding: .75em .25em; /* erster Wert: oben/unten - zweiter Wert: rechts/links */
}

CSS Grid und flexbox ließen sich für dieses Problem nicht kürzer schreiben und flexbox musst du die eigentliche Stärke verbieten, den Raum dynamisch und anteilmäßig auszufüllen, wenn du gleich breite Buttons haben möchtest. Bei unterschiedlich breiten Buttons dagegen würde ich flexbox bevorzugen. Vor allem wenn Umbrechen erlaubt ist (hängt von den Designvorgaben ab).

Aber mit der gezeigten Lösung kommst du erst mal mit den dir bekannten Techniken und Eigenschaften hin. Eine schnelle und einfache Lösung für das konkrete Problem. Auf Dauer solltest du dich natürlich auch mit flexbox und CSS-Grid auseinandersetzen.

Die Seite ist bis jetzt nicht für andere Screen sizes als meine optimiert

Du solltest mit der Darstellung für die kleinsten Displays anfangen! Das wird dir die Arbeit sehr erleichtern!

Marc