Verschachteltes Menü, li li lässt sich nicht mehr ansteuern....

[Sally]

Ich möchte ein Menü Asugeben, die erste Position, quasi die Oberkategorie

BOLD, red,
.nav > ul > li > a

-----------------------------------

und die unterkategorien
NORMAL und PADDING

.nav ul ul li a:link

aber genau da habe ich ein Problem. Er nimmt mir das padding nicht an...
so klebt der border-bottom: 1px dashed #d4d4d4; an der Schrift.

.nav {
text-align: left;
max-width:1160px;
padding:0 20px 0 20px;
margin:0px auto;
margin-bottom:60px;
border-left: 2px solid #d4d4d4;
}

.nav > ul > li {
display: inline-block;
text-align: left;
vertical-align: top;
padding:0 30px 0 0;
width:120px;
font-size: 14px;
}

.nav > ul > li > a {
display: block;
color: #FF0000;
font-weight:bold;
padding:0 0 10px 0;
}

.li li ul {
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
}

.nav ul ul li a:link,
.nav ul ul li a:active,
.nav ul ul li a:visited,
.nav ul ul li a:hover {
color: #C0C0C0;
font-size: 14px;
border-bottom: 1px dashed #d4d4d4;
font-weight:normal;
}

[Matthias Apsel]

Om nah hoo pez nyeetz, Sally!

Code lässt sich auch als code auszeichnen.

»» BOLD, red,  

> .nav > ul > li > a

BOLD und red sind keine HTML-Elemente.

Das CSS alleine ist wenig hilfreich.

NORMAL und PADDING sind keine geschickt gewählten Bezeichner

»» .nav {  
}

Es gibt auch ein nav-Element.

Für eine effiziente Hilfe wäre ein online-Beispiel gut.

Matthias

[Thorsten]

Hallo,

zeige uns doch bitte noch den dazugehörige HTML-Code. Ist so nicht nachvollziehbar.
Bist du dir sicher, dass es eine Klasse gibt, die du "li" genannt hast, und glaubst da das war eine gute Idee? :-P

VG Thorsten

[Gunnar Bittersmann]

@@Thorsten:

nuqneH

Bist du dir sicher, dass es eine Klasse gibt, die du "li" genannt hast, und glaubst da das war eine gute Idee? :-P

<div class="ul">  
  <div class="li">eins</div>  
  <div class="li">zwei</div>  
  <div class="li">drei</div>  
</div>

Das macht man so, seit irgendwer mal gesagt hat, Tabellen seien irgendwie out. Warum auch immer.

Und Ansätze wie OOCSS und BEM machen mit.

Qapla'

PS. Ach nee, BEM nicht, da müsste die Klasse ja wohl "ul-li" heißen.

[Thorsten]

Hi!

Naja, beim TO war das sicherlich keine Absicht... ;-)
Tja, OOCSS und BEM... Mir missfällt das CSS im Vergleich zur semantischen Auszeichnung die Oberhand gewinnt. Sind wohl Webkrankheiten wie "Klassitis" und "Div-Suppen", die die überstandenen "Tabellenzeiten" und die antik angehauchten "Framezeiten" ersetzen.

Qapla'

[molily]

Hallo,

Mir missfällt das CSS im Vergleich zur semantischen Auszeichnung die Oberhand gewinnt.

Dieser Satz ist so sinnvoll wie »Mir missfällt, dass Autos im Vergleich zu Straßen die Oberhand gewinnen«.

Mathias

[Thorsten]

Hallo,

Mir missfällt das CSS im Vergleich zur semantischen Auszeichnung die Oberhand gewinnt.

Dieser Satz ist so sinnvoll wie »Mir missfällt, dass Autos im Vergleich zu Straßen die Oberhand gewinnen«.

Mathias

Naja, du weißt doch, was ich damit sagen möchte, oder?
Ich finde es nicht gut, wenn der Quellcode nur im Sinne von CSS aufgebläht wird.

VG Thorsten

[molily]

Hallo!

Und Ansätze wie OOCSS und BEM machen mit.

Weder OOCSS noch BEM sehen vor, dass man derart kaputtes Markup schreibt. Sie helfen lediglich dabei, wie man wiederkehrende CSS-Module identifiziert, strukturiert und wiederverwendet.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Weder OOCSS noch BEM sehen vor, dass man derart kaputtes Markup schreibt.

OOCSS und BEM sehen aber schon vor, dass man die li einer Liste

<ul class="myList">  
  <li/>  
</ul>

nicht per ``.myList > li{:.language-css} selektiert (weil Typselektoren angeblich böse wären), sondern allen li auch noch eine Klasse "myList-myListItem" verpasst.

Das ist auch kaputtes Markup.

Qapla'

[molily]

OOCSS und BEM sehen aber schon vor, dass man die li einer Liste nicht per ``.myList > li{:.language-css} selektiert (weil Typselektoren angeblich böse wären), sondern allen li auch noch eine Klasse "myList-myListItem" verpasst.

Die Idee dahinter ist entscheidend. Ziel sind Module, die nicht an ein bestimmtes Markup gebunden sind. Das soll schnelle Änderungen im HTML und CSS sowie maximale Wiederverwendbarkeit erlauben.

Typselektoren verheiraten die CSS-Modulstruktur mit einer gewissen Elementstruktur. Das kann man machen, aber aus Effizienz- und Wartbarkeitsgründen ist es sinnvoll, das auseinanderzuziehen.

Wenn sich die Semantik ändert, dann mache ich aus dem ul z.B. ein ol, section, aside oder div, aus den lis, articles, sections, ps oder divs. Auf einer weiteren Seite will ich dieselbe Darstellung, habe aber andere Inhalte, die anders ausgezeichnet sind. Will ich von dem Modul ableiten, sei es nun per Klassen im HTML oder per @extend im Präprozessor, so würden mir Typselektoren das Markup des abgeleiteten Moduls vorgeben.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Die Idee [hinter OOCSS und BEM] ist entscheidend. Ziel sind Module, die nicht an ein bestimmtes Markup gebunden sind. Das soll schnelle Änderungen im HTML und CSS sowie maximale Wiederverwendbarkeit erlauben.

Und das erreicht man mit präsentationsbezogenem Markup?? Die Meinungen darüber sind geteilt.

Qapla'

[1UnitedPower]

Meine Herren!

Und das erreicht man mit präsentationsbezogenem Markup?? Die Meinungen darüber sind geteilt.

Muss nicht sein [sitepoint].

Der Artikel proklamiert einen sehr klugen Zwischenschritt, der vorsieht die eigenen semantischen Klassennamen auf die präsentationsbezogenen Klassennamen der CSS-Frameworks zu mappen. Der Grundgedanke lässt sich natürlich auch weiter spinnen und statt "eigenen Klassennamen" können wir problemlos "eigene Selektoren" einsetzen.