fout in menu
Eerst even offtopic, ik wens jullie fijne feestdagen
nu ontopic
Ik ben bezig met een website, en daar voor ben ik bezig met een menu ( het verticale )
Ik heb ergens een code gehaald waar men met css een uitschuif menu creert. Allemaal goed en wel maar er gaat nog wat mis.
Ik kan het niet goed beschrijven maar toch.
Hij schuift uit => moeten 5 links zijn => hij toont er 1.
De valiator geeft 9 errors op dit stukje code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="pmenu">
<li><a href="index.html" title="Home page">Home</a></li>
<li><a href="historiek.html" title="Historiek">Historiek</a></li>
<li><a href="opleidingen.html" title="Opleidingen">Opleidingen »</a>
<ul>
<li><a href="beginners.html" title="Beginners">Beginners</a></li>
<li><a href="gevorderden.html" title="Gevorderden">Gevorderden</a></li>
<li><a href="proefessioneel.html" title="profesioneel">Profesioneel</a></li>
<li><a href="cross-over.html" title="Cross-over">Cross-Over</a></li>
<li><a href="adip-cedip.html" title="ADIP / CEDIP">ADIP / CEDIP</a></li>
</li>
</ul>
<li><a href="duikclub.html" title="duikclub">Duikclub</a></li>
<li><a href="duikshop.html" title="duikshop">Duikshop</a></li>
<li><a href="links.html" title="links">Links</a></li>
<li><a href="wegbeschrijving.html" title="webbeschrijving">Wegbeschrijving</a></li>
<li><a href="forum/" title="Forum">Forum</a></li>
</ul>
<li><a href="index.html" title="Home page">Home</a></li>
<li><a href="historiek.html" title="Historiek">Historiek</a></li>
<li><a href="opleidingen.html" title="Opleidingen">Opleidingen »</a>
<ul>
<li><a href="beginners.html" title="Beginners">Beginners</a></li>
<li><a href="gevorderden.html" title="Gevorderden">Gevorderden</a></li>
<li><a href="proefessioneel.html" title="profesioneel">Profesioneel</a></li>
<li><a href="cross-over.html" title="Cross-over">Cross-Over</a></li>
<li><a href="adip-cedip.html" title="ADIP / CEDIP">ADIP / CEDIP</a></li>
</li>
</ul>
<li><a href="duikclub.html" title="duikclub">Duikclub</a></li>
<li><a href="duikshop.html" title="duikshop">Duikshop</a></li>
<li><a href="links.html" title="links">Links</a></li>
<li><a href="wegbeschrijving.html" title="webbeschrijving">Wegbeschrijving</a></li>
<li><a href="forum/" title="Forum">Forum</a></li>
</ul>
Nu vind ik niet wat ik fout doe.
Voor de css en een voorbeeldje
http://www.duikwerelddewitte.be/joren/relaxdivers/
Dank bij voor daad
Prettige feestdagen,
Joren
edit : ook werkt het helemaal niet in IE6 , iemand daar een oplossing voor ?
Gewijzigd op 01/01/1970 01:00:00 door Joren vh
De links die moeten uitklappen zijn er wel maar staan verder naar rechts. Dit kun je oplossen door hun position op relative te zetten
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#pmenu li:hover > ul {
display:block;
left:101px;
position:relative;
top:0pt;
}
display:block;
left:101px;
position:relative;
top:0pt;
}
maar dit brengt een ander probleem naar voren, als je dit doet en je laat het menu uitklappen schuiven de andere naar beneden. Hier op kon ik zo snel geen antwoord vinden.
Ik hoop dat je hier iets aan hebt :)
Greetz
Zlik
Ps. enig idee waarom niets werkt van de hover bij gewone links in IE6 ?
IE7 , FF , Opera, Netscape doen het allemaal wel !
Al vast bedankt
Gewijzigd op 01/01/1970 01:00:00 door joren vh
Iemand nog sugestie ?
Code (php)
1
#pmenu li:hover
zal in die versies inderdaad niet werken. Je zou ervoor kunnen kiezen om je hover niet aan de <li> maar aan de <a> mee te geven. Zou hetzelfde effect geven maar ook werken in IE6...
Door bv.
Code (php)
1
#pmenu a:hover
?
Edit:
Thx blanche het werkt.
Enkel het stukje dat uitschuift wil nog niet werken ( oplijdingen in het menu ).
IE6 schuift er niets uit, de rest schuift het uit maar geeft hij maar 1 van de 5 items weer.
Iemand ideetje ?
Thx blanche het werkt.
Enkel het stukje dat uitschuift wil nog niet werken ( oplijdingen in het menu ).
IE6 schuift er niets uit, de rest schuift het uit maar geeft hij maar 1 van de 5 items weer.
Iemand ideetje ?
Gewijzigd op 01/01/1970 01:00:00 door joren vh
Ow edit :
ik zit al stapje verder :)
FF , opera , netscape doen het goed, enkel IE6 toont nog niets bij hover van opleidingen IE7 wel maar geeft maar 1 item weer.
iemand die mij kan helpen ?
Gewijzigd op 01/01/1970 01:00:00 door joren vh
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menuutjes</title>
<style media="screen" type="text/css">
<!--
ul {
list-style:none;
position:absolute;
margin:0px;
padding:0px;
}
#pmenu {
padding:0px;
margin:0px;
list-style-type: none;
width:100px;
position:absolute;
z-index:4;
}
#pmenu ul {
width:300px;
}
#pmenu a {
display:block;
width:180px;
background:#00305a;
background:#00305A none repeat scroll 0%;
color:#EEEEEE;
font-size:10px;
height:23px;
line-height:22px;
text-decoration:none;
text-indent:5px;
}
#pmenu li:hover > a, #pmenu a:hover > a {
background:#0074d9;
color:#fca308;
}
#pmenu li ul {
display: none;
z-index: 999;
}
#pmenu li:hover > ul, #pmenu a:hover > ul {
display:block;
margin-top:-18px;
left:150px;
}
-->
</style>
</head>
<body>
<ul id="pmenu">
<li>
<a title="Home page" href="index.html">Home</a>
</li>
<li>
<a title="Historiek" href="historiek.html">Historiek</a>
</li>
<li>
<a title="Opleidingen" href="opleidingen.html">Opleidingen </a>
<ul>
<li>
<a title="Beginners" href="beginners.html">Beginners</a>
</li>
<li>
<a title="Gevorderden" href="gevorderden.html">Gevorderden</a>
</li>
<li>
<a title="profesioneel" href="proefessioneel.html">Profesioneel</a>
</li>
<li>
<a title="Cross-over" href="cross-over.html">Cross-Over</a>
</li>
<li>
<a title="ADIP / CEDIP" href="adip-cedip.html">ADIP / CEDIP</a>
</li>
</ul>
</li>
<li>
<a title="duikclub" href="duikclub.html">Duikclub</a>
</li>
<li>
<a title="duikshop" href="duikshop.html">Duikshop</a>
</li>
<li>
<a title="links" href="links.html">Links</a>
</li>
<li>
<a title="webbeschrijving" href="wegbeschrijving.html">Wegbeschrijving</a>
</li>
<li>
<a title="Forum" href="forum/">Forum</a>
</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menuutjes</title>
<style media="screen" type="text/css">
<!--
ul {
list-style:none;
position:absolute;
margin:0px;
padding:0px;
}
#pmenu {
padding:0px;
margin:0px;
list-style-type: none;
width:100px;
position:absolute;
z-index:4;
}
#pmenu ul {
width:300px;
}
#pmenu a {
display:block;
width:180px;
background:#00305a;
background:#00305A none repeat scroll 0%;
color:#EEEEEE;
font-size:10px;
height:23px;
line-height:22px;
text-decoration:none;
text-indent:5px;
}
#pmenu li:hover > a, #pmenu a:hover > a {
background:#0074d9;
color:#fca308;
}
#pmenu li ul {
display: none;
z-index: 999;
}
#pmenu li:hover > ul, #pmenu a:hover > ul {
display:block;
margin-top:-18px;
left:150px;
}
-->
</style>
</head>
<body>
<ul id="pmenu">
<li>
<a title="Home page" href="index.html">Home</a>
</li>
<li>
<a title="Historiek" href="historiek.html">Historiek</a>
</li>
<li>
<a title="Opleidingen" href="opleidingen.html">Opleidingen </a>
<ul>
<li>
<a title="Beginners" href="beginners.html">Beginners</a>
</li>
<li>
<a title="Gevorderden" href="gevorderden.html">Gevorderden</a>
</li>
<li>
<a title="profesioneel" href="proefessioneel.html">Profesioneel</a>
</li>
<li>
<a title="Cross-over" href="cross-over.html">Cross-Over</a>
</li>
<li>
<a title="ADIP / CEDIP" href="adip-cedip.html">ADIP / CEDIP</a>
</li>
</ul>
</li>
<li>
<a title="duikclub" href="duikclub.html">Duikclub</a>
</li>
<li>
<a title="duikshop" href="duikshop.html">Duikshop</a>
</li>
<li>
<a title="links" href="links.html">Links</a>
</li>
<li>
<a title="webbeschrijving" href="wegbeschrijving.html">Wegbeschrijving</a>
</li>
<li>
<a title="Forum" href="forum/">Forum</a>
</li>
</ul>
</body>
</html>
Getest en werkend bevonden op Firefox 2, IE7, Opera 9, Safari 3, Netscape 9 Met OS Windows XP.
Zou er nog iemand met IE 6 kunnen testen?
Ik dank je al heel erg.
Zou je het kunnen oplossen voor IE6 ?
Dat include je in je header met een conditional comment:
Code (php)
1
2
3
4
5
2
3
4
5
<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {behavior: url(js/csshover.htc);}
</style>
<![endif]-->
<style type="text/css" media="screen">
body {behavior: url(js/csshover.htc);}
</style>
<![endif]-->
nu heb je ook :hover op andere elementen. Voorwaarde is wel dat JS aan staat.
Edit:
Oh, en de waarde die je bij url invult moet natuurlijk kloppen. Bij mij staat csshover.htc in de map js
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Edit:
Jan, had jouw post niet gezien, maar ik snap hem ook niet.
Ik heb wel de gewone hover werkende gekregen in IE6 maar het stukje dat moet uitklappen nog niet.
Jan, had jouw post niet gezien, maar ik snap hem ook niet.
Ik heb wel de gewone hover werkende gekregen in IE6 maar het stukje dat moet uitklappen nog niet.
Gewijzigd op 01/01/1970 01:00:00 door joren vh
en ben zo terug!
#pmenu li a:hover ul {display: block;}
zodat die subnavigatie zichtbaar wordt op een hover op die a in het hoofdmenu?
Dit is wat ik heb.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
ul {
list-style:none;
position:absolute;
margin:0px;
padding:0px;
}
#pmenu {
padding:0px;
margin:0px;
list-style-type: none;
width:100px;
position:absolute;
z-index:4;
}
#pmenu ul {
width:300px;
}
#pmenu a {
display:block;
width:180px;
background:#00305a;
background:#00305A none repeat scroll 0%;
color:#EEEEEE;
font-size:10px;
height:23px;
line-height:22px;
text-decoration:none;
text-indent:5px;
}
#pmenu li:hover > a, #pmenu a:hover > a {
background:#0074d9;
color:#fca308;
}
#pmenu li ul {
display: none;
z-index: 999;
}
#pmenu li:hover > ul, #pmenu a:hover > ul {
display:block;
margin-top:-18px;
left:150px;
}
#pmenu a:hover {
background:#0074d9;
color:#fca308;
position:relative;
}
list-style:none;
position:absolute;
margin:0px;
padding:0px;
}
#pmenu {
padding:0px;
margin:0px;
list-style-type: none;
width:100px;
position:absolute;
z-index:4;
}
#pmenu ul {
width:300px;
}
#pmenu a {
display:block;
width:180px;
background:#00305a;
background:#00305A none repeat scroll 0%;
color:#EEEEEE;
font-size:10px;
height:23px;
line-height:22px;
text-decoration:none;
text-indent:5px;
}
#pmenu li:hover > a, #pmenu a:hover > a {
background:#0074d9;
color:#fca308;
}
#pmenu li ul {
display: none;
z-index: 999;
}
#pmenu li:hover > ul, #pmenu a:hover > ul {
display:block;
margin-top:-18px;
left:150px;
}
#pmenu a:hover {
background:#0074d9;
color:#fca308;
position:relative;
}
Probeer eerst eens die uit mijn vorige post, om het submenu zichtbaar te krijgen:
#pmenu li a:hover ul {display: block;}
Zet bovendien even een display: inline op al je li's, voor IE6.
Bedankt al ;)