Hall Webfreunde

Ich möchte diese, vom CMS generierte Navigation formatieren. Das erste und letzte DIV ist vom Template, könnte also angepasst werden (id=navigation).

Meine Fragen wären:

1. Kann ich die LI Elemente so eindeutig ansprechen? Oder muss ich da was ins Navigationstemplate hacken, sodass jedes LI element ein class=“meineKlasse“ bekommt? Wäre etwas unschön, nicht?

2. Wie kann ich eine UL-Liste nebeneinander formatieren?

1. <div id="navigation">
2.  
3. <!-- indexer::stop -->
4. <div class="mod_navigation block">
5.  
6. <a href="index.php/willkommen.html#skipNavigation6" class="invisible">Navigation überspringen</a>
7.  
8. <ul class="level_1">
9. <li class="first"><a href="index.php/willkommen.html" title="Willkommen" class="first">Willkommen</a></li>
10. <li><a href="index.php/page1.html" title="Page1">Page1</a></li>
11. <li class="last"><a href="index.php/page2.html" title="Page2" class="last">Page2</a></li>
12. </ul>
13.  
14. <a name="skipNavigation6" id="skipNavigation6" class="invisible">&nbsp;</a>
15.  
16. </div>
17. <!-- indexer::continue -->
18.  
19. </div>

Quelltext in Zwischenablage kopieren

Danke schonmal


p.s. li.mod_navigation {} funktioniert nicht

alle lis:

1. .mod_navigation ul.level_1 li {}

Quelltext in Zwischenablage kopieren
das erste li

1. .mod_navigation ul.level_1 li.first {}

Quelltext in Zwischenablage kopieren
das letzte li

1. .mod_navigation ul.level_1 li.last {}

Quelltext in Zwischenablage kopieren

alles nebeneinander

1. .mod_navigation ul.level_1 li {width:30%;float:left;}

Quelltext in Zwischenablage kopieren

und wichtig danach unter dem ul ein clear:left drunter setzen

Werde ich direkt implementieren. Vielen Dank!

Kann ich die Navigation auch formatieren, wenn ich nicht im Vorfeld weiss, wie viele Punkte es geben wird? (die 30% hast du einfach eingesetzt da es 3 Links sind, nicht?) Gibt es da eine sexy Lösung?

Und hat jemand etwas zu lesen, zu dieser „Ansprechhierarchie“? Das mache ich in CSS immer und immer wieder falsch

ja, lass sie einfach weg und arbeite statt dessen mit paddings

Je nachdem was du mit den LIs vorhast kannst du sie auch mit display: inline oder display:inline-block in eine Reihe bekommen. Floats versuch ich zu vermeiden wo es geht

Zur „Ansprechhierarchie“: http://de.selfhtml.org/css/formate/kaskade.htm

Wenn du IE6–7 ignorieren kannst, dann klappt das ansprechen des ersten und des letzten auch über :first-child und :last-child. Dem IE7 könnte man das aber über ein Javascript sogar noch beibringen.