Kan inte centera (sträcka ut) menyn

Jag har skapat en meny i css, men den blir liksom align left.

http://www.krigsforum.se/

Skulle vilja att texten sträcker ut sig så att den anpassar sig över den 1000px breda bakgrunden, samt centrerad text. Men jag lyckas inte alls med detta. Små detaljer som tar timmar att försöka lösa. :(

Om man pekar på en rad i menyn så ser man en röd linje och den längst till vänster i menyn "Krigsforum.se" där sträcker sig linjen ut till kanten, men inte den längst till höger "Quiz".

Så här ser menykoden ut...

ul.menu {
list-style-type:none;
width:1000px;
position:relative;
display:block;
height:33px;
font-size:10px;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:0px solid #000;
margin:0 auto;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0 auto;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 22px 0 25px;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-align:center;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}

/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}

ul.menu1 {
list-style-type:none;
width:1000px;
position:relative;
display:block;
height:33px;
font-size:.6em;
background: url(http://www.krigsforum.se/forum/images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:0px solid #000;
margin:0;
padding:0;
}

ul.menu1 li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu1 li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 22px 0 25px;
}

ul.menu1 li a:hover,.current {
color:#fff;
background:url(http://www.krigsforum.se/forum/images/bg.png) repeat-x top left;
text-align:center;
}

ul.menu1 .current a {
color:#fff;
font-weight:700;
}

/*RED*/
ul.menu1.red{
background-color:#B11718;
}
ul.menu1.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}

Som jag känner till så är just detta en av list-menyernas svagheter. Det lär öht inte gå att få den 100% bred i alla webbläsare och oavsett användarens egna inställningar (fontstorlekar osv). Den enda lösningen är en tabell med en länk i varje cell. Med reservation för att nåt ljushuvud numera har löst problemet alltså...

Hmm..
Visst låter det sig göras med CSS numera!

Det är egentligen "bara" att ta till

display: table

och dess släktingar (funkar i "allt" - även MSIE8 ;) ) - och alltså bygga det DanneV föreslår - en länk i varje tabellcell, men att göra det med CSS istället för att förvirra till det semantiskt med <table>-element ;)

Antag följande menykod:

<div id="tabs">
        <ul>
            <li><a href="#fragment-1">First</a></li>
            <li><a href="#fragment-2">Second tab</a></li>
            <li><a href="#fragment-3">Third</a></li>
	    <li class="selected"><b>Selected fourth</b></li>
            <li><a href="#fragment-5">And the Fifth tab</a></li>
	</ul> 
</div>

Med detta upplägg är det "bara" att lägga på grundläggande tabellformattering såhär:

#tabs { display: table;  border-collapse: collapse;  margin: 0 auto; text-align: center;}
#tabs ul {display: table-row; }
#tabs li {display: table-cell; 	white-space: nowrap; }

Efter det behöver man "bara" ta hand om äldre MSIE (dvs versioner innan 8) - vilket ger ett mycket begränsat hack-behov (man hackar ju bara för en - känd - webbläsare med den här flik-metoden, vilket underlättar *rejält* i de allra flesta fall ;) ).

Ett sätt att hacka till flikarna för IE7, är att ta till "inline-block"-metoden (IE7 hanterar egentligen inte inline-block, men det finns ett enkelt hack för att gå förbi det):

<!--[if LT IE 8]>
<style type="text/css">
#tabs {display: block; text-align: center; white-space: nowrap;}
#tabs ul {display: inline-block; margin:0; padding:0;}
#tabs ul {display: inline; } /* IE7 hack to enable inline-block behaviour */
#tabs li {display: inline-block;} 
#tabs li {display: inline; } /* IE7 hack to enable inline-block behaviour */
</style> 
<![endif]-->

- dvs man lägger dit en extra display: inline i regeln efter display:inline-block så funkiar det som man förväntar sig ( i de tta fall iallafall :) )

Lite mer upp-piffat vill man ju ha det dock, så nästa steg är att stila upp länkarna (och den b-tagg jag använder för den valda fliken bara för att demonstrera).

... och då kan det bli såhär: http://jarvklo.se/sandbox/csstabs.html

Genom att manipulera bredden på #tabs "för alla" och bredden på "#tabs li" för MSIE7 (i CSS:en i den villkorliga kommentaren) bör du kunna komma riktigt nära det du är ute efter - och centrerat dessutom :)

Lycka till :bire

PS
metoden funkar även i MSIE6 - även om det kanske är överkurs numera :birp

Jäkligt vänligt av dig att lägga ner all denna tid på att skriva ett så utförligt svar, verkligen. :)

Jag lyckades dock inte med uppgiften. Jag är ganska säker på att det inte beror på att din kod är felaktig. Det är med all sannolikhet jag som inte behärskar läran om kodning tillräckligt. Försökte några varianter, men märkte ingen skillnad alls.

Jag använder för övrigt IE7.

jarvklo skrev:

Hmm..
Visst låter det sig göras med CSS numera!

Ah! Ser elegant ut. Har inte provat, men har ändå två frågor:

1. Vad betyder "LT" i "<!--[if LT IE 8]>"?
2. Bör inte anchor-taggarna längre formateras med "display:block" för att fylla de fiktiva tabellcellerna?

Danne V skrev:

Ah! Ser elegant ut. Har inte provat, men har ändå två frågor:

1. Vad betyder "LT" i "<!--[if LT IE 8]>"?

lt = less than. lte = less than or equal to :)

Danne V skrev:

2. Bör inte anchor-taggarna längre formateras med "display:block" för att fylla de fiktiva tabellcellerna?

Länkarna är satta till "display:block" under #tabs li a, #tabs li b i jarvklos exempel :)

nidron skrev:

lt = less than. lte = less than or equal to :)

Tack!

nidron skrev:

Länkarna är satta till "display:block" under #tabs li a, #tabs li b i jarvklos exempel :)

OK. Kollade aldrig exemplet. Bara koden här i tråden...

Danne V skrev:

Tack!

Så lite så :)

Danne V skrev:

OK. Kollade aldrig exemplet. Bara koden här i tråden...

Förstod det, exemplet innehöll ju lite mer lull-lull än koden i tråden :)

nidron skrev:

exemplet innehöll ju lite mer lull-lull än koden i tråden :)

Yep, det stämmer - Jag knackade egentligen ihop exemplet inför en artikel jag håller på att fila på - och det där med <a> och dess interna hantering (liksom hanteringen av "border") är halft medvetet utelämnat här för att inte dra in för många detaljer i grundprincipen... - Ledsen om det blev virrigt! :bire

DanielS skrev:

Försökte några varianter, men märkte ingen skillnad alls.

DanielS >> Ligger koden för ditt senaste försök "live" på din site just nu, eller har du en separat sida där du experimenterar (om man skulle vilja hjälpa dig ytterligare på traven) som skiljer sig från den?