Avatar billede mnt Nybegynder
21. september 2006 - 09:50 Der er 24 kommentarer

CSS menu - mangler hjælp

Hej alle,

Jeg er igang med at prøve at kode designs kun i CSS og ikke med tabeller.

Min menu ser sådan her ud ifølge layoutet: www.timmer.dk/123/cssmenu/menu_layout.gif

Men tror næsten jeg er færdig, men kan blot ikke finde ud af hvordan jeg laver mellemrum mellem hvert menupunkt (altså mellem hvert -tag)?
Se mit resultat her: www.timmer.dk/123/cssmenu/menu.htm
Avatar billede Slettet bruger
21. september 2006 - 09:52 #1
Prøv at ændre:

#nav li {
display: inline;
padding-right: 4px;
margin:0;
}

til:

#nav li {
display: inline;
margin-right: 4px;
}
Avatar billede mclemens Nybegynder
21. september 2006 - 10:03 #2
Husk en width
så margin kan slå
igennem ... F.eks.:

#nav li {
display: inline;
margin:5px 0px 5px 8px;
width:120px;
}
Avatar billede mnt Nybegynder
21. september 2006 - 10:36 #3
Hej,

Det virker ikke?
Avatar billede mclemens Nybegynder
21. september 2006 - 10:47 #4
Den jeg lagde med width har jeg testet så den virker ... (IE6.0 og FF 1.5.0.6)
- Den uden width virker ikke ... Kan du evt. uddybe hvad du mener med
"Det virker ikke?" - f.eks. browser og link til siden - hvor du har
lavet rettelsen i css'en ... Evt. er der måske nødvendigt med en
fuld doctype så IE ikke er i quirks - det var dog ikke nødvendigt
ved min test - men ved ikke om det er i din IE ?

- Indsæt denne doctype før <html> som her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
Avatar billede jokkejensen Novice
21. september 2006 - 10:47 #5
display:inline og margin, er fyfy..

#nav li {
float:left;
display:block;
width: 120px;
padding-right: 4px;
}

should do the trick
Avatar billede jokkejensen Novice
21. september 2006 - 10:53 #6
den røde baggrund på ul skal selvfølgeligt også dræbes !

/JJ
Avatar billede roenving Novice
21. september 2006 - 11:26 #7
-- og husk også at lukke dit første spørgsmål, for jeg opfatter det som det samme, og så er det jo et ulovligt point-tal, du har udsat !-)
Avatar billede mnt Nybegynder
21. september 2006 - 11:37 #8
jokkejensen > Hvorfor på man ikke bruge inline og margin? Mener da at padding ikke virker rigtigt i alle browsere, hvorimod margin virker korrekt i alle??

roenving > Nej nej, det er ikke samme spørgsmål ;). Det andet spørgsmål leder jeg efter gode links.
Avatar billede jokkejensen Novice
21. september 2006 - 11:39 #9
margin og padding er ikke det samme..

Margin kan ikke gives på et element der har display:inline ... som et <span>, <a> mm.
Avatar billede mnt Nybegynder
21. september 2006 - 11:40 #10
mclemens > http://www.timmer.dk/123/cssmenu/mclemens.htm

Det virker ikke her?
Jeg sidder på Safari, Apple.. Men det SKAL jo virke på ALLE browsere.. Søger ikke en løsning som kun virker i IE :P
Avatar billede mnt Nybegynder
21. september 2006 - 11:41 #11
jokkejensen > http://www.timmer.dk/123/cssmenu/jokkejensen.htm

Det virker ikke?
Avatar billede mnt Nybegynder
21. september 2006 - 11:43 #12
jokkejensen > http://www.timmer.dk/123/cssmenu/jokkejensen.htm

Gud jo, det virker da :)..



ALLE:
Måden "jokkejensen" kom med: http://www.timmer.dk/123/cssmenu/jokkejensen.htm - er det den helt rigtige måde at gøre det på?
Avatar billede jokkejensen Novice
21. september 2006 - 11:46 #13
der er tonsvis af uhensigsmæssigheder i dit CSS, og dit hmtl amngler en ordernligt dokumenttype..

Måden jeg gjorde det på løste dit problem, men lavede langt fra dit html/css godt..

/JJ
Avatar billede mclemens Nybegynder
21. september 2006 - 11:48 #14
Jep, Jokke's er den korrekte - min virkede
kun i IE ... havde ikke checket FF ... sorry ;)
Avatar billede mnt Nybegynder
21. september 2006 - 11:50 #15
jokkejensen > Kan jeg få dig til at lave denne menu: http://www.timmer.dk/123/cssmenu/menu_layout.gif om til css på den RIGTIGE måde så?
Så vil jeg nemlig gennemgå din kode, og regne ud hvorfor du har gjort som du har gjort...

Ved godt jeg mangler dokumenttype, og det kommer også på selve sitet. Den fil i ser er bare en .html KUN med menu-koderne...
Avatar billede mnt Nybegynder
21. september 2006 - 11:51 #16
jokkejensen > P.S: Giver gerne 200 point hvis du gider?
Avatar billede roenving Novice
21. september 2006 - 12:01 #17
-- men du kan ikke bruge css, hvis ikke du bruger en fuldt kvalificeret doctype inkl. dtd-link, da IE ellers ikke tager css-rekommendationerne alvorligt og går i quirks-mode !-)
Avatar billede mnt Nybegynder
21. september 2006 - 12:10 #18
Hov :P
Avatar billede mclemens Nybegynder
21. september 2006 - 13:13 #19
Ca. sådan her:

#nav {
margin: 0;
padding:8px 18px;
width:900px;
float:left;
position:relative;
}

#nav li {
float:left;
width: 120px;
padding-right: 7px;
list-style:none;
}

... men, husk doctypen - selvom den ikke påvirker så meget her ...
Avatar billede olebole Juniormester
21. september 2006 - 13:33 #20
<ole>

"Ved godt jeg mangler dokumenttype, og det kommer også på selve sitet".

Det svarer lidt til, at maleren siger:

"Jamen, bindet for øjnene har jeg kun på, mens jeg blander farverne. Jeg tager det skam af, når jeg maler!"

En fuld DTD er helt nødvendig for at få IE til (nogenlunde) at overholde CSS-standarden. Det nytter ikke noget, at CSS er understøttet på det endelige site, hvis CSS ikke var understøttet, da du udviklede sitet  ;o)
Læs evt. mere om IE's CSS-undestøttelse i forbindelse med forskellige DTD'er:
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

- læs under: The !DOCTYPE "Switch"

/mvh
</bole>
Avatar billede mnt Nybegynder
22. september 2006 - 11:22 #21
olebole > Den var god :)
Avatar billede mnt Nybegynder
22. september 2006 - 11:49 #22
mclemens > Det ser ud til den virker. Men nogle siger at man ikke "må" bruge float + position. Det er ikke godt, da man ikke behøver det??

P.S: Hvordan gør jeg så der ikke er padding-right: 7px; på det sidste menupunkt?
Avatar billede mclemens Nybegynder
22. september 2006 - 12:46 #23
Ved ikke helt hvor jeg fik den position:relative; fra?
Nåh, yt med den ... prøv det her:


#nav {
margin: 0;
padding:8px 18px;
float:left;
}

#nav li {
float:left;
width: 120px;
padding-right: 7px;
list-style:none;
}

li#sidsteli {padding-right:0px;}


og: <li id="sidsteli"><a href="#">Links</a></li>
Avatar billede mclemens Nybegynder
22. september 2006 - 12:55 #24
Nøjes med at acceptere Jokke's han kom med padding
istedet for margin ;) (margin virkede også, men
ikke med ydre floatet #nav... eksempel:

#nav {
margin:8px 18px;
padding:0px;
}

#nav li {
float:left;
margin-right: 7px;
width:120px;
list-style:none;

}

li#sidsteli {margin-right:0px;}

)))
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