[grinditwp]

Hej gott folk!
Har en meny som har följande struktur:

<div id="navigation">
  <ul>
    <li>
    <a href="#">Sida 1</a>
   </li>
    <li>
    <a href="#">Sida 2</a>
   </li>
osv....
</div>

Css:

//CSS
#navigation {
	position:relative;
	margin:0;
	z-index:1;
	width:889px;
	margin:10px 0 10px 0;
}
#navigation ul {
	list-style:none;
	margin:0; padding:0; 
}
#navigation ul li {
	float:left;
	margin:0 5px 0 5px;
	padding:5px 25px 0 25px;
	display:block;
	position:relative;
	text-align:center;
	height:49px;
	background:url(../../image_layout/main_elements.png) -270px -25px;
}
#navigation ul li a{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
	
}
#navigation ul li a:hover{
	color:#FFF;
}

Menyn skapas snyggt och ser bra ut, som planerat. Men, eftersom jag använder float:left; så ligger alla objekt i menyn till vänster och detta skapar ett tomrum till höger.
Menyn är dynamisk så jag kan inte bara lägga till en padding till vänster för att putta in allt i mitten.

Hur får jag min meny att vara centrerad?

[Jonas]

Testa:

#navigation ul {
list-style:none;
text-align: center;
margin:0; padding:0;
}

Annars så öka paddingen på li-elementen så att dom blir bredare.
Men eftersom den är dynamisk antar jag att det inte är ett alternativ.

[Syke]

Originally posted by Jonas@Mar 11 2009, 13:13
Testa:

#navigation ul {
list-style:none;
text-align: center;
margin:0; padding:0;
}

Annars så öka paddingen på li-elementen så att dom blir bredare.
Men eftersom den är dynamisk antar jag att det inte är ett alternativ.

Hrm .. alla floatade element blir block, så de ska enligt standarden inte påverkas av text-align.

[grinditwp]

Originally posted by Jonas@Mar 11 2009, 13:13
Testa:

#navigation ul {
list-stylenone;
text-align center;
margin0; padding0;
}

Annars så öka paddingen på li-elementen så att dom blir bredare.
Men eftersom den är dynamisk antar jag att det inte är ett alternativ.

Detta hjälper inte, eftersom li fortfarande är float left, de berörs ej av text-align.

Har även testat margin:0 auto 0 auto; men det hjälper inte, float lägger sig helt enkelt till vänster.

Det går inte heller att göra li till inline, och ha text-align på center för då kan jag inte bestämma höjd på dem och ha bg-bild.

Förslag?

[thorsell]

Hade precis samma problem som du (tror jag) och hittade lösningen på följande sida:

http://www.cssplay.co.uk/menus/centered.html

[grinditwp]

Originally posted by thorsell@Mar 11 2009, 16:50
Hade precis samma problem som du (tror jag) och hittade lösningen på följande sida:

http://www.cssplay.co.uk/menus/centered.html

TACK! Helt otroligt, hade gett upp hoppet! Trotts mycket sökande på Google.

Lösningen för de som är intresserade i kod:

//CSS
#navigation {
	width:100%; overflow:hidden;
}
#navigation ul {
	float:left;
	position:relative; left:50%;
}
#navigation li {
	float:left;
	position:relative; right:50%;
}

//HTML
<div id="navigation">
  <ul>
    <li>
    <a href="#">Sida 1</a>
   </li>
    <li>
    <a href="#">Sida 2</a>
   </li>
osv....
</div>

[Jonas]

Hmm har använt en sådan lösning, men där blev vänstersidan centrerad så man fick köra en "margin-left: -50px" på en 100px bred div.