CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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;
}

Synes godt om

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;
}

Synes godt om

mnt Nybegynder

21. september 2006 - 10:36 #3

Hej,

Det virker ikke?

Synes godt om

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>

Synes godt om

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

Synes godt om

jokkejensen Novice

21. september 2006 - 10:53 #6

den røde baggrund på ul skal selvfølgeligt også dræbes !

/JJ

Synes godt om

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

Synes godt om

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.

Synes godt om

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.

Synes godt om

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

Synes godt om

mnt Nybegynder

21. september 2006 - 11:41 #11

jokkejensen > http://www.timmer.dk/123/cssmenu/jokkejensen.htm

Det virker ikke?

Synes godt om

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å?

Synes godt om

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

Synes godt om

mclemens Nybegynder

21. september 2006 - 11:48 #14

Jep, Jokke's er den korrekte - min virkede
kun i IE ... havde ikke checket FF ... sorry ;)

Synes godt om

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

Synes godt om

mnt Nybegynder

21. september 2006 - 11:51 #16

jokkejensen > P.S: Giver gerne 200 point hvis du gider?

Synes godt om

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

Synes godt om

mnt Nybegynder

21. september 2006 - 12:10 #18

Hov :P

Synes godt om

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

Synes godt om

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>

Synes godt om

mnt Nybegynder

22. september 2006 - 11:22 #21

olebole > Den var god :)

Synes godt om

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?

Synes godt om

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>

Synes godt om

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;}

)))

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS