[CSS] Listen richtig Formatieren?

[Blakkeight]

Kann mir da jemand weiterhelfen? Wo finde ich Information wie ich Listen richtig Formatiere?

Zz. will ich meine Liste in die Mitte Der Webseite stellen aber irgend wie klappt das nicht wie ich mir das Vorstelle.
So sieht meine Liste aus:

<div id="head_navi">
<ul id="navi">
<li><a href="">Hauptseite</a></li>
<li><a href="">Mitspieler</a></li>
<li><a href="">Karte</a></li>
<li><a href="">Login</a><div></div></li>
</ul>
</div>
und so die CSS befehle dazu:

div#head_navi{
width: 700px;
margin: 1em auto; padding: 0;
text-align: center;
}

ul#navi{
margin: 1em auto; padding: 0;
}
ul#navi li{
list-style: none;
display: inline;
}
ul#navi a {
border: 2px solid #000000;
background-image: url(image/head_navi_back.png);
float: left; width: 100px;
margin: 0.5em; padding: 0.5em;
text-decoration: none;
}
ul#navi a:hover {
border: 2px solid #000000;
background-image: url(image/head_navi_back2.png);
margin: 0.5em; padding: 0.5em;
text-decoration: none;
}
ul#navi div {
clear: left;
}

Irgend wie steh ich aufn schlau. xD
Bisher hab ich alles immer noch irgendwie hinbekommen aber ich hab kein Bock mehr so lange rum zu spielen bis es geht. -.-
Hat jemand gute Informationen fuer mich?

[FF]

was genau willst du denn?

was mir gleich auffällt: das div um die liste brauchst du nicht, wenn du der ul ne id zuweist, kannst du alles auch mit der machen.

dann: du musst bei a:hoover nur schreiben, was sich von a unterscheidet, alle anderen informationen werden übernommen, sprich, du musst nur die zeile mit dem bg schreiben.

[mitaki]

Zz. will ich meine Liste in die Mitte Der Webseite stellen aber irgend wie klappt das nicht wie ich mir das Vorstelle.
Willst du, dass die Navigationspunkte untereinander stehen und zentriert sind oder dass die Punkte nebeneinander stehen und so als gesamtes zentriert sind?

Ersteres: Den Listenpunkten einfach text-align: center; geben (kein display).

Zweiteres: Diesmal Inline und für das Eltern-ul text-align: center; bestimmen.

Dein Problem sind schlicht gesagt zu viele Eigenschaften auf einmal. Die li-Eigenschaften werden z.B. auf grund der a-Eigenschaften nicht mehr beachtet (float eines Elements, dessen Elternelement sonst keine Kinder mehr hat vernichtet das Elternelement praktisch).

[Blakkeight]

Willst du, dass die Navigationspunkte untereinander stehen und zentriert sind oder dass die Punkte nebeneinander stehen und so als gesamtes zentriert sind?
Zweiteres. ;)


Zweiteres: Diesmal Inline und für das Eltern-ul text-align: center; bestimmen.
Versteh ich nicht, inline habe ich doch schon und Text-align: center; habe ich natraeglich eingefuegt aber es passiert nichts.


Dein Problem sind schlicht gesagt zu viele Eigenschaften auf einmal. Die li-Eigenschaften werden z.B. auf grund der a-Eigenschaften nicht mehr beachtet (float eines Elements, dessen Elternelement sonst keine Kinder mehr hat vernichtet das Elternelement praktisch).
Und was kann ich daran aendern?

[mitaki]

Versteh ich nicht, inline habe ich doch schon und Text-align: center; habe ich natraeglich eingefuegt aber es passiert nichts.
[...]
Und was kann ich daran aendern?

Schauen wir es uns mal an:

div#head_navi{
width: 700px;
margin: 1em auto; padding: 0;
}

ul#navi{
margin: 1em auto; padding: 0;
text-align: center; /*zentrierung verschoben*/
}
ul#navi li{
list-style: none;
display: inline;
}
ul#navi a {
border: 2px solid #000;
background-image: url(image/head_navi_back.png);
margin: 0.5em; padding: 0.5em;
text-decoration: none;
}
ul#navi a:hover {
background-image: url(image/head_navi_back2.png);
text-decoration: none;
}

Das Aufgeräumte CSS zusammen mit deinem HTML ergibt das Ergebnis. Nur hast du das Problem, dass das float fehlt (es verhindert die Zentrierung), weshalb du den Listenpunkten keine Breite mehr zuweisen kannst.

[Blakkeight]

Danke. ;)

Aber ich muss den Listenpunkten eine Brite und Hoehe zuweisen koennen, sonst kommt ich mit dem Design nicht hin.

[mitaki]

Aber ich muss den Listenpunkten eine Brite und Hoehe zuweisen koennen, sonst kommt ich mit dem Design nicht hin.
Das halte ich für ausgesprochenen Unsinn. Aber wenn ichd as stehen lasse bin ich ja wieder die böse Tante ..

Füge zu ul#navi a folgendes hinzu:

display: -moz-inline-box;
display: inline-block;
width: 100px;
Die erste Zeile ist für Firefox vor v3.0. Eigentlich ist die -moz-inline-block eigenschaft der CSS-2.1-Eigenschaft ähnlicher, aber beide sind Buggy. In diesem Fall erzeugt -box das gewünschte Ergebnis.