Jeder Li-Feld bzw. ul-Feld eigene Klasse zuordnen

[ingo preuss]

Hallo,
ich setze mich grad mit Listenformatierung auseinander. Es geht um ein flyout-Menu , welches bei Stu Nicholls gesehen habe. Der Listenaufbau sieht so aus:

<ul>
<li><a href="../index.html">Item 1</a></li>
<li><a href="#nogo">Item 2</a></li>
<li class="sub"><a href="#nogo">Item 3 &#171;<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a href="../index.html">Item 3a</a></li>
<li class="sub"><a href="#nogo">Item 3b &#171;<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">Item 3bi</a></li>
<li><a href="#nogo">Item 3bii</a></li>
<li class="sub"><a href="#nogo">Item 3biii &#171;<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Item 3biii-1</a></li>
<li><a href="#nogo">Item 3biii-2</a></li>
<li><a href="#nogo">Item 3biii-3</a></li>
<li><a href="#nogo">Item 3biii-4</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Item 3c</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6</a></li>

</ul>

Das dort gezeigt Menü macht jedoch Probleme. Kann ich jedem Listfeld eine Klasse zuordnen, sodass ich im Stande bin, diese explizit zu formatieren oder gibt es eine geeignetere Methode?

Grüße, Ingo

[Der Hamburger]

Für individuelle Formatierungen einzelner nodes sind eigentlich IDs vorgesehen:

(X)HTML:

<node id="value">Content</node>

CSS:

node#id { property: value; }

Jede ID darf nur null bis ein mal pro (X)-HTML-Seite vergeben werden.
Falls du mehr Elemente mit den gleich Eigenschaften stylen willst, bietet es sich an, auf Klassen zurückzugreifen.

Also ein "Ja, aber..." zu deiner ersten Frage.

Ich hab mich jetzt nicht reinvertieft in die Struktur. Ob es noch was geeigneteres gibt, lasse ich deshalb mal unbeantwortet im Raum stehen.

[Mich@el]

Hallo ingo preuss,
ich habe hier mein Flyoutmenü gepostet. Das geht nur von links nach rechts auf. Scroll mal runter zu Punkt #6. Das habe ich auch von Stu, hab´s mir ein wenig angepaßt und es funzt sehr gut.

Grüße
Michael

[ingo preuss]

Hallo Michael,
ich sehe mir grad dein gepostetes Menü an. Gibt's einen aussergewöhnlichen Grund, weshalb der ul innerhalb von .menu zweimal margin-left zugewiesen wird?

* html .menu ul {margin-left:-16px; margin-left:0;}

In den Zeilen 35 und 37 definierst du die hover-Zustände, jeweils unterschiedlich. Warum einmal mit *html und darunter ohne *html, dafür aber mit einem > ?

* html .menu a:hover {color:#fff; background:#0A0AFF;}

.menu :hover > a {
color:#fff; 
background:#949e7c;
}

Gruß und Dank, Ingo

[Mich@el]

Hi Ingo,
ich habe mir das FlyOutMenü von CSSplay entsprechend angepasst. Die Dinge, die ich mit meinen Anforderungen anglich funktionieren. Deswegen habe ich mir über "gewisse" Codeschnipsel keine Gedanken gemacht.

Schau´Dir einfach die Vielfalt der Menüs von CSSplay an. Vielleicht findest Du ja auch eine andere, die Dir besser in den Kram paßt.

Grüße
Michael

[jazzman]

Hallo Michael,
ich sehe mir grad dein gepostetes Menü an. Gibt's einen aussergewöhnlichen Grund, weshalb der ul innerhalb von .menu zweimal margin-left zugewiesen wird?

* html .menu ul {margin-left:-16px; margin-left:0;}

In den Zeilen 35 und 37 definierst du die hover-Zustände, jeweils unterschiedlich. Warum einmal mit *html und darunter ohne *html, dafür aber mit einem > ?

* html .menu a:hover {color:#fff; background:#0A0AFF;}

.menu :hover > a {
color:#fff; 
background:#949e7c;
}

Gruß und Dank, Ingo

* html ist ein Hack für den IE. * Hack