Navi zentrieren

[Ferrow]

Ich krieg es irgendwie nicht hin die Navigation zu zentrieren.
Sie ist linksbündig.
Islam - Home

.navigation {
    background: #DED9D0 url(img/nav.gif) repeat-x; height: 41px;
    border-top: 1px solid #996;
}
.navigation a {
    background: #FFF url(img/nav.gif) repeat-x;
    border-right: 1px solid #C9C6B3;
    border-right: 1px solid #C9C6B3;
    color: #553;
    float: left;
    font: bold 1em Tahoma,sans-serif;
    padding: 0 14px;
    line-height: 41px;
    text-align: center;
    text-decoration: none;
}
.navigation a:hover,.navigation a#active {background-position: center bottom; color: #331;}

 

[ingoS]

Gib einfach .navigation eine feste Breite und automatischen Abstand nach links und rechts. Also:

.navigation {
...
width: feste-breite;
margin-left: auto;
margin-right: auto;
}

EDIT: Die Breite sollte natürlich der Gesamtbreite der Links entsprechen.

 

[Ferrow]

Danke, hat geklappt.
Wie krieg ich jetzt die "leeren Stellen" rechts und links verändert?

 

[prm]

Da ist etwas Rechenarbeit erforderlich.
Am einfachsten geht das, wenn du die gesamte Breite auf die 8 Links aufteilst.

Gib dem #container zunächst 752px Breite
Den a-Links dann 92px.
8 Links x 92px + 8 Links x je 2px Border = 752px

.navigation a {
background: #FFF url(img/nav.gif) repeat-x;
border-right: 1px solid #C9C6B3;
border-left: 1px solid #C9C6B3;
color: #553;
float: left;
font: bold 1em Tahoma,sans-serif;
width: 92px;
height: 41px;
padding-top: 5px;
text-align: center;
text-decoration: none;
}

 

[Ferrow]

Vielen Dank, hat alles geklappt.


PS: Der Thread kann geschlossen werden. :)