Horizontales Menü

[Rolf B]

Hallo heinetz,

ein paar Dinge hatte ich hier angesprochen, die könntest Du Dir noch anschauen. Insbesondere rate ich Dir dringend zu Semantin Forte.

Deine Klassen erinnern an BEM, sind es aber nicht ganz. Hast DU eine Vorgabe, an die Du dich da halten musst?

Wie auch immer. Das äußere deiner Container-divs kannst Du definitiv loswerden, und die Attribute auf das .o-footer Div setzen. Und das div.o-footer kannst Du als footer-Element notieren, dann braucht's auch keine Klasse mehr. Wenn Du unbedingt deinen Klassennamen-Stil verwenden willst, dann bleib halt dabei, aber trotzdem kannst Du semantische Elemente verwenden.

img ist ein Inline-Element, deswegen gibt's eine Text-baseline und Platz für Unterlängen. Das macht die li zu hoch. Deswegen ist auch unter der ul eine kleine Lücke, du machst sie mit inline-block zum inline-Element. Das floaten der li macht das Gesamtkonstrukt nicht einfacher. HIER ist nun die Stunde der Flexbox gekommen. Gib der ul display: inline-flex, nimm dem li den float und den display weg, mach das img zum display:block, und alles ist gut.

Dein Margin-Problem der li wurde neulich schon mal diskutiert. Es geht z.B. so:

.o-footer ul li {
    margin: 10px 0;
}
.o-footer ul li:nth-of-type(n+2) {
  margin-left:10px; 
}

Die erste Regel definiert top/bottom Margin von 10px und keinen left/right Margin. Die zweite Regel gibt jedem li, ab dem zweiten, 10px linken Rand. Diese Regeln definierst Du sinnvollerweise auf .o-footer und nicht auf .o-footer__center, weil ich den Eindruck habe, dass Du das im __bottom auch brauchst.

Und dann solltest Du nochmal deine Klassendefinitionen aufräumen. Teils hast Du für den gleichen Selektor mehrere Regeln, und du hast auch Überschneidungen zwischen den Regeln, die Du in eine eigene Regel ausklammern könntest.

Rolf