horizontale Navigation richtig formatieren

[Anton]

#navigation {
width: 880px;

Nicht die beste Idee. Du weißt nicht, wie breit der Viewport des Nutzers ist.

Naja das ist zwar richtig, aber 1024 Pixel in der Breite haben wohl die meisten mindestens eingestellt. Der Abstand auf der linken bzw. rechten Seite steigt dann einfach mit steigender Auflösung. Das ist doch nicht weiter schlimm. Wie würdest du das denn machen?

Schonmal über 'float: right' für 'buttonThree' und 'buttonFour' nachgedacht?

Genaus das habe ich gerade so probiert:

  
#navigation .buttonThree {  
 float: right;  
}  
  
#navigation .buttonFour {  
 float: right;  
}  

Klappt aber nicht. ne Ahnung warum?

Und warum sind das Klassen? Sieht eher nach IDs aus.

Ich habe auch zunächst versucht IDs zu verwenden. So:

  
<ul id="navigation">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">Über uns</a></li>  
  <li><a id="buttonKontakt" href="#">Kontakt</a></li>  
  <li><a id="buttonImpressum" href="#">Impressum</a></li>  
</ul>  

Das Problem ist dann folgendes. Laut der Spezifität-Tabelle (siehe: <http://de.selfhtml.org/css/formate/kaskade.htm@title=Tabelle Spezifität>) hat

  
#navigation a {  
 ...  
}  

eine höhere Priorität als

  
#buttonKontakt {  
 ...  
}  
  
#buttonImpressum {  
 ...  
}  

Dadurch hat die margin-Zuweisung in "buttonKontakt" und "buttonImpressum" keine Wirkung. Ich wußte mir nicht anders zu helfen und habe deshalb Klassen verwendet. Zunächst hab ich versucht die höhere Spezifität zu erreichen indem ich vorne noch die id Navigation angegeben habe. Das klappt aber nicht. Scheint syntaktisch nicht korrekt zu sein.

  
#navigation #buttonImpressum {  
 ...  
}  

Für Alternativvorschläge deinerseits wäre ich dankbar.