Navi zentriert nicht

[Foos]

Hallo,

warum um alles in der Welt zentriert er mir untenstehend meine Navigation nicht?! 0px auto ist doch richtig?! Sobald ich einen Wert wie 50px nehme funktioniert ist..Bitte helft mir....

/*START NAVI*/

#navi ul {

list-style : none;
width : 400px;
height : 44px;
margin-left: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;


}
#navi ul li {
float : left;
margin-left : 0px auto;

}
#navi ul li a {
float : left;
margin : 0;
padding : 8px 5px 0 15px;
color : #999;
font-weight : 600;
font-size : 10px;
height : 32px;
text-shadow:#fff 0 1px 0;
text-decoration: none;

}
#navi ul li a:hover, #nav ul li a:active {
color : #a86f16;
text-decoration : none;
text-shadow: #fff 0 1px 0;

}
#navi  {

list-style : none;
height : 44px;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
text-align: center;


}

HTML

<div id="navi">
     				 <ul>
        <li id="current"><a href="index.html">START</a></li>
        <li><a href="profil.html">PROFIL</a></li>
        <li><a href="leistungen.html">LEISTUNGEN</a></li>
        <li><a href="kontakt.html">KONTAKT</a></li>
   
      				</ul>
 
  </div>

 

[cebito]

AW: Navi zentriert nicht

[B][COLOR=Red]margin-left:[/COLOR][/B] 0px auto;

...sollte dir zu denken geben.

 

[Foos]

AW: Navi zentriert nicht

Oh Shit ich Depperle. Danke, hast mir den Tag gerettet

Aber eine Frage bleibt:

Wenn ich die navi in der Länge auf 300px mache, dann funktioniert das mit dem margin: 0px auto ja einwandfrei. Warum wendert er den margin-auto aber nicht an, wenn ich die width der navi auf 100% mache?

 

[fexx]

AW: Navi zentriert nicht

bereite 100% = gesamte breite vom browserfenster (bzw. vom eltern element) ... wie solls dann zentriert werden??

 

[cebito]

AW: Navi zentriert nicht

Weil sie dann 100% breit ist, gemessen am Elternelement.

 

[Foos]

AW: Navi zentriert nicht

Weil sie dann 100% breit ist, gemessen am Elternelement.

Naja ich möchte eben bei jeder Browsergröße die Navi zentrier haben?! Klar, so funktionierts jetzt auch...

 

[Myhar]

AW: Navi zentriert nicht

Wenn das Browserfenster 900px breit ist und die navi 100% hat, dann ist sie eben auch 900px breit. Skaliert man nun das Broswerfenster auf sagen wir mal 1200px, dann ist die navi auch 1200px breit. Sie ist damit dann natürlich auch zentriert. Die Elemente in der Navigation (li) werden links gefloated, wodurch du ihnen also sagst, dass sie links in der Navi anfangen sollen sich anzuordnen. Die Elemente innerhalb der Navi sind dann also nicht zentriert, sie orientieren sich an der Navi.
Ich hoffe, dass das jetzt nicht zu verwirrend war. ;-)

 

[Foos]

AW: Navi zentriert nicht

Ich hätte da kurz ne neue Frage. (Mach jetz keinen neuen Thread auf.)

Und zwar:

#content {
	height: 300px;
	display: block;
	position: fixed;
	width: 100%;
	background-image: url(../images/content_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-repeat: no-repeat;
	
}
#bottom {
	background-image: url(../images/footer_bg.jpg);
	background-repeat: repeat;
	bottom: 0px;
	height: 200px;
	left: 0px;
	width: 100%;
	display: block;
	position: fixed;
	
}
#logo {
	margin: 0px auto;
	width: 980px;
	text-align: center;
	padding-top: 30px;
}
#skyline {
	bottom: 200px;
	height: 200px;
	
	background-color: #3C6;

Also ich will das "bottom" ganz unten am Browser ist und "skyline" darüber anfängt. Bottom ist auch ganz unten. Aber "skyline" ist irgendwie ganz oben?! Kann mir jemand erklären warum oder wo der Fehler ist?! Dankeschön

 

[sokie]

AW: Navi zentriert nicht

zumindest eine Angabe für die positionsart müsste das schon haben. weder du noch ich noch der browser wissen, ob das nun relative oder absolute 200px sein sollen.

bitte einfach mal die Grundlagen lesen:


wenn ein Element keine Angabe zu Position hat, ist die Positionsart "static".

zu den Positionen top,right,bottom,left:

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu

. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.

 

[Foos]

AW: Navi zentriert nicht

zumindest eine Angabe für die positionsart müsste das schon haben. weder du noch ich noch der browser wissen, ob das nun relative oder absolute 200px sein sollen.

hm also wenn ich position:relative mach schmeißt er mir den container ganz oben an den browserrand. Eigentlich will ich ja nix anderers als 1 Container ganz nach unten. Und einen 2. Container eben an diesen von unten anschließend?!!?

 

[cebito]

AW: Navi zentriert nicht

Ohne HTML nutzt die css ziemlich wenig, denn so weiß niemand, an welchem Elternelement sich "skyline" orientiert. Du solltest dich echt mal zu Positionierungen schlau lesen.

 

[Foos]

AW: Navi zentriert nicht

Ja du hast wohl Recht. Positionierung is echt nich so meines

Hier wäre der HTML-Code, vielleicht könntet ihr mir da nochmal durch helfen

<body>

<div id="top"> </div>


<div id="content"> 

		</div>
        
        

<div id="skyline"> </div>
<div id="bottom">

<div id="logo"><img src="images/logo.png" width="240" height="50" alt="Logo" /> </div>

 			<div id="navi">
     				 <ul>
        <li id="current"><a href="index.html">START</a></li>
        <li><a href="profil.html">PROFIL</a></li>
        <li><a href="leistungen.html">LEISTUNGEN</a></li>
        <li><a href="kontakt.html">KONTAKT</a></li>
   
      				</ul>
 
				</div>

 </div>

</body>
</html>

 

[Foos]

AW: Navi zentriert nicht

Habe gerade ein paar Posts weiter unten etwas von "Sticky Footer" gelesen. Ist das das was ich brauche?!