Horizontales Menü

[heinetz]

Hallo Forum,

ich habe nun etwas mit der Umsetzung meines Layouts weitergemacht. Nun versuche ich eine Liste mit icons horizontal darzustellen ... was grundsätzlich gelingt aber eben doch nicht ganz sauber.

Codepen

1. • Die Liste ist zentriert im Container
2. • Die Listenelemente sind linksbündig in der Liste selbst (sieht man wenn die Liste umbricht )
3. • Die Listenelemente haben einen Abstand zueinander. Allerdings soll das erste Listenelement keinen Abstand nach links und das letzte keine nach rechts haben.
4. • Unterhalb der Liste sind ein paar Pixel Abstand zum Container
5. • Die Bilder in den Listenelementen erzeugen ein paar Pixel Abstand zum Rand des Listenelements.

zu 1.) ... verhält sich wie gewünscht.

zu 2.) ... verhält sich wie gewünscht.

zu 3.) das könnte ich mit negativem margin für die Liste lösen oder indem ich Ausnahmen für die beiden (Pseudo-) Listenelemente definiere. Ersteres ist sicher eleganter.

zu 4.) Den erzeugt Liste, weil ich sie zum Inline-Element gemacht habe, um sie zu zentrieren. Mache ich daraus eine Tabelle (display:table), ist der Abstand passé. Allerdings ist sie dann nicht mehr zentriert, was man mit margin:auto lösen könnte, aber das steht im Widerspruch zur Lösung unter 3.

zu 5.) Das kriege ich in den Griff, wenn ich auf die images ein display:block anwende.

Wie Ihr ja lesen könnt, habe für sämtliche der Probleme irgendwelche Lösungen. Die Frage ist aber, ob es nicht eleganter geht.

Hat jemand bessere Lösungen?

gruss, heinetz

[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

[heinetz]

Hallo Rolf,

danke erstmal. Besonders für den Hinweis auf inline-flex!

Dass da semantisch noch einiges zu machen ist und ich BEM nicht konsequent durchziehe, ist mir bewusst. Ich bin halt noch nicht sicher, wie ich es letztlich konstruiere und werde natürlich hinterher ausmisten, wo es geht. Ich taste mich langsam heran 😉

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

und werde natürlich hinterher ausmisten, wo es geht.

Das wird wohl nichts. Was einmal drin ist, wirst du schwer wieder los. Die Kunst ist, überflüssiges gar nicht erst drin zu haben.

Wie schlank das Markup sein kann, hatte ich ja eben gezeigt.

LLAP 🖖

[heinetz]

@@Gunnar Bittersmann

Gut, dann baue ich mal darauf auf. Einige Elemente, die ich am Ende benötigen werde, hatte ich bisher noch nicht eingebaut, um mich der Reihe nach damit beschäftigen zu können. Was noch fehlt, versuche ich in Deine Vorlage einzubauen:

1. Ein Bild Das Bild ist auf Höhe der Headline rechtsbündig im Container angeordnet.

2. Das legal-menu Es ist für mobile Endgeräte unterhalb des language-menus und hat eine eigene border-top. Ab einer Viewportbreite über 1024px ist es neben dem language-menu rechtsbündig im Container angeordnet und die beiden haben eine gemeinsame border-top.

gruss, heinetz

[Matthias Apsel]

Hallo heinetz,

Ab einer Viewportbreite über 1024px ist es neben dem language-menu rechtsbündig im Container angeordnet

Keine gute Idee. Sehbehinderte werden einen großen Zoomfaktor einstellen (möglicherweise nur für die Schriftgröße).

Setze Breakpoints in em. Immer dann, wenn der Inhalt an die gewünschte Stelle passt.

Bis demnächst
Matthias

[heinetz]

@@Matthias Apsel

Die 1024px stehen sinnbildlich für einen Desktop-Monitor und sollen nur die Kommunikation vereinfachen. Der Wert kommt letztlich aus dem Frontend-Setup, mit dem ich hier arbeite.

[Matthias Apsel]

Hallo heinetz,

Die 1024px stehen sinnbildlich für einen Desktop-Monitor

Die Darstellung hat mit einer Breite in px nichts zu tun.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Rolf B

Insbesondere rate ich Dir dringend zu Semantin Forte.

Ein Footer ist ein Footer ist ein footer.

Deine Klassen erinnern an BEM

BEM?

Wie auch immer. Das äußere deiner Container-divs kannst Du definitiv loswerden

Du kannst so zeimlich alle divs loswerden. Einzig die Gruppierung des Textabsatzes mit der Liste im blauen Bereich (ich nenne ihn mal social-links) scheint sinnvoll.

Weitere Mark-up-Korrekturen:

• Hierarchie-Ebene der Überschrift (wurde schon angesprochen)
• alt-Attribute für die Bilder
• Wenn Deutsch Englisch Spanisch ein Sprachwahl-Menü sein soll, dann sollten die Sprachbezeichner in der jeweiligen Zielsprache sein: Deutsch English Español (jeweils mit lang-Attribut). Außerdem gehört ein Sprachwahl-Menü ganz nach oben an den Seitenanfang.
• Auszeichnung der Linkliste als Liste. Wobei eine Linkliste im Footer wohl eher keine Navigationsliste ist, das nav-Element also falsch.

Sieht dann so aus:

<footer id="pagefooter">
	<h2>Slorem ipsum dolor</h2>
	<div id="social-links">
		<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p>
		<ul>
			<li><a href=""><img src="…" alt="…"/></a></li>
			⋮
		</ul>		
	</div>
	<ul id="language-menu">
		<li><a href="" lang="de">Deutsch</a></li>
		<li><a href="" lang="en">English</a></li>
		<li><a href="" lang="es">Español</a></li>
	</ul>
	<ul>
		<li><a href="">Aenean</a></li>
		⋮
	</ul>
</footer>

Da Mark-up genügt zum Stylen völlig ☞ Codepen

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Ein Footer ist ein Footer ist ein footer.

Sagte ich ihm doch :)

Deine Klassen erinnern an BEM BEM?

M wie Murks? M wie Monströs? M wie Meisterhaft? Ich bin mit der BEM-Idee bisher nur marginal in Kontakt gekommen und KANN mir in großen Projekten durchaus vorstellen, dass man damit Ordnung halten kann.

Da Mark-up genügt zum Stylen völlig

Markup in da Browzr?

Rolf

[heinetz]

Hallo,

Deine Klassen erinnern an BEM

BEM?

Richtig, das ist hier Vorgabe. Ich werde das vielleicht später mal hinterfragen. Aber erstmal versuchen, die Vorgabe richtig zu verstehen und ihr unkritisch folgen.

Wie auch immer. Das äußere deiner Container-divs kannst Du definitiv loswerden

Da Mark-up genügt zum Stylen völlig ☞ Codepen

Basierend darauf habe ich mal um- und weitergebaut.

• Das Grid habe ich wieder eingebaut. Ich hatte ja erklärt, warum ich es an der Stelle einsetzen muss.
• Es ist ein Bild dazugekommen, das rechtsbündig neben der Headline im Container angeordnet ist. Ohne zusätzlichen Cointainer ;)
• Die beiden horizontalen Listen im unteren Bereich werden nun je nach viewport nebeneinander oder untereinander angeordnet. Dazu habe ich einiges probiert, um ohne zusätzlichen Container auszukommen. Aber er erschien mir letztlich sinnvoll.
• Weiterhin habe ich versucht, mich an BEM zu halten.

Was meinst Ihr dazu?

gruss,

heinetz

[Gunnar Bittersmann]

@@heinetz

• Weiterhin habe ich versucht, mich an BEM zu halten.

Nein.

class="o-footer__top", class="o-footer__center", o-footer__bottom" ist präsentationsbezogenes Markup. 💩

BEM ist nicht präsentationsbezogenes Markup.

LLAP 🖖

[heinetz]

@@Gunnar Bittersmann

Ok, Du meinst, dass der Name für die Klasse 'o-footer__bottom' nicht korrekt gewählt ist?

Besser wäre z.B. 'o-footer__menus' ?

[Matthias Apsel]

Hallo heinetz,

Ok, Du meinst, dass der Name für die Klasse 'o-footer__bottom' nicht korrekt gewählt ist?

Besser wäre z.B. 'o-footer__menus' ?

Welche Bedeutung hat das "o-"?

• .page-footer__heading
• .page-footer__inhaltliche-Beschreibung-der-Liste
• .page-foorer__language

Bis demnächst
Matthias

[heinetz]

@@Matthias Apsel

das 'o' steht für organism. Entsprechend Atomic Design.

[Tabellenkalk]

Hallo,

das 'o' steht für organism.

Organismen zum Webentwickeln? Was sagt der Ethikrat dazu?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Organismen zum Webentwickeln? Was sagt der Ethikrat dazu?

„Lebensformen …“

LLAP 🖖