Problem mit Bild-Positionierung

[Rolf B]

Hallo Paludis,

dass deine Menütexte nicht vertikal zentriert sind, liegt an der height-Angabe für die a Elemente. Guck es Dir in den Browser-Entwicklungswerkzeugen an. Die a sind vertikal zentriert, der Text ist in den a bündig oben und wirkt im Menü deshalb zu hoch. Verwende line-height:150% oder so, statt height.

Du solltest die a Elemente auch nicht mit padding auf die gewünschte Breite bringen. Die a selbst sind bei Dir variabel breit - gemäß ihrem Text - und das führt zu den Lücken. Gib ihnen padding:10px 0 (damit du die Höhe aufpolsterst) und width:90% (damit sie auf Breite kommen und einen Abstand haben). Oder width:100%, wenn Du keinen Abstand willst :)

Wenn der erste Menüpunkt nicht ganz links stehen soll, gib dem ul ein entsprechendes padding. Hier solltest Du ohnehin noch die margins/paddings vom Browser entfernen, also am ul sowas wie margin:0; padding:0 0 0 1em;

Bei den Farben musst Du nochmal sortieren. Die :hover Effekte sieht man nicht, weil die Farben immer gleich sind.

Ja, und dann musst Du entscheiden, wie das Menü sich bei Breitenänderungen des Viewport verhalten soll.

• Menüpunkte sollen gleich breit bleiben und als Einheit zentriert werden. Wird der Viewport zu schmal, wird auf ein anderes Layout umgeschaltet (was Du noch festlegen musst)
• Menüpunkte sollen gleich breit bleiben und am linken Rand des nav bleiben. Wird der Viewport zu schmal... siehe oben
• Menüpunkte sollen ihre Breite proportional zur Viewportbreite ändern. Wird der Viewport zu schmal... siehe oben

Deine aktuelle Lösung tut letzteres. Ob das so ist, weil Du es genau so willst, oder weil Du keine andere Möglichkeit gesehen hast, weiß ich nicht. Möglichkeiten gibt's schon.

Rolf