midtstilling av meny i css

[PixelImp]

Har problemer med å sentrere en meny ...

<ul id="menu">
<li><a href="#" class="meny_main"><span class="hide">Main</span></a></li>
<li><a href="#" class="meny_about"><span class="hide">About</span></a></li>
<li><a href="#" class="meny_portfolio"><span class="hide">Portfolio</span></a></li>
<li><a href="#" class="meny_links"><span class="hide">Links</span></a></li>
<li><a href="#" class="meny_contact"><span class="hide">Contact</span></a></li>
<li><a href="#" class="meny_gbook"><span class="hide">Guestbook</span></a></li>
</ul>

#menu li {
float:left;
list-style-type:none;
margin:0 auto;
padding:0;
}
#menu {
height:43px;
width:auto;
list-style-type:none;
margin:0 auto;
padding:0;
}

noen som ser hva som er feil ?

[jorgis]

text-align:center; ?

[PixelImp]

guess again ...

[Klette]

http://home.online.no/~jgmk

 

sjekk sentrerings koden der, hvis det er det du tenker på. Spesifiser litt mer hva du vil.

[PixelImp]

jeg vil ha sentrert menyen ...

[PT]

margin: 0 auto; ?

[haugsand]

Spesifiser først en bredde på ul, og legg senere til margin: 0 auto; på det samme elementet.

[PixelImp]

skjønner ikke helt hva du mener, får det ikke til ...

[haugsand]

Legg til bakgrunnsfarge på ul, så ser du hvor problemet ligger. Spesifiser bredde på ul, slik at lista ikke tar opp all tilgjengelig plass i bredden.

[Duke Soforth]

Tja... tror jeg har svart på noe lignende før. Trikset er å gi text-align: center til ul. For eksempel:

 

ul#menu {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
ul#menu li {
list-style-type: none;
padding: 0;
margin: 0;
display: inline;
}

Det burde ikke være nødvendig å legge på en float: left på il-definisjonen, slik du har gjort det. Legg på verdier for padding og margin slik du ønsker å tilpasse det.

[PixelImp]

det funket ikke ... og da legger heller ikke linkene seg etter hverandre, men nedover

 

EDIT: ble vist midstilt i IE, men ikke i opera. Men menyen gikk nedover i IE også ..

Endret 6. juni 2004 av PixelImp

[Klette]

vis oss problemet

[PixelImp]

*link slettet*

Endret 6. juni 2004 av PixelImp

[Klette]

Bruk samme teknikk som det er brukt på den siden jeg postet over.

[Duke Soforth]

Etter å ha lekt litt med siden din (EditCSS er en genial extension å ha i Firefox...), så er det bare å si at koden jeg ga deg fungerer dersom du tar bort bildene, høyde og bredde og display: block fra de forskjellige individuelle menyvalgene dine. Menyen blir mao midtstilt når bare den gjemte teksten din vises. Kanskje er det noe med display:block som skaper problem? Har ikke tid til å feilsøke videre, vil bare henvise til denne siden som kanskje kan gi deg noen videre tips.

[haugsand]

I og med at a-elementene i lista må ha display: block; på grunn av at height må defineres, kan ikke li ha display: inline. Alternativet blir derfor å sette float: left; på li.

 

Og PixelImp, hvis du prøver ut løsningene i praksis, så finner du ut at margin: 0 auto; og width: whateverpx; på ul vil fikse biffen.

[PixelImp]

etter kjapp hjelp av satyrium på MSN så har det løsnet seg !!

takk for alle svar