Horizontales Menu mittig zentrieren

[petz_e]

Hallo,

Ich habe ein Menu folgendermassen in HTML definiert:

<div id="navigation">
	<ul>
		<li><a href="">Item 1</a></li>
		<li><a href="">Item 2</a></li>
		<li><a href="">Item 3</a></li>
		<li><a href="">Item 4</a></li>
	</ul>
</div>

Und so mit CSS formatiert, damit es horizontal angezeigt wird:

#navigation {
	width: 800px;
	background: #999 url(images/bg_menu.gif) no-repeat;
}
#navigation ul {
	list-style-type: none;
	width: 400px;
	float: left;	/* contain floated elements */
}
#navigation li {
	float: left;
	margin: 0; padding: 0;
}
#navigation a {
	float: left;
	width: 100px;
	text-align: center;
	line-height: 2;
}

Wie ihr seht habe ich das ganze Menu in einen Container gesteckt, der sich über die gesamte Breite der Seite zieht und ein Hintergrundbild hat. Das Menu sollte allerdings nur 400 Pixel breit sein un mittig zentrier sein. Das habe ich allerdings noch nicht geschafft, da text-align durch das floaten wieder aufgehoben wrd.

Patrick

 

[anna55]

Schreib bei #naviation ul statt float:left ein float:inline und ergänze hier noch ein

 margin: 0 auto;

 

[petz_e]

Super! Danke.

Patrick

 

[anna55]

Schreib bei #naviation ul statt float:left ein float:inline und ergänze hier noch ein

 margin: 0 auto;

Ich habe Dir Unsinn erzählt: Es gibt kein float:inline. Du könntest 'none' schreiben, was aber unnötig ist. Nimm das float einfach raus. Die Angaben zu margin genügen völlig.

Edit: Setzt allerdings im Hinblick auf die IE voraus, dass Du einen richtigen Doctype benutzt.