verschachtelte listen

[alexf812]

hallo...

ich möchte eine menustruktur bauen normal mit haupt- und unterpunkten. nun habe ich bei meiner suche immer gefunden das im <li> eine neue liste beginnt, halt für die unterpunkte

<ul>
<li>Hauptpunkt
<ul><li>Unterpunkt</li></ul>
</li>
</ul>

meine frage nun was wäre so falsch nur eine liste zu machen und per class zu unterscheiden???

<ul>
<li class="main">hauptpunkt</li>
<li class="sub">unterpunkt</li>
</ul>

[designfanatiker]

Ineinander verschachtelte Listen solltest du auch entsprechend auszeichnen. Die Struktur eines Dokuments legt schließlich nicht die optische Gestaltung sondern die Auszeichnungssprache HTML fest.

[alexf812]

ja ok, aber wenn ich halt keine verschachtelte liste mache sondern nur die haupt- und unterpunkte mittels unterschiedlicher klassen unterscheide is das doch nicht verkehrt oder?

[ingo]

moinsen,
optisch geht das natürlich auch ohne verschachtelung super per css, da hast du recht.
die korrekte logisch semantische auszeichnung im html erreichst du aber nur mit der verschachtelung, denn mit ihr hast du nicht nur optisch sondern auch strukturell die unterpunkte festgelegt.

[alexf812]

gut, ihr habt mich überzeugt :-) ich werde es dann auch so machen

[HoRnominatoR]

es ist auch einfacher in der grafischen handhabung, da du einfach auf 'ul ul' zugreifen kannst. dann brauchst du nicht immer eine klasse zuweisen.

[alexf812]

öhm, wie meinst du das genau, also mit grafischer handhabung und auf 'ul ul' zugreifen?

[rewboss]

Angenommen, du hättest dieser Struktur:

<ul>
<li>Bücher</li>
 <ul>
 <li>Krieg und Frieden</li>
 <li>Sinn und Sinnlichkeit</li>
 </ul>
<li>Filme</li>
 <ul>
 <li>Matrix</li>
 <li>Vier Hochzeiten und ein Todesfall</li>
 </ul>
</ul>

Nun willst du, dass alle Hauptpunkte rot dargestellt werden sollen, und alle Unterpunkte blau. Das machst du genz einfach so:

ul { color: red; }
ul ul { color: blue; }

"ul ul" hier bedeutet, "Eine in einer ungeordneten Liste verschachtelte ungeordenete Liste".

Das ist fast das schönste bei CSS. Zum Beispiel, wenn ein Bild in einem <a>-Tag verschachtelt wird, kriegt das Bild eine Umrahmung, wenn dies nicht explizit abgeschaltet wird. Mit CSS kein Problem:

a img { border: 0px none; }

[alexf812]

danke für die erklärung noch mal, hätt ich auch selber drauf kommen können

[HoRnominatoR]

musst bloss auf die vererbungen achten - viel von dem was du fuer 'ul' definierst, gilt auch fuer 'ul ul'

[rewboss]

musst bloss auf die vererbungen achten - viel von dem was du fuer 'ul' definierst, gilt auch fuer 'ul ul'

Stimmt. Also Vorsicht mit Angaben wie ul { font-size: .7em; } -- das kann sehr schnell unlesbar werden...

[alexf812]

ich werde das gleich mal in angriff nehmen... da ich mir diese listen ja mit php dynamisch erzeuge is es halt nur ein etwas grösserer aufwand als ohne verschachtelung

[HoRnominatoR]

wieso denn? musst du doch nur rekursiv durchgehen.

[rewboss]

Mit Verschachtelung:

<ul>
<li>Hauptpunkt</li>
 <ul>
 <li>Unterpunkt</li>
 </ul>
</ul>

59 Anschläge.

Ohne Verschachtelung:

<ul>
<li class="main">Hauptpunkt</li>
<li class="sub">Unterpunkt</li>
</ul>

72 Anschläge.