Horizontales Menü
![](/uploads/default_avatar/thumb/missing.png)
- css
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.
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
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
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
@@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 🖖
@@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:
Ein Bild Das Bild ist auf Höhe der Headline rechtsbündig im Container angeordnet.
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
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
@@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.
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
@@Rolf B
Insbesondere rate ich Dir dringend zu Semantin Forte.
Ein Footer ist ein Footer ist ein footer
.
Deine Klassen erinnern an 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:
alt
-Attribute für die Bilderlang
-Attribut). Außerdem gehört ein Sprachwahl-Menü ganz nach oben an den Seitenanfang.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 🖖
Hallo Gunnar,
Ein Footer ist ein Footer ist ein
footer
.
Sagte ich ihm doch :)
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
Hallo,
Deine Klassen erinnern an 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.
Was meinst Ihr dazu?
gruss,
heinetz
@@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 🖖
@@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' ?
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-"?
Bis demnächst
Matthias
@@Matthias Apsel
das 'o' steht für organism. Entsprechend Atomic Design.
Hallo,
das 'o' steht für organism.
Organismen zum Webentwickeln? Was sagt der Ethikrat dazu?
Gruß
Kalk
@@Tabellenkalk
Organismen zum Webentwickeln? Was sagt der Ethikrat dazu?
LLAP 🖖