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

robson Nybegynder

06. marts 2008 - 11:48 Der er 18 kommentarer og
1 løsning

CSS menu

Jeg prøver at oprette en dropdown menu i ren CSS, hvilket jeg ikke har den store erfaring i...

Jeg har fundet en masse forskellige ul li kode som ligner noget der godt kunne bruges, men mit problem består at jeg ønsker at mine overordnede menupunkter ikke "fylder" lige så meget som den underliggende dropdown box. Se fx http://www.cssplay.co.uk/menus/simple_vertical.html

Det jeg ønsker er at 1. niveau af menuen står i ren tekst UDEN box omkring og med forholdsvis lille afstand mellem punkterne og at dropdown boksene vises lige under punkterne.
Kan dette overhovedet lade sige gøre som REN css - eller skal jeg over i nogle hidden divs og noget javascript??

Synes godt om

jokkejensen Novice

06. marts 2008 - 12:47 #1

jeg har en her:

fjern mellemrum og lad være med at poste den rigtige url herinde.

http://midttrafik2008 .gennemse.dk/

http://midttrafik2008 .gennemse.dk/frontend/css/menu/mainmenu.css

Der sætter du bare afstand på li elementerne.

/JJ

Synes godt om

jokkejensen Novice

06. marts 2008 - 12:48 #2

#MainMenu li
{
float:left;
padding-right: 15px; /* AFSTAND ! */
list-style-type: none;
position: relative;
}

Synes godt om

jokkejensen Novice

06. marts 2008 - 12:50 #3

(mangler forresten lige IE6 funktionalitet... fixer det nu.. )

Synes godt om

jokkejensen Novice

06. marts 2008 - 13:23 #4

body
{
behavior:url("./frontend/css/browserspecific/csshover.htc");
}

#MainMenu li.hasChildren:hover ul
{
display: block;
width: 200px;
}

#MainMenu ul ul li.first
{
padding-top: 2px;
margin-top: 2px;
}

Jeg bruger : http://www.xs4all.nl/~peterned/csshover.html

Synes godt om

robson Nybegynder

06. marts 2008 - 13:30 #5

Hej JJ

Det der er simpelthen smukt :o)
Det virker præcis som jeg ønsker (jeg mangler at teste i IE6 og på MAC, men det er sikkert bare en form sag... ;)

Mange tak for hjælpen!!

Synes godt om

robson Nybegynder

06. marts 2008 - 13:31 #6

jeg vil kaste mig over xs4all.nl linket snarest og selv blive opdateret lidt på css området :)

Synes godt om

jokkejensen Novice

06. marts 2008 - 13:31 #7

det er testet i safari på mac og pc, ie6 og opera.. der er dog lidt design fixes.. men funktionaliteten er okay..

/JJ

Synes godt om

jokkejensen Novice

06. marts 2008 - 13:32 #8

Jeg smider kun csshover med til ie6 browseren..

http://midttrafik2008.gennemse.dk/frontend/css/browserspecific/ie6.css

/JJ

Synes godt om

robson Nybegynder

06. marts 2008 - 13:46 #9

skal jeg forstå det sådan at du inkludere dette stylesheet hvis der er tale om IE6.0??

hvad gør:
body
{
behavior:url("csshover.htc");
}

Synes godt om

jokkejensen Novice

06. marts 2008 - 13:55 #10

Ja jeg bruger http://www.quirksmode.org/css/condcom.html til kun at loade et IE6 stylesheet...

Der laver jeg også design tilretninger, henrettet ie6.

behavior:csshover.htc afvikler blot noget javascript der gør at IE6 kan sætte :hover på andet end anchor tags <a>.. Dog kræver det at man giver elementet en klasse da det ikke IE6 slet ikke vil behandle li:hover.. men nok li.HasChildren:hover .. så tager javascriptet bare klassen og ikke elementet og giver den samme effekt.

/JJ

Synes godt om

robson Nybegynder

06. marts 2008 - 14:02 #11

super - tak for de fyldige svar :)

Synes godt om

jokkejensen Novice

06. marts 2008 - 14:04 #12

doh, så linker jeg fandme selv ind til sitet :).... 13:32 :)

Synes godt om

olebole Juniormester

06. marts 2008 - 14:31 #13

<ole>

jokkejensen >> Sorry to say, men den kilde skal man nok ikke drikke af. For det første viser dette citat, at han ikke er særlig stærk i web-teknologierne:
"IE also supports so called behaviors; .htc or .hta files that can be attached to specific elements using css making it possible to let these elements behave in a special way."

- i hvertfald har han absolut ingen anelse om, hvad HTA er!

Desuden bygger løsningen på skift af CSS-klasse, som performer elendigt. Derfor bør man i stedet skifte de enkelte style properties på elementet

/mvh
</bole>

Synes godt om

jokkejensen Novice

06. marts 2008 - 14:35 #14

:)...

Skal nok køle lidt af :)

Men du må give mig ret i at lave sådan en menu i javascript, kun pga IE6 halter, er lidt overkill ? - og at koden ikke direkte er til gene for andre browsers end i6, og at det rent faktisk virker..

Ellers må vi jo se et eksempel.. :)

/JJ

Synes godt om

jokkejensen Novice

06. marts 2008 - 14:36 #15

og robson du skal ikke lige tage dig af der nok bliver råbt højt om lidt :)

Synes godt om

robson Nybegynder

06. marts 2008 - 14:41 #16

det er vist en diskussion jeg blot overlader til jer ;)

ps. jeg hader crossbrowser css udvikling!!! :(

Synes godt om

jokkejensen Novice

06. marts 2008 - 15:21 #17

Det er der ikke noget der hedder jfør olebole... kun forkert markup og css :)... (bare for sjov)

Synes godt om

olebole Juniormester

06. marts 2008 - 16:21 #18

Store dele af W3C's arbejde går ud på at 'dressere' os til at opdele vores kode i indhold (evt. XML), markup (HTML), visuel præsentation (CSS) og funktionalitet (script). I den henseende giver det absolut ingen mening at lave den slags menuer i CSS ... der er jo tale om ren funktionalitet. Det er med andre ord ikke overkill at lave en sådan menu i JavaScript, men det eneste, der giver mening ;o)

Derudover har webkodning altid handlet om, hvad browserne kunne. Derfor må man ofte vente på, at den ene eller anden browser får gumpen med og understøtter gældende standarder, før man kan bruge bestemte koder.

Synes godt om

jokkejensen Novice

07. marts 2008 - 10:44 #19

Og der mener jeg at det er direkte forkert at lave markup henrettet gamle browsere - hellere lave en korrekt side, og smide noget fuck på det til de gamle browsers, gerne et lag der slet ikke berører de moderne :)

Men kan godt... lidt se... hvor du vil hen, men det virker bare ikke hvis man har et produkt man skal sælge på et hvis antal timer.

Sådan en dropdown tager mig 10-15 minutter at skrive i hånden fra bunden.. tror jeg ville skulle bruge flere timer på den første hvis det skal være noget dynamisk der ligger i en js fil for sig selv... for inline JS er heller ikke mig (med nogle få undtagelser)

/JJ

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