Hjelp til meny i css

[gukki]

Heisann.

 

Sliter med en meny i css.

Har brukt denne: http://mgmweb.no/kodeeksempler/css/meny/horisontal-css-meny

 

Greia er at den kommer opp horisontal, hvordan får jeg lagt den vertikal?

 

[Wackamole]

#menu { padding: 0; width: 10%; background: transparent; } 

#menu ul { font: bold 11px Arial; margin: 0; padding: 0; list-style: none; } 


#menu li { display: inline; margin: 0 2px 0 0; padding: 0; text-transform: uppercase; } 

#menu a { float: bottom; display: block; color: white; margin: 0 1px 0 0; padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; border-bottom: 1px solid white; } 

#menu a:hover { background-color: gray; } 

#menu #this a { background-color: #D25A0B; border-color: #D25A0B; } 

#menu-line { clear: both; padding: 0; width: 13%; height: 5px; line-height: 5px; background: #D25A0B; }

 

Testet

Endret 13. mars 2008 av Famen

[semafor]

css:

#menu li { display: block; margin: 0 2px 0 0; padding: 0; text-transform: uppercase; width: 150px;}
#menu li a { float: none; }

Endret 13. mars 2008 av semafor

[Wackamole]

*snip*

 

Den funker ikke!, den oppførr (som er min) er testet!

 

EDIT: Du har endret den , men den fungerer ikke optimalt fortsatt, min fungerer bedre

Endret 13. mars 2008 av Famen

[semafor]

Float: bottom?

 

Ja, way to go.

[Wackamole]

Bedre enn ingenting

[lassejl]

Egentlig ikke, etter som det ikke er en mulig verdi av float.

 

Like greit som å skrive font-size: tolvogenhalvpiksel;

 

Tilbake til problemet. Jeg løser dette veldig enkelt og uten mye dill dall ved bare

 

#nav li {
  display: inline;
}

 

Eventuellt om du vil ha blokk elementer (om du skal ha bakgrunn rundt som endrer farge osv uten bruk av bilder).

 

#nav li {
  display: block;
  float: left;
}

Endret 13. mars 2008 av lassejl

[Wackamole]

#menu { padding: 0; width: 10%; background: transparent; }

#menu ul { font: bold 11px Arial; margin: 0; padding: 0; list-style: none; }


#menu li { display: inline; margin: 0 2px 0 0; padding: 0; text-transform: uppercase; }

#menu a { float: none; display: block; color: white; margin: 0 1px 0 0; padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; border-bottom: 1px solid white; }

#menu a:hover { background-color: gray; }

#menu #this a { background-color: #D25A0B; border-color: #D25A0B; }

#menu-line { clear: both; padding: 0; width: 10%; height: 5px; line-height: 5px; background: #D25A0B; }

(nå ble det rett, sant?)

 

EDIT:!!! Okei, din kode fungerte , ble ikke testet riktig på min server (feil stilskjema)...

Sorry, får mulig frekkhet i innlegget

 

EDIT:!!!! men den første <li> ble ikke forskyvet med min kode, det blir den på din, 1 eller 2px

Endret 13. mars 2008 av Famen