Menu zentrieren

[mutanton]

Hey Leute,

Ich bin gerade mit einem Problem stecken geblieben und brauche eure Hilfe.
Ich möchte den text des Menus (div class=nav) auf meiner Seite zentrieren aber kriege es einfach nicht hin. Vielleicht kann einer mal auf mein style sheet schauen und mir sagen was ich falsch mache...

/*
body{
    text-align: center;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
    background: #d9d9d9;
    color: #000000;
    height: 100%;
    overflow:hidden;
}

html {
    height: 100%;
}

a:link, a:visited{
    text-decoration: none; 
    color: #000000;
}

a:hover{
    color: #5f5f5f;
}

h1 {
    font-size: 54px;
}

h3 {
    font-size: 24px;
}
    
#wrapper{
    margin-top: 0;
    margin-right:auto;
    margin-bottom:0;
    margin-left:auto;
    width: 750px;
    height: 100%;
    text-align: left;
    background: #095;
        
}

#header{
    float:right;
    background:#039;
    width: 200px;
    height: 100px;
    overflow:hidden;
}


.nav{
    margin: auto;
    left:0; 
    right:0;
    top:0;
    position:absolute;
    width: 750px;
    height: 30px;
    background: #ccc;
    text-align:center;
        
}


.nav ul{
    display:inline-block;
    list-style:none;
    
}

.nav li{
    float:left;
    position:relative;
}

.nav a{
    display:block;
    text-decoration:none;
    color:#fff;
    padding:0 15px 10px 0;
    font-size:13px; 
    font-weight:bold;
}

.nav ul ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    float:left;
    z-index:99999;
    background: #212121;
}

.nav ul ul ul{
    top: 30%;
    left:100%;
    background: #343434;
}

.nav ul ul a{
    height:auto;
    line-height:1em;
    padding:10px;
    width:130px;
}

.nav li:hover > a,.nav ul ul:hover > a{
    color:#ccc;
}

.nav ul li:hover > ul{
    display:block;
}


#blog{
    float: right;
    overflow:scroll;
    width: 550px;
    height: 100%
}

.sidebar{
    float: left;
    width: 200px;
    margin: 0 0 0 10px;
    font-size: 14px;
    list-style: none;
}

#footer{
    margin: auto;
    left:0; 
    right:0;
    bottom:0;
    position:absolute;
    width: 750px;
    height: 30px;
    background: #ccc;
    
}

hier noch der Link
Vielen Dank!!!

 

[threadi]

Dein Code fängt mit einem Kommentar an:

/*

Und wenn Du etwas horizontal zentrieren willst, dann verzichte auf absolute Positionierung. Dafür reicht "margin: 0 auto;" und eine feste Breite.

Allerdings fehlt dein HTML-Code, so dass man das nur raten kann. Ein Link zur Seite würde dir am Besten helfen.

 

[mutanton]

den kommentar habe ich nur nicht mir kopiert...

Hier ist der Link:
Atelier |

 

[mutanton]

hab eine link zugefügt...

 

[threadi]

Du willst also ein horizontales Menü zentrieren ... vergleiche mal deine Style-Angaben mit denen von diesen Anleitungen hier:
Cascading Style Sheets { Tutorials : Zentrieren eines Block-Level-Elements }
Horizontale Zentrierung einer gefloateten Listen-Navigation

 

[mutanton]

das hilft mir leider nicht weiter. hab jetzt nochmal 1000 sachen versucht aber es haut irgendwie nicht hin. bin wphl zu blöd oder zu müde. oder beides.

hier ist nochmal der code wie er jetzt aussieht:

body{
    text-align: center;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
    background: #F7F1D7;
    color: #000000;
    height: 100%;
    overflow:hidden;
    padding: 0; 
    margin: 0; 
    text-align: center;
    
}

html {
    height: 100%;
    
}

a:link, a:visited{
    text-decoration: none; 
    color: #000000;
}

a:hover{
    color: #5f5f5f;
}

h1 {
    font-size: 54px;
}

h3 {
    font-size: 24px;
}
    
#wrapper{
    margin-top: 0;
    margin-right:auto;
    margin-bottom:0;
    margin-left:auto;
    width: 750px;
    height: 100%;
    text-align: left;
    background: #fff;
        
}

#header{
    float:right;
    background:#039;
    width: 200px;
    height: 100px;
    overflow:hidden;
}



.nav{
    display:inline;
    left:0; 
    right:0;
    top:0;
    position:absolute;
    text-align:center;
}
 
.nav ul{
    display:inline-block;
    list-style:none;
    text-align:left;
}
 
.nav li{
    float:left;
    position:relative;
}

.nav a{
    display:block;
    text-decoration:none;
    color:#000;
    padding:0 15px 10px 0;
    font-size:13px;
    font-weight:bold;
}
 
.nav ul ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    float:left;
    z-index:99999;
    background: #fff;
}
 
.nav ul ul ul{
    top: 30%;
    left:100%;
    background: #343434;
}
 
.nav ul ul a{
    height:auto;
    line-height:1em;
    padding:10px;
    width:130px;
}
 
.nav li:hover > a,.nav ul ul:hover > a{
    color:#ccc;
}
 
.nav ul li:hover > ul{
    display:block;
}


#blog{
    float: right;
    overflow:scroll;
    width: 550px;
    height: 100%
    
    
}

.sidebar{
    float: left;
    width: 200px;
    margin: 0 0 0 10px;
    font-size: 14px;
    list-style: none;
}

#footer{
    margin: auto;
    left:0; 
    right:0;
    bottom:0;
    position:absolute;
    width: 750px;
    height: 30px;
    background: #ccc;
    
}

Und das Ziel ist es das horizontale Menu horizontal mittig auf der seite zu zentrieren....

Ich wäre euch wirklich dankbar wenn Ihr mir helfen könntet

 

[prm]

Werde dir bewusst, was du mit diesen bisherigen Angaben bezweckst und was sie bewirken:

.nav{
	display:inline;
	left:0; 
	right:0;
	top:0;
	position:absolute;
    text-align:center;
}

Danach ändere sie im Sinne von threadi's Vorschlägen.

 

[mutanton]

habs alles genauso geändert wie vorgeschlagen, aber, dass einzige was ich erreicht habe ist, dass das menu links von der bildschirmitte angefangen hat. aber ich schaffe es nicht es zu zentrieren und weiß wirklich nicht was ich flasch mache!