Menü nicht ganz mittig

[Loana]

Hallo liebes Forum!
Ich habe ein horizentales Menü erstellt...es ist leider nicht ganz in der Mitte...wie kann ich das machen?
Ihr habt mir ja schon öfters mal gute Tipps gegeben drum bedanke ich mich schonmal im voraus

hier die CSS Datei

* {
margin : 0;
padding : 0;
}
#menu {
width : 95%;
padding : 0 20px;
background : #f3ede2;
font-family : Verdana;
font-size : 1em;
line-height : 1.5;
float : left;
margin : 0 auto;
}
#menu ul {
float : left;
width : 120px;
list-style-type : none;
}
#menu h3 {
font-size : 1em;
text-align : center;
color : #3e2d17;
border : 1px solid #d7bb96;
background : #f3ede2;
}
#menu a {
text-decoration : none;
display : block;
border : 1px solid #ccc;
text-align : center;
background : #f3ede2;
color : #3e2d17;
}
#menu a:hover {
color : #ffffff;
background : #3e2d17;
}
#menu li {
position : relative;
}
#menu ul ul {
position : absolute;
z-index : 2;
display : none;
}
#menu ul li:hover ul {
display : block;
}
#menu ul li:hover ul {
display : block;
}
#menu a.direkt:link {
font-size : 1em;
font-weight : bold;
text-align : center;
color : #000;
border : 1px solid #003366;
background : #ff8000;
}
#menu a.direkt:hover {
color : #ff9224;
background : #003366;
border : 1px solid #ccc;
}
#menu ul li:hover ul ul {
display : none;
}
div#menu ul ul li:hover ul {
display : block;
position : absolute;
top : 0;
left : 100%;
}

/*--versteckt die dritte Ebene--*/

#menu ul li:hover ul ul {
display: none;
}

/*-- lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten und nach rechts ausklappen--*/

div#menu ul ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}

http://loana.bplaced.net/testseite/rotti_2/

 

[momo95]

Hallo,
das ist eigentlich ganz einfach:

du gibts der Navigation einen feste Breite: z.B. 960px; weil dein #wrapper 960px breit ist.
Dann errechnest du die Inhalt-Breite, das sind 7 x 120px (=840px) , weil du 7 Menüpunkte mit jeweils 120px Breite hast.
Die 840px subtrahierst du jetzt von den 960px und du bekommst 120px heraus.
Die 120px halbierst du jetzt und bibst sie als padding-left: 60px; an. Jetzt noch die Breite auf 900px umstellen, weil du das padding von der Breite abziehen musst.

Hier der CSS-Code:

#menu {
width: 900px;
background : #f3ede2;
font-family : Verdana;
font-size : 1em;
line-height : 1.5;
float : left;
margin-left: -5px;
padding-left: 60px;
}

 

[Loana]

Hallo Momo soweit so gut,jetzt ist aber der Hintergrund der menüleiste rechts etwas breiter und steht über könntest du nochmal auf die seite gucken?...ich weiss nicht wie ich es wegbekommen soll
danke...
Wäre nett wenn einer nochmal nen Tipp hätte für einen *Dau*

 

[momo95]

nimm das padding raus, dann gehts.

 

[Loana]

Danke Momo es hat super geklappt als ich das 2. Padding rausgenommen habe , jetzt ist es perfekt....