nicht angemeldet
Hallo Joachim,
#navigation li {
float:left;
Diese CSS Anweisung sorgt dafür, dass alle Listenelemente unterhalb eines Elementes mit der ID "navigation" gefloatet werden. Float bedeutet hier soviel wie aus den Fliesstext rausnehmen, so dass die „normalen“ Definitionen für den Umbruch von Listenelementen nicht mehr gelten. Konsequenterweise werden die Listenelemente nicht mehr untereinander angezeigt, sondern nebeneinander, nach dem Modell von Float.
Doch die zweite, verschachtelte Liste soll vertikal angezeigt werden. Damit habe ich ehrlich gesagt riesige Probleme. Die zweite Liste übernimmt die horizontale Eigenschaft.
Der Knackpunkt hier ist, dass das für *alle* Listenelemente gilt, also nicht nur für die Struktur ...
#navigation → ul → li
... sondern auch für ...
#navigation → ul → li → ul → li
... und alle weiteren darunter. Da Du das nicht möchtest, musst Du für Listenelemente innerhalb von Listenelementen das Float wieder entfernen. Dazu musst Du diese genau ansprechen. Das wäre dann diese CSS-Anweisung:
~~~css
#navigation li li {
float:none;
/* ... */
}
"li li" sagt nun mal „Listenelementen unterhalb von Listenelementen“. Streng genommen könnte man auch die erste Anweisung, die des Zuweisens des Floatens, nur für die Listenelemente, die sich direkt unter der unsortierten Liste unterhalb der #navigation befinden, schreiben. Das wäre in CSS der Kindesselektor:
`#navigation ul > li { /* ... */ }`{:.language-css}
Allerdings verstehen gewisse minderwertige Browser diesen nicht; deswegen bleibt die erste Möglichkeit erst Mal noch die bevorzugte.
> Die erste Liste habe ich von einem Beispiel aus dem Internet. Leider weiß ich die Adresse nicht mehr. Diese Liste habe ich dann auf meine Bedürfnisse angepasst. Aber ich habe nicht verstanden, was dafür sorgt, dass die Liste horizontal und nicht vertikal dargestellt wird.
Float ist auf Anhieb tatsächlich etwas schwer zu verstehen und hat manche unerwünschten Nebeneffekte. Um zu verstehen, was Dein Quellcode macht, solltest Du zuerst das Konzept von Float verstehen; ich kann Dir dazu nur den Artikel [Float: Die Theorie](http://css-technik.de/css-examples/219_9/) ans Herz legen. Keine Sorge, so theoretisch ist er nicht.
Womit Du Dich auch beschäftigen solltest, wären die Grundlagen der horizontal dargestellten Linklisten, dazu fliegen auch ein paar Artikel im Netz rum:
• [Taming Lists (A List Apart)](http://alistapart.com/articles/taminglists/)
• [Das Listutorial](http://css.maxdesign.com.au/listutorial/index.htm)
• [Listamatic](http://css.maxdesign.com.au/listamatic/) (und 2Listamatic)
Du wirst sehen, dass dort nicht notwendigerweise float sondern display:inline benutzt wird. Auch damit solltest Du Dich etwas vertraut machen.
Tim
MudGuard