CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
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
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:33 Kan ikke finde opretteren af en e-mailadresse og facebookside Af made4u.mnn i E-mail programmer
I går 19:48 Hvilken ugedag var "24. Marts, 1998" ? Af Ikke-ekspert i Fri debat
I går 14:03 “Haster” Hjælp til 240hz og konsol monitor køb. Af nalacin i Skærme
I går 13:38 Vise en popup overskrift når cursoren stryges henover en control Af per2edb i Access
I går 09:01 ubuntu - er der nogen der har erfaring med dette? Af Uvanga i Linux
White papers
Flere white papers »


Premium
Teaser billede
Køber 25.000 Copilot-licenser af Microsoft i kæmpe-aftale - vil investere milliarder i AI
Læs mere »
"Når jeg engang ikke er her mere, så vil jeg gerne huskes som generøs lige som ham"
Det danske it-lovsystem skal moderniseres: Styrelse søger ene-leverandør til 10-årig kæmpe-kontrakt
7N fra København runder halvanden milliard kroner i omsætning: Beskæftiger nu 1.700 konsulenter
Se alle »
Computerworld
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Porno-giganterne Pornhub og XVideos skal indlevere materiale til EU
Test: Denne bærbar beviser, hvorfor man ikke skal handle laptop alene ud fra teknikbladet
Prøvekørt: Sydkoreansk familie-kolos har plads til alle og sætter alle på plads
Se alle »
CIO
Teaser billede
Nu kan mange flere opgradere deres gamle Windows 10-pc'er til Windows 11: Se om du kan opgradere
Læs mere »
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
På denne dato er det slut med udbredte versioner af Office: Microsoft vil have dig over på de dyrere E3-licenser
Microsoft skruer op for CPU-krav til den næste version af Windows 11: Færre brugere kan nu opdatere
Se alle »
Job & Karriere
Teaser billede
NNIT flytter til det centrale København: Her er selskabets nye hovedkvarter
Læs mere »
Knap 40 procent af disse it-folk tjener tjener mindst 57.000 kroner om måneden
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Se alle »
White paper
Teaser billede
Opdag fordelene ved cloud-baseret backup og recovery
Læs mere »
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
MDR: Transparent sikkerhed og overvågning i realtid
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »