Avatar billede sylvesternielsen Nybegynder
01. juni 2008 - 13:18 Der er 14 kommentarer og
1 løsning

Horizontal menu med ul, li tags

Jeg har en menu som ser således ud:

<div id="menu">
    <ul>

        <li class="menu-point"><a href="/produkter">Modeller</a></li>
        <li class="menu-divider"></li>
        <li class="menu-point"><a href="/om-os">Om os</a></li>
        <li class="menu-divider"></li>
        <li class="menu-point"><a href="/manual">Manual</a></li>
        <li class="menu-divider"></li>
        <li class="menu-point"><a href="/forhandler">Forhandler</a></li>

    </ul>       
</div>

Jeg skal have lavet min CSS så menuen er horizontal, med en divider på 2 px som indeholder et baggrundsbillede.
Hele menuen skal være 100% bred og punkterne skal være centreret.

Jeg har en smule css, men den fungerer bare ikke efter hensigten.
#menu {
    margin-top: 10px;
    font-size: 18px;
    font-decoration: bold;
    color: #535252;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    display: inline;
}

#menu li {
    display: inline;
}

.menu-divider {
    background-image: url(/images/menu-div.gif);
    background-repeat:repeat-x;
    width: 3px;
}
Avatar billede olebole Juniormester
01. juni 2008 - 17:57 #1
<ole>

- og ...?  =)

/mvh
</bole>
Avatar billede sylvesternielsen Nybegynder
01. juni 2008 - 20:19 #2
Og.... Hvad gør jeg forkert? =)
Avatar billede mclemens Nybegynder
01. juni 2008 - 20:25 #3
Måske passer en tabel bedre ...
Avatar billede sylvesternielsen Nybegynder
01. juni 2008 - 20:27 #4
Det er ikke så godt med tables, da det er et tableless design jeg er ved at bixe sammen. :-)
Avatar billede mclemens Nybegynder
01. juni 2008 - 20:53 #5
Jeg synes bare det var rigtig godt med tabeller.
- Jeg bruger dog ikke selv tabeller, men i dette tilfælde
følte jeg at det var det mest oplagte og optimale ...

100% divideret med 4 og fratrukket 3*2 px er lidt afhængig
af skærmopløsningen og det vil derfor ikke være px præcis
derudover kan der forekomme afrundings problem med de 25%
så der bliver px til overs eller bliver brugt for mange px.
(så med floats duer det nok ikke, så du ryger over i absolute)

Afhængig af opløsning vil det selvfølgelig ikke se pænt ud
(afhængig af farver som du evt. giver #menu og om det
så passer overens med farverne på de andre elementer.)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#menu {
    margin-top: 10px;
    font-size: 18px;
    font-decoration: bold;
    color: #535252;
position:relative;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.menu-point1{width:25%;background:#aa0000;position:absolute;left:0;}
.menu-point2{width:25%;background:#aaaa00;position:absolute;left:25%;}
.menu-point3{width:25%;background:#aa00aa;position:absolute;left:50%;}
.menu-point4{width:25%;background:#0000aa;position:absolute;left:75%;}

.menu-divider1{width:3px;background:#0000aa;position:absolute;left:25%;}
.menu-divider2{width:3px;background:#aa00aa;position:absolute;left:50%;}
.menu-divider3{width:3px;background:#aa0000;position:absolute;left:75%;}

</style>

</head><body>

<div id="menu">
    <ul>

        <li class="menu-point1"><a href="/produkter">Modeller</a></li>
        <li class="menu-divider1">&nbsp;</li>
        <li class="menu-point2"><a href="/om-os">Om os</a></li>
        <li class="menu-divider2">&nbsp;</li>
        <li class="menu-point3"><a href="/manual">Manual</a></li>
        <li class="menu-divider3">&nbsp;</li>
        <li class="menu-point4"><a href="/forhandler">Forhandler</a></li>

    </ul>     
</div>

</body></html>
Avatar billede mclemens Nybegynder
01. juni 2008 - 20:55 #6
(p.s.: det kan selvfølgelig scriptes med javascript, men
det er ikke noget jeg ville betegne som særlig "smart")

... Ole ligger nok inde med et guldkorn ...
Avatar billede mclemens Nybegynder
01. juni 2008 - 20:59 #7
(og "smarte" mig glemmer at checke ...
tilføj lige z-index:9; til de 3 dividers)
Avatar billede sylvesternielsen Nybegynder
01. juni 2008 - 21:22 #8
Så virker det da næsten..
http://www.superatv.dk/

I FF er der en divider på, men ikke i IE.
Det er ikke centreret, så det bruger hele bredden.
Avatar billede mclemens Nybegynder
01. juni 2008 - 21:38 #9
1) Når du ligger et element inden i et andet element som har defineret padding
vil 100% indvendig width i det element ikke svare til 100% af det omkransende
elements width - så læg din menu uden til din header ...


2) Undgå at give left og right padding på elementer og så sige at den skal
have en width på 100% - så bliver den over 100% i width ...
evt. kan du vælge en ul som her

#menu ul {
    margin: 20px 0 0 0;
    padding: 0;
    background-image: url(/images/menu-back.gif);
    background-repeat:repeat-x;
padding:5px;

}

(bemærk ingen width eller float)
Avatar billede mclemens Nybegynder
01. juni 2008 - 21:39 #10
Hmm, glem den margin på 20px, det var en smutter ;)
Avatar billede olebole Juniormester
01. juni 2008 - 23:22 #11
Du har nogle overflødige semikolon i dine 'clear' elementer - og så bør du lægge en '&nbsp;' ind i alle tomme elementer. Undgå altid tomme elementer, da den slags giver bøvl i visse browsere  =)
Avatar billede olebole Juniormester
01. juni 2008 - 23:31 #12
- og læg i øvrigt mærke til, at mclemens har valgt at bruge HTML 4.01 Transitional. Det skyldes, at XHTML 1.0 Transitional aldrig parses som andet end fejfyldt HTML-sovs - og så kan man ligeså godt være ærlig overfor sig selv og browserne  ;o)
Avatar billede olebole Juniormester
01. juni 2008 - 23:33 #13
- og det kommer til at vare adskillige år endnu, før XHTML kommer i nærheden af at være understøttet på WWW
Avatar billede sylvesternielsen Nybegynder
02. april 2009 - 20:44 #14
Smider du et svar? =)
Avatar billede mclemens Nybegynder
02. april 2009 - 21:26 #15
Kommer her og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester