Navigation zentrieren

[Christoph bergmann]

Hallo,

ich habe ein Wordpress Theme welches über CSS und PHP ein Menü generiert. Für die einzelnen Einträge bestehen folgende CSS-Formatierungen:

#nav {
 margin: 0;
 padding: 0;
 font-size: 90%;
 background: #c1dfef url(images/bg_bar.gif) repeat-x 0 0;
 border-bottom: 4px solid #383d44;
 text-align: center;
 }

#nav li {
 float: left;
 background: url(images/bg_spacer.gif) no-repeat 100% 100%;
 }

#nav ul {
 min-width: 780px;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 10px;
 list-style: none;
 }

#nav li a {
 float: left;
 padding: 5px 15px 3px;
 color: #383d44;
 font-weight: bold;
 text-transform: uppercase;
 }
#nav li a:hover, #nav li.current_page_item a {
 font-weight: bold;
 color: #326ea1;
 }
#nav li.current_page_item a {
 background: url(images/bg_nav_active.gif) no-repeat 50% 100%;
 }
Der Aufruf erfolgt so:

<div id="nav">
 <ul>
  <li></li>
 </ul>
 </div>

Funktioniert in soweit ganz gut, aber text-align:center; unter nav{} bring garnichts.

Ideen? -> Danke

[Gunther]

Hallo,

habe ich das jetzt richtig verstanden: Du möchtest das nav-DIV zentrieren?
Wenn ja, dann verwende

#nav {

margin: 0 auto;

padding: 0;
font-size: 90%;
background: #c1dfef url(images/bg_bar.gif) repeat-x 0 0;
border-bottom: 4px solid #383d44;
text-align: center;
}

Funktioniert in soweit ganz gut, aber text-align:center; unter nav{} bring garnichts.

Warum das so ist, sollte dir eigentlich klar werden, wenn du den betreffenden Abschnitt in der Doku nochmals in aller Ruhe durchliest.

Gruß Gunther

[wahsaga]

hi,

Hallo,

habe ich das jetzt richtig verstanden: Du möchtest das nav-DIV zentrieren?
Wenn ja, dann verwende

#nav {
margin: 0 auto;
padding: 0;
font-size: 90%;
background: #c1dfef url(images/bg_bar.gif) repeat-x 0 0;
border-bottom: 4px solid #383d44;
text-align: center;
}

Und ohne Breitenangabe, also mit implizitem width:auto, was für ein block-Element die gesamte zur Verfügung stehende Breite bedeutet, erscheint uns margin:auto in wie fern sinnvoll ...?

Zentrierung und float vertragen sich nicht gut.
Wenn du der Liste eine feste Breite geben magst, stellt es natürlich kein Problem dar, diese zu zentrieren.
Wenn nicht, wäre display:inline für die LI eine Möglichkeit, aber auch nur, wenn sich ihre Breite nach ihrem Inhalt richten soll - dann lassen sie sich per text-align zentrieren.
Wenn die LI eine definierte Breite zugewiesen bekommen sollten, dann wäre display:inline-block angebracht - aber das checkt der Firefox leider erst ab Version 3 richtig.

gruß,
wahsaga

[Gunther]

Hi,

Hallo,

habe ich das jetzt richtig verstanden: Du möchtest das nav-DIV zentrieren?
Wenn ja, dann verwende

#nav {
margin: 0 auto;
padding: 0;
font-size: 90%;
background: #c1dfef url(images/bg_bar.gif) repeat-x 0 0;
border-bottom: 4px solid #383d44;
text-align: center;
}

Und ohne Breitenangabe, also mit implizitem width:auto, was für ein block-Element die gesamte zur Verfügung stehende Breite bedeutet, erscheint uns margin:auto in wie fern sinnvoll ...?

Gar nicht!
Vielen Dank für den Hinweis. Ich arbeite bei "Containern" eigentlich immer mit einer width-Angabe, sodass ich das glatt übersehen habe. Aber gut, dass es hier im Forum dann immer noch User gibt, die besser aufpassen! ;)

Gruß Gunther