fout in menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Joren vh

joren vh

24/12/2007 17:28:00
Quote Anchor link
Hallo mensen,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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 &#187;</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
 
PHP hulp

PHP hulp

07/10/2024 15:29:28
 
Zlik

Zlik

24/12/2007 17:43:00
Quote Anchor link
Ik weet waar de fout zit, maar hierdoor komen er wel andere problemen naar voren.
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
#pmenu li:hover > ul {
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
 
Joren vh

joren vh

24/12/2007 17:49:00
Quote Anchor link
Thx morgen even proberen. Ik hoop dat iemand dan nog een oplossing vind zodat de links niet naar beneden schuiven.

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
 
Joren vh

joren vh

25/12/2007 00:23:00
Quote Anchor link
Moet je teleurstellen, het werkt niet !
Iemand nog sugestie ?
 
Joren de Wit

Joren de Wit

25/12/2007 10:32:00
Quote Anchor link
De :hover pseudo klasse werkt in IE <= 6 alleen op het <a> element. Dus:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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...
 
Joren vh

joren vh

25/12/2007 11:16:00
Quote Anchor link
Oke bedankt, maar ik heb al <a> tags een hover gegeven , los van het menu. hoe los ik dit dan op ?

Door bv.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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 ?
Gewijzigd op 01/01/1970 01:00:00 door joren vh
 
Joren vh

joren vh

26/12/2007 10:55:00
Quote Anchor link
Iets te vroege BUMP

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
 
Citroen Anoniem Graag

Citroen Anoniem Graag

26/12/2007 11:46:00
Quote Anchor link
Probeer dit eens:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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?
 
Joren de Wit

Joren de Wit

26/12/2007 11:50:00
Quote Anchor link
Werkt niet in IE6, de hovers leveren al een probleem op. Dat komt omdat de pseudoklasse :hover in IE<=6 alleen beschikbaar is voor <a> elementen...
 
Joren vh

joren vh

26/12/2007 11:57:00
Quote Anchor link
WOOOW bedankt, IE6 geef geen hover funcite op geen enkele link, maar daar moet ik nog even een z-index geven, verder klapt er dus niets uit in ie6

Ik dank je al heel erg.

Zou je het kunnen oplossen voor IE6 ?
 
Jan Koehoorn

Jan Koehoorn

26/12/2007 11:57:00
Quote Anchor link
Een oplossing voor die pseudo class op andere elementen dan a in IE6 is een behavior (Microsoft grapje). Daarvoor heb je dit bestand nodig: csshover.htc

Dat include je in je header met een conditional comment:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<!--[if lte IE 6]>
    <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
 
Joren vh

joren vh

26/12/2007 11:59:00
Quote Anchor link
mmm ja ik weet wel ik doe om de hover ( gewone hover ) in werking te krijgen, ik voeg nog even #pmenu a { } toe. Maar het uitklapbaar stuk werkt dus niet in ie6

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.

Gewijzigd op 01/01/1970 01:00:00 door joren vh
 
Jan Koehoorn

Jan Koehoorn

26/12/2007 12:04:00
Quote Anchor link
Geef even een adres dan kijk ik met IE6 (hé, dat rijmt)
 
Joren vh

joren vh

26/12/2007 12:09:00
Quote Anchor link
http://www.duikwerelddewitte.be/joren/relaxdivers/

Mooi zo je kan een gedichten site gaan maken ;-)
 
Jan Koehoorn

Jan Koehoorn

26/12/2007 12:16:00
Quote Anchor link
Ik kijk even vlug
en ben zo terug!
 
Joren vh

joren vh

26/12/2007 12:18:00
Quote Anchor link
Is goed ;-)
 
Jan Koehoorn

Jan Koehoorn

26/12/2007 12:20:00
Quote Anchor link
Ik zit even te denken: heb je wel dit in je css:

#pmenu li a:hover ul {display: block;}

zodat die subnavigatie zichtbaar wordt op een hover op die a in het hoofdmenu?
 
Joren vh

joren vh

26/12/2007 12:22:00
Quote Anchor link
Precies niet.
Dit is wat ik heb.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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;
}
 
Jan Koehoorn

Jan Koehoorn

26/12/2007 12:26:00
Quote Anchor link
IE6 gaat niet goed om met die child selectors (>) die jij gebruikt.

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

joren vh

26/12/2007 12:29:00
Quote Anchor link
Oke gebeurt, kan jij even kijken of het werkt ?

Bedankt al ;)
 
Jan Koehoorn

Jan Koehoorn

26/12/2007 12:36:00
Quote Anchor link
Hmm, ik krijg nog geen hover in IE6. Volg anders deze tutorial ff stap voor stap. Daarmee heb ik het ook gedaan.
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.