/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS Drop down menu?
Fra : Ukendt


Dato : 19-02-10 09:12

Hej,
Den CSS drop down menu jeg har fra www.webdesign101.dk, og anvender på flere
sider fungerer OK, bortset fra at drop down listen ikke placeres øverst hvis
der er en anden menulinje under.

Se et eksempel på www.smeds.dk/menu.htm., jeg har kun testet eksempelet i
IE7.
Drop down listen er øverst når der er tekst på elementet under, men ikke
hvis der er menu.

Hvordan kan jeg ændre menuernes CSS så drop down listerne altid placeres
øverst?

God weekend
Henning



 
 
Jørgen Farum Jensen (19-02-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-02-10 09:53

Henning Smed skrev:
> Hej,
> Den CSS drop down menu jeg har fra www.webdesign101.dk, og anvender på flere
> sider fungerer OK, bortset fra at drop down listen ikke placeres øverst hvis
> der er en anden menulinje under.
>
> Se et eksempel på www.smeds.dk/menu.htm., jeg har kun testet eksempelet i
> IE7.
> Drop down listen er øverst når der er tekst på elementet under, men ikke
> hvis der er menu.
>
> Hvordan kan jeg ændre menuernes CSS så drop down listerne altid placeres
> øverst?

#navlist ul.niveau2 {
z-index:3;
....
}

Stakkeordenen for elementerne på en webside er, at det
element der kommer først i kildekoden har den laveste
værdi. Derfor dækker din nederste menu over undermenuerne
til den øverste. Stakkeorden kontrolleres med z-index.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Ukendt (19-02-2010)
Kommentar
Fra : Ukendt


Dato : 19-02-10 10:40


"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> wrote in message
news:4b7e5150$0$36586$edfadb0f@dtext01.news.tele.dk...
> Henning Smed skrev:
>> Drop down listen er øverst når der er tekst på elementet under, men ikke
>> hvis der er menu.
>>
>> Hvordan kan jeg ændre menuernes CSS så drop down listerne altid placeres
>> øverst?
>
> #navlist ul.niveau2 {
> z-index:3;
> ...
> }
>
> Stakkeordenen for elementerne på en webside er, at det
> element der kommer først i kildekoden har den laveste
> værdi. Derfor dækker din nederste menu over undermenuerne
> til den øverste. Stakkeorden kontrolleres med z-index.
> --
>
Tak for dit svar Jørgen.
Jeg har indsat z-index og forsøgt med værdierne 3 og 5, desvære løser det
ikke mit problem, kan årsgen være at de 2 menulier er i forskellige
elementer?
Elementerne på siden indlæses:
<div id="border-box">
<div id="text-box">
<div id="navlist" align="left">
(indeholder drop down menuen)
</div>
<div id="pagenavlist" align="left">
(indeholder menuen som skal være under drop down)
</div>
Mvh
Henning



Jørgen Farum Jensen (19-02-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-02-10 19:13

Henning Smed skrev:

>> Stakkeordenen for elementerne på en webside er, at det
>> element der kommer først i kildekoden har den laveste
>> værdi. Derfor dækker din nederste menu over undermenuerne
>> til den øverste. Stakkeorden kontrolleres med z-index.
>> --
>>
> Tak for dit svar Jørgen.
> Jeg har indsat z-index og forsøgt med værdierne 3 og 5, desvære løser det
> ikke mit problem, kan årsgen være at de 2 menulier er i forskellige
> elementer?
> Elementerne på siden indlæses:
> <div id="border-box">
> <div id="text-box">
> <div id="navlist" align="left">
> (indeholder drop down menuen)
> </div>
> <div id="pagenavlist" align="left">
> (indeholder menuen som skal være under drop down)
> </div>

Der er hos mig ingen tvivl om at det er
z-index egenskaben, du skal have fat i.
Så dersom undermenuerne i #navlist har en
højere værdi end div'en #pagenavlist vil
undermenuerne også dække over #pagemenulist.

Men jeg har muligvis rodet lidt rundt i hvilke
elementer der er tale om. z-index virker kun på
elementer, der er indeholdt i et fælles forældre
element.

Dette er her #text-box. Så jeg ville prøve
#text-box #navlist {
z-index:5;
....}
#text-box #pagenavlist {
z-index:3;
....}

Jeg overså at #pagenavlist er både floatet
og relativt positioneret (hvorfor), hvorfor
det også skal have en z-index værdi.

Jeg ved heller ikke hvad du vil opnå med
align="left" som attribut til disse to div'er.
float:left er alt rigeligt til at få dem
venstrestillede.



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Birger Sørensen (19-02-2010)
Kommentar
Fra : Birger Sørensen


Dato : 19-02-10 19:53

Jørgen Farum Jensen forklarede:
> Henning Smed skrev:
>
>>> Stakkeordenen for elementerne på en webside er, at det
>>> element der kommer først i kildekoden har den laveste
>>> værdi. Derfor dækker din nederste menu over undermenuerne
>>> til den øverste. Stakkeorden kontrolleres med z-index.
>>> --
>>>
>> Tak for dit svar Jørgen.
>> Jeg har indsat z-index og forsøgt med værdierne 3 og 5, desvære løser det
>> ikke mit problem, kan årsgen være at de 2 menulier er i forskellige
>> elementer?
>> Elementerne på siden indlæses:
>> <div id="border-box">
>> <div id="text-box">
>> <div id="navlist" align="left">
>> (indeholder drop down menuen)
>> </div>
>> <div id="pagenavlist" align="left">
>> (indeholder menuen som skal være under drop down)
>> </div>
>
> Der er hos mig ingen tvivl om at det er
> z-index egenskaben, du skal have fat i.
> Så dersom undermenuerne i #navlist har en
> højere værdi end div'en #pagenavlist vil
> undermenuerne også dække over #pagemenulist.
>
> Men jeg har muligvis rodet lidt rundt i hvilke
> elementer der er tale om. z-index virker kun på
> elementer, der er indeholdt i et fælles forældre
> element.
>
> Dette er her #text-box. Så jeg ville prøve
> #text-box #navlist {
> z-index:5;
> ...}
> #text-box #pagenavlist {
> z-index:3;
> ...}
>
> Jeg overså at #pagenavlist er både floatet
> og relativt positioneret (hvorfor), hvorfor
> det også skal have en z-index værdi.
>
> Jeg ved heller ikke hvad du vil opnå med
> align="left" som attribut til disse to div'er.
> float:left er alt rigeligt til at få dem
> venstrestillede.

Ud over at det er sammenblanding af CSS og HTML "udlæg" (design?),
hvilket vel i sig selv ikke kan medføre andet end bøvl, så gælder float
for elementet selv, mens align kun påvirker indholdet...

Deudover, så forstår jeg ikke hvad det handler om.
Siden på det givne link, fungerer fint her, både i IE8 og FF3.6

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jørgen Farum Jensen (19-02-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-02-10 23:33

Birger Sørensen skrev:

> Deudover, så forstår jeg ikke hvad det handler om.
> Siden på det givne link, fungerer fint her, både i IE8 og FF3.6

Ja, men ikke i ie7, da jeg sidst
kiggede på den.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

Ukendt (20-02-2010)
Kommentar
Fra : Ukendt


Dato : 20-02-10 07:55


"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:4b7ed4aa$0$36560$edfadb0f@dtext01.news.tele.dk...
> Henning Smed skrev:
>
>>> Stakkeordenen for elementerne på en webside er, at det
>>> element der kommer først i kildekoden har den laveste
>>> værdi. Derfor dækker din nederste menu over undermenuerne
>>> til den øverste. Stakkeorden kontrolleres med z-index.
>>> --
>>>
>> Tak for dit svar Jørgen.
>> Jeg har indsat z-index og forsøgt med værdierne 3 og 5, desvære løser
>> det ikke mit problem, kan årsgen være at de 2 menulier er i forskellige
>> elementer?
>> Elementerne på siden indlæses:
>> <div id="border-box">
>> <div id="text-box">
>> <div id="navlist" align="left">
>> (indeholder drop down menuen)
>> </div>
>> <div id="pagenavlist" align="left">
>> (indeholder menuen som skal være under drop down)
>> </div>
>
> Der er hos mig ingen tvivl om at det er
> z-index egenskaben, du skal have fat i.
> Så dersom undermenuerne i #navlist har en
> højere værdi end div'en #pagenavlist vil
> undermenuerne også dække over #pagemenulist.

Du har selvføgelig ret, din rettelse får menuen til at fugere i IE8, men
ikke i IE6 og IE7.

> Men jeg har muligvis rodet lidt rundt i hvilke
> elementer der er tale om. z-index virker kun på
> elementer, der er indeholdt i et fælles forældre
> element.
>
> Dette er her #text-box. Så jeg ville prøve
> #text-box #navlist {
> z-index:5;
> ...}
> #text-box #pagenavlist {
> z-index:3;
> ...}
>
> Jeg overså at #pagenavlist er både floatet
> og relativt positioneret (hvorfor), hvorfor
> det også skal have en z-index værdi.

Jeg håber at få tid til installe en PC med IE7 hjemme og at afprøve dine
forslag i løbet af weekenden, men 'hjemmestyret' mener at det er vigtigt at
få malet lofter.

> Jeg ved heller ikke hvad du vil opnå med
> align="left" som attribut til disse to div'er.
> float:left er alt rigeligt til at få dem
> venstrestillede.

Jeg har fjernet align="left", og kan ikke huske hvorfor jeg have det i
koden.

Tak for din hjælp og tålmodighed
/Henning

..



Ukendt (23-02-2010)
Kommentar
Fra : Ukendt


Dato : 23-02-10 14:44


"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:4b7ed4aa$0$36560$edfadb0f@dtext01.news.tele.dk...
> Henning Smed skrev:
>
>>> Stakkeordenen for elementerne på en webside er, at det
>>> element der kommer først i kildekoden har den laveste
>>> værdi. Derfor dækker din nederste menu over undermenuerne
>>> til den øverste. Stakkeorden kontrolleres med z-index.
>>> --
>>>
>> Tak for dit svar Jørgen.
>> Jeg har indsat z-index og forsøgt med værdierne 3 og 5, desvære løser
>> det ikke mit problem, kan årsgen være at de 2 menulier er i forskellige
>> elementer?
>> Elementerne på siden indlæses:
>> <div id="border-box">
>> <div id="text-box">
>> <div id="navlist" align="left">
>> (indeholder drop down menuen)
>> </div>
>> <div id="pagenavlist" align="left">
>> (indeholder menuen som skal være under drop down)
>> </div>
>
> Der er hos mig ingen tvivl om at det er
> z-index egenskaben, du skal have fat i.
> Så dersom undermenuerne i #navlist har en
> højere værdi end div'en #pagenavlist vil
> undermenuerne også dække over #pagemenulist.
>
> Men jeg har muligvis rodet lidt rundt i hvilke
> elementer der er tale om. z-index virker kun på
> elementer, der er indeholdt i et fælles forældre
> element.
>
> Dette er her #text-box. Så jeg ville prøve
> #text-box #navlist {
> z-index:5;
> ...}
> #text-box #pagenavlist {
> z-index:3;
> ...}
Hej Jørgen

z-index:5 på #text-box #navlist
og
#text-box #pagenavlist

løste ikke problemet, men med z-index på:

#navlist ul.niveau1 li.sub:hover ul.niveau2
og
#navlist li.sub
virker menuen i IE6 og IE8, jeg har endnu ikke testet i IE7.

Mange tak for hjælpen
/Henning



Jørgen Farum Jensen (23-02-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 23-02-10 15:37

Henning Smed skrev:
> "Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
> news:4b7ed4aa$0$36560$edfadb0f@dtext01.news.tele.dk...
>> Henning Smed skrev:
>>
>>>> Stakkeordenen for elementerne på en webside er, at det
>>>> element der kommer først i kildekoden har den laveste
>>>> værdi. Derfor dækker din nederste menu over undermenuerne
>>>> til den øverste. Stakkeorden kontrolleres med z-index.
>>>> --
>>>>
>>> Tak for dit svar Jørgen.
>>> Jeg har indsat z-index og forsøgt med værdierne 3 og 5, desvære løser
>>> det ikke mit problem, kan årsgen være at de 2 menulier er i forskellige
>>> elementer?
>>> Elementerne på siden indlæses:
>>> <div id="border-box">
>>> <div id="text-box">
>>> <div id="navlist" align="left">
>>> (indeholder drop down menuen)
>>> </div>
>>> <div id="pagenavlist" align="left">
>>> (indeholder menuen som skal være under drop down)
>>> </div>
>> Der er hos mig ingen tvivl om at det er
>> z-index egenskaben, du skal have fat i.
>> Så dersom undermenuerne i #navlist har en
>> højere værdi end div'en #pagenavlist vil
>> undermenuerne også dække over #pagemenulist.
>>
>> Men jeg har muligvis rodet lidt rundt i hvilke
>> elementer der er tale om. z-index virker kun på
>> elementer, der er indeholdt i et fælles forældre
>> element.
>>
>> Dette er her #text-box. Så jeg ville prøve
>> #text-box #navlist {
>> z-index:5;
>> ...}
>> #text-box #pagenavlist {
>> z-index:3;
>> ...}
> Hej Jørgen
>
> z-index:5 på #text-box #navlist
> og
> #text-box #pagenavlist
>
> løste ikke problemet, men med z-index på:
>
> #navlist ul.niveau1 li.sub:hover ul.niveau2
> og
> #navlist li.sub
> virker menuen i IE6 og IE8, jeg har endnu ikke testet i IE7.

Tak for tilbagemeldingen, som minder mig om at
jeg skal prøve at læse mine egne artikler før
jeg farer ud.

Hvis du har problemer med at teste i forskellige
versioner af IE kan jeg anbefale
http://www.my-debugbar.com/ietester/index_all.php



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste