Zentrierung vertikaler Navigation

[Forumsgast]

Hallo,

ich habe das Problem, dass sich eine Navigationsleiste nicht zentrieren lässt. Ich suche seit Stunden im Netz nach einer Lösung. Hier das Beispiel:
Heuss Contactlinsen
Und hier der betreffende Code
HTML

    <div id="navitop">
        <ul>
            <li><a href="dienstleistungen.html">Dienstleistungen</a></li>
            <li><a href="linsentypen.html">Linsentypen</a></li>
            <li><a href="preise.html">Preise</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="bildergalerie.html">Bildergalerie</a></li>
      </ul>
    </div>

CSS

#navitop {
	float:left;
	margin:20px auto auto auto;
	font-size:90%;
	font-weight:bold;
	width: 640px;
}
#navitop ul {
	display:inline;
	width: 640px;
	list-style:none;
	text-align:center;
}
#navitop li {
	float:left;
	text-decoration: none;
	height:19px;
}
#navitop a {
	text-decoration: none;
	padding:0 17px;
	margin:0 2px 0 0;
	height:19px;
}

Wahrscheinlich seh ich nur den Wald vor lauter Bäumen nicht. Vielleicht kann mir jemand die richtige Brille aufsetzen.

Danke schon jetzt.

[Forumsgast]

Du setzt die Liste (ul) zwar auf display:inline aber nicht die Elemente (li), im Gegenteil, du ziehst sie mit float aus dem Layout heraus. So können sie auch nicht wie Text behandelt und mit text-align zentriert werden.

Versuch also mal, statt float:left display:inline zu verwenden

[Forumsgast]

Ich würde eher sagen, dass er das ul dann auch floaten sollte.

[Forumsgast]

Wie würdest du es denn dann zentrieren wenn du die genaue Breite nicht kennst?

[Forumsgast]

Stimmt auch wieder.

[Forumsgast]

<ul>-Element ans div ausrichten und kindelemente unbrechbar ausrichten -> Zentriert

<div> margin:auto <ul>...</ul> margin:auto </div>

<ul> dont break <li>...</li> dont break </ul>

deine Seite da kriegste übrigens locker xHTML-strict

[Forumsgast]

Du kannst das ul aber nur ausrichten, wenn Du dessen Breite kennst.

[Forumsgast]

Also die Mischung aller Tipps hat geholfen. Herzlichen Dank.
Hier die Lösung im CSS (im HTML-Code hat sich nichts verändert)

#navitop {
	float:left;
	margin:20px auto auto auto;
	font-size:90%;
	font-weight:bold;
	width: 640px;
}
#navitop ul {
	float:left;
	display:inline;
	width: 640px;
	list-style:none;
	text-align:center;
}
#navitop li {
	display:inline;
	text-decoration: none;
	height:19px;
}
#navitop a {
	text-decoration: none;
	padding:0 15px;
	margin:0 1px 0 1px;
	height:19px;
}

[Forumsgast]

oder dessen kind-element-umbruch verhinderst...

[Forumsgast]

oder dessen kind-element-umbruch verhinderst...

Das hat mit Floating etc. aber nicht mehr viel zu tun. Das ist einzig Zetrierung von Inline-Elementen geschuldet.

[Forumsgast]

PS:

Ich sehe da nichts zentriertes. Ergänz mal Rahmen:

#navitop {
    float:left;
    margin:20px auto auto auto;
    font-size:90%;
    font-weight:bold;
    width: 640px;
    border:1px solid;
}
#navitop ul {
    float:left;
    display:inline;
    width: 640px;
    list-style:none;
    text-align:center;
    border:1px solid;
}
#navitop li {
    display:inline;
    text-decoration: none;
    height:19px;
    border:1px solid;
}
#navitop a {
    text-decoration: none;
    padding:0 15px;
    margin:0 1px 0 1px;
    height:19px;
} 

[Forumsgast]

PS: So gehts:

ul , li , div {
	margin:0;padding:0;
}
#navitop {
	margin:20px auto auto auto;
	font-size:90%;
	font-weight:bold;
	width: 640px;
	border:1px solid;
  text-align:center;
}
#navitop ul {
	display:inline;
	list-style:none;
	text-align:center;
	border:1px solid;
}
#navitop li {
	display:inline;
	text-decoration: none;
	height:19px;
	border:1px solid;
}
#navitop a {
	text-decoration: none;
	padding:0 15px;
	margin:0 1px 0 1px;
	height:19px;
}

[edit]
Für den IE6 unbedingt noch Weißraum zwischen den <li> entfernen!

[Forumsgast]

ul , li , div {
	margin:0;padding:0;
}
#navitop {
	margin:20px auto auto auto;
	font-size:90%;
	font-weight:bold;
	width: 640px;
	border:1px solid;
  text-align:center;
}
#navitop ul {
	display:inline; // selbes verhalten wie parent element
	list-style:none;
	text-align:inherit; // selbes verhalten wie parent element
	border:1px solid;
}
#navitop li {
	display:inherit; // selbes verhalten wie parent element
	text-decoration: none;
	height:19px;
	border:1px solid;
}
#navitop a {
	text-decoration: inherit; // selbes verhalten wie parent element
	padding:0 15px;
	margin:0 1px 0 1px;
	height:19px; // selbe höhe wie parent-element
}

inherit:
CSS text-align property

don't inherit - nicht IE konform für:
CSS height property
CSS border-style property ( und restliche border-subclasses )

do inherit if - nicht IE konform wenn parent element ( trifft hier nicht zu ):
CSS display property

sollte doch auch gehen oder ? und ja mir is grad langweilig *g*

[Forumsgast]

Irgendwie verstehe ich Deine Beiträge heute nicht. Was soll das jetzt sagen?

[Forumsgast]

Irgendwie verstehe ich Deine Beiträge heute nicht. Was soll das jetzt sagen?

Das ich grad was ausprobiert hab wie du anhand meines postings sicher festgestellt hast