[CSS] Listen richtig Formatieren?

[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:

Code:

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:

Code:

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.