Menüpunkte nebeneinander ausrichten

[vitus37]

Heyho!
Kennt jdn von euch ein CSS Attribut, welches es ermöglicht, Menüpunkte in meinem <ul> gleichmäßig auf der gesamten Breite zu verteilen?
Oder muss ich dazu ein DIV benutzen, weil ja <li> automatisch einen Zeilenumbruch macht?

Mit einer Tabelle der Art:

<table style="text-align: center; width: 100%;">
<tr>
<td>Punkt 1</td>
<td>Punkt 2</td>
<td>Punkt 3</td>
</tr>
</table>

funktioniert dass, entspricht aber nicht dem, was Profis gerne im Quelltext lesen. ;)

Eine andere Möglichkeit wäre, für jeden Punkt ein eigenes DIV zu erstellen und per width (%) angabe gleichmäßig zu verteilen, aber das ist auch nicht das Wahre...

Bitte um Hilfe.
LG Vitus

 

[_Thor_]

Dynamisch passen sich nur Tabellenzellen an, alternativ kannst du den Listenelementen eine Breite in % geben, wenn du weißt, wieviele es sind.

 

[vitus37]

Ich bin mir nicht sicher, ob ich dich richtig verstanden habe:
Habe nun den <li>'s die Klasse "li" zugeordnet und im stylesheet das Atribut width mit 20% zugewiesen.
Das funktioniert leider nicht...

 

[_Thor_]

Das funktioniert leider nicht...

Diese Aussage ist sehr aufschlussreich...
Was passiert denn?

 

[vitus37]

oh, ja tut mir leid.
Die Punkte werden immernoch wie normale <li>'s behandelt.
Also unterinander, wie eine Aufzählungsliste.

Ich versuche das ganze nun einmal mit DIV's zu probieren, und poste die Seite später im Websitecheck, vielleicht ist das Problem dan einfacher zu verstehen.
LG

 

[_Thor_]

Ich versuche das ganze nun einmal mit DIV's zu probieren

Warum? Die Liste war schon richtig wenn es ein Menü sein soll.

Hast du den Listenelementen auch float: left gegeben? Hat die Liste vielleicht eine feste Breite, die es den Listenelementen nicht erlaubt, nebeneinander zu stehen?

 

[vitus37]

OK

Das ist der HTML Code:

<ul id="navi">
  <li class="navlist">Home</li>
  <li class="navlist">Webdesign</li>
  <li class="navlist">DJ'ing</li>
</ul>

Und bis jetzt sieht mein CSS Code so aus:

/*HEADER->NAVI*/
ul#navi{
  margin-top: 0px;
  width: 765px;
  height: 50px;
  background-image: url("navi.png");
  background-repeat: no-repeat;
  list-style: none;
  text-align: center;
  color: #FFFFFF;
}
.navlist{
  float: left;
  width: 120px;
  height: 50px;
  valign: center;
}
.navlist:hover{
  background-image: url("ahover.png");
  color: #000000;
}

Danke für den Tipp mit float! Jetzt funktioniert es! Danke :)

Aber eine Sache noch:
Wie man sieht, habe ich bei .navlist das Attribut valign.
Scheint aber keine Wirkung zu zeigen, oder ist nur tabellenspezifisch?
Gibt es da noch eine Möglichkeit, den Text vertikal zentriert im <li> erscheinen zu lassen?

 

[_Thor_]

valign gibt es in CSS nicht, du kannst es mit line-height versuchen.