✔ Navigations-Liste horizontal Zentrieren (trotz float)

[Eagle-PsyX-]

Hi,

im Gegensatz zur schnellen Lösung was mein vorheriges "position:absolute"-Problem betraf, habe ich hier keine gute Lösung gefunden.

Und zwar krieg ich die Navigations-Leiste nicht zentriert, auch wenn ich's mit übergeordneten Container-Boxen probierte habe. Andere Methoden funktionierten zwar z.B. unter FF/Opera aber im IE6 war die Navigation ganz weg.

Solange ich online bin: http://eaglepsyx.dyndns.org/Vorlage/

Hat jemand vielleicht eine Lösung parat?

<div id="body_head">
	<div id="banner">
		<a href="" target="_self"><img src="Template/<?=$Config["Style"]?>/Images/banner.png" alt="Banner" border="0"/></a>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="">Link #1</a></li>
			<li><a href="">Link #2</a></li>
			<li><a href="" id="active"><?=$Title?></a></li>
			<li><a href="">Link #4</a></li>
		</ul>
	</div>
</div>
<div style="clear:both;"></div>

#body_head #navigation {
  width: 100%;
  height: 39px;
  line-height: 39px;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  top: 101px;
  color: #FFF;
}

#navigation ul {
  margin: 0; 
  padding-left: 290px;
}

#navigation ul li {
  float: left;
  list-style: none;
  margin: 0 2px 0 2px;
  padding: 0;
}

#navigation ul li a{
  display: block;
  width: 100px;
  height: 39px;
  line-height: 39px;
  font-family: Verdana,"Times New Roman",Arial,Geneva,Helvetica,sans-serif;
  font-size: 12pt;
  color: #e0e0e0;
  text-decoration: none;
  background-image: url("Images/nav_button.png");
}
#navigation ul li a:hover, #navigation ul li a:focus {
  color: #fff;
  background-image: url("Images/nav_button_hover.png");
}
#navigation ul li a#active {
  color: #303030;
  background-image: url("Images/nav_button_active.png");
}
#navigation ul li a#active:hover, #navigation ul li a#active:focus {
  color: #000;
  background-image: url("Images/nav_button_active_hover.png");
}
* html #navigation ul a {
  width: 100px;
  w/idth: auto;
}

PS: Die Liste sieht auf dem Bild zentriert aus, weil ich mit padding-left es so hingestuft habe, dass es unter 1024x768 bei 4 Buttons so aussieht. Bei höheren Auflösung oder kleineren sieht das schon ganz anders aus.

Mit freundlichen Grüßen
Eagle™ -PsyX-

 

[Maik]

Hi,

da hier die Anzahl, Breite und Außenabstände der Links, und somit die Gesamtbreite bekannt sind, lässt sich das ul-Listenelement mittels margin:auto in seinem Anzeigebereich horizontal zentrieren:

#navigation ul {
  margin: auto;
  width: 416px;
}

Für den Fall, dass die Gesamtbreite des Menüs nicht vorliegt, hat Stu Nicholls etwas entwickelt: Centering a 'float left' menu.

mfg Maik

 

[Eagle-PsyX-]

Hi Maik,

Danke für die Antwort.
Also die Gesamtbreite liegt eigentlich nicht vor, abhängig davon wieviele Links da sind (okay könnte man eigentlich auch mit PHP kalkulieren).
Diese Methode von Stu Nicholls habe ich probiert gehabt, das Resultat war es ging in FF/Opera aber im IE6 war die ganze Navigation 'weg'.

Ich probiers nochmal mit dem Code direkt von seiner Seite.

Edit: Okay jetzt hat's überall geklappt! Vielen Dank!

Mfg
Eagle