Gaat om deze website (het is allemaal nog wel in concept)
Probleem is dat er niet mogelijk is om de sub menu's in IE 7 aan te klikken, in FF en IE6 werkt het wel goed. Schijnt te maken te hebben wat ik al ge googled en geGoT heb met dat er tekst staat.
Ik heb geprobeerd om de code tag te gebruiken, maar niet helemaal gelukt....
Mijn index bestand:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
8 <title>Concept</title>
9
10 <link rel="stylesheet" type="text/css" media="screen" href="dewasdas.css" />
11 <link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
12 <script type="text/javascript" src="menu.js"></script>
13
14 </head>
15
16 <body>
17
18 <div class="tabel">
19 <table id="Tabel_01" width="1018" height="554" border="0" cellpadding="0" cellspacing="0">
20 <tr>
21 <td width="1018" height="170" colspan="2" background="afbeeldingen/index_01.jpg"><p> </p>
22 <p> </p></td>
23 </tr>
24 <tr>
25 <td width="258" height="595" background="afbeeldingen/index_02.jpg" valign="top"><p> </p>
26
27 <ul id="nav">
28 <li><a href="index.php?pag=index">Home</a>
29 <ul>
30 <li><a href="index.php?pag=overons">Over ons</a></li>
31 <li><a href="index.php?pag=nieuws">Nieuws</a></li>
32 <li><a href="index.php?pag=openingstijden">Openingstijden</a></li>
33 <li><a href="index.php?pag=acties">Acties</a></li>
34
35 </ul>
36 </li>
37 <li><a href="index.php?pag=autowassen">Auto wassen</a>
38 <ul>
39 <li><a href="index.php?pag=programma">Programma's</a></li>
40 <li><a href="index.php?pag=happyhour">Happy hour</a></li>
41 <li><a href="index.php?pag=abonnementen">Abonnementen</a></li>
42
43 <li><a href="index.php?pag=prepaid">Pre paid</a></li>
44 <li><a href="index.php?pag=dewaspas">de waspas</a></li>
45 <li><a href="index.php?pag=vip">VIP behandeling</a></li>
46 </ul>
47 </li>
48 <li><a href="index.php?pag=wasbox">Wasbox</a>
49 <ul>
50
51 <li><a href="index.php?pag=prgrammawasbox">Programma's</a></li>
52 <li><a href="index.php?pag=boxxen">boxxen</a></li>
53 <li><a href="index.php?pag=stofzuigen">Stofzuigen</a></li>
54 <li><a href="index.php?pag=doekjesautomaat">Doekjes automaat</a></li>
55 <li><a href="index.php?pag=shopartikelen">Shop artikelen</a></li>
56 </ul>
57
58 </li>
59 <li><a href="index.php?pag=autopoetsen">Auto poetsen</a>
60 <ul>
61 <li><a href="index.php?pag=mogelijkheden">Mogelijkheden</a></li>
62 <li><a href="index.php?pag=polijsten">Polijsten</a></li>
63 <li><a href="index.php?pag=waxen">Waxen</a></li>
64 <li><a href="index.php?pag=lakpantser">Lakpantser</a></li>
65
66 <li><a href="index.php?pag=interieur">Interieur</a></li>
67 <li><a href="index.php?pag=prijzen">Prijzen</a></li>
68 </ul>
69 </li>
70 <li><a href="index.php?pag=contact">Contact</a>
71 <ul>
72 <li><a href="index.php?pag=mailform">Mailformulier</a></li>
73
74 <li><a href="index.php?pag=route">Routekaartjes</a></li>
75 </ul>
76 </li>
77 <li><a href="index.php?pag=tuning">Tuning</a></li>
78 <li><a href="index.php?pag=vacature">Vacature</a></li>
79 <li><a href="index.php?pag=restyling">Restyling</a></li>
80 </ul></td>
81
82 <td width="760" height="595" background="afbeeldingen/index_03.jpg" valign="top"><div class="content"> </div></td>
83 </tr>
84
85
86 <tr>
87
88 <td width="1018" height="3" colspan="2">
89 <div class="footer">
90 </div>
91 </td>
92
93 </tr>
94
95 </table>
96 </div>
97
98
99 </body>
100 </html
De CSS code:
1 body {
2 behavior:url("csshover.htc");
3 }
4
5
6 /*Als je het menu nu zou bekijken, zie je een opsommingslijst met allemaal bolletjes. In de eerste stap willen we deze weg hebben*/
7 ul {
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 border-bottom: 1px solid #000000;
12 width: 105px;
13 z-index: 5;
14 float: right;
15 }
16 /*De dikte van het menu zal hier 150 pixels zijn, en de boord onderaan zwart.
17 De Z-index heb is op 5 gezet, dit is om te vermijden dat het menu verdwijnt onder de tekst, afbeeldingen ernaast. Steeds opnieuw in de volgende delen zul je dit zien.
18
19 Plaats nu de volgende code, deze is om de positie aan te geven.*/
20 ul li {
21 position: relative;
22 z-index: 5;
23 top: 0px;
24 }
25
26
27 /*Nog steeds zijn we niet veel met ons menu, want we zien nu een lijst waarin de submenu's uitspringen. Wij willen namelijk dat als we er over gaan, dat ze uit geschoven worden. De code hieronder is daar al een eerste stap naar*/
28 li ul {
29 position: absolute;
30 left: 104px;
31 top: 0;
32 display: none;
33 z-index: 10;
34 }
35 /*Wat opvalt in de code hierboven is dat we de positie van de submenu's 1 pixel minder hebben gezet dan de dikte van het menu. Dit is noodzakelijk om het menu mooi te laten aansluiten.
36
37
38 Laten we nu eens het menu een mooi kleurtje geven en rondom de menu-items een rechthoekje plaatsen. Dit zal al mooier overkomen:*/
39 ul li a {
40 display: block;
41 text-decoration: none;
42 color: #FFFFFF;
43 padding: 5px;
44 border: 1px solid #000000;
45 border-bottom: 0;
46 z-index: 10;
47 background-color: #e3001b;
48 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
49 font-size: 12px;
50 text-align: left;
51 }
52
53 ul li a:hover {
54 color: red;
55 background-color: #666666;
56 }
57
58
59 /*Er zijn in Internet Explorer nu al een paar probleempjes, deze kan je met volgende code verhelpen*/
60 * html ul li { float: left; height: 1%; }
61 * html ul li a { height: 1%; }
62
63
64 /*Om de submenu's te laten uitklappen plaats je volgende code*/
65 li:hover ul { display: block; }
66
67
68 /*Plaats voor de hover nog even volgende code:*/
69 li:hover ul, li.over ul {
70 display: block; }
Probleem is dat er niet mogelijk is om de sub menu's in IE 7 aan te klikken, in FF en IE6 werkt het wel goed. Schijnt te maken te hebben wat ik al ge googled en geGoT heb met dat er tekst staat.
Ik heb geprobeerd om de code tag te gebruiken, maar niet helemaal gelukt....
Mijn index bestand:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
8 <title>Concept</title>
9
10 <link rel="stylesheet" type="text/css" media="screen" href="dewasdas.css" />
11 <link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
12 <script type="text/javascript" src="menu.js"></script>
13
14 </head>
15
16 <body>
17
18 <div class="tabel">
19 <table id="Tabel_01" width="1018" height="554" border="0" cellpadding="0" cellspacing="0">
20 <tr>
21 <td width="1018" height="170" colspan="2" background="afbeeldingen/index_01.jpg"><p> </p>
22 <p> </p></td>
23 </tr>
24 <tr>
25 <td width="258" height="595" background="afbeeldingen/index_02.jpg" valign="top"><p> </p>
26
27 <ul id="nav">
28 <li><a href="index.php?pag=index">Home</a>
29 <ul>
30 <li><a href="index.php?pag=overons">Over ons</a></li>
31 <li><a href="index.php?pag=nieuws">Nieuws</a></li>
32 <li><a href="index.php?pag=openingstijden">Openingstijden</a></li>
33 <li><a href="index.php?pag=acties">Acties</a></li>
34
35 </ul>
36 </li>
37 <li><a href="index.php?pag=autowassen">Auto wassen</a>
38 <ul>
39 <li><a href="index.php?pag=programma">Programma's</a></li>
40 <li><a href="index.php?pag=happyhour">Happy hour</a></li>
41 <li><a href="index.php?pag=abonnementen">Abonnementen</a></li>
42
43 <li><a href="index.php?pag=prepaid">Pre paid</a></li>
44 <li><a href="index.php?pag=dewaspas">de waspas</a></li>
45 <li><a href="index.php?pag=vip">VIP behandeling</a></li>
46 </ul>
47 </li>
48 <li><a href="index.php?pag=wasbox">Wasbox</a>
49 <ul>
50
51 <li><a href="index.php?pag=prgrammawasbox">Programma's</a></li>
52 <li><a href="index.php?pag=boxxen">boxxen</a></li>
53 <li><a href="index.php?pag=stofzuigen">Stofzuigen</a></li>
54 <li><a href="index.php?pag=doekjesautomaat">Doekjes automaat</a></li>
55 <li><a href="index.php?pag=shopartikelen">Shop artikelen</a></li>
56 </ul>
57
58 </li>
59 <li><a href="index.php?pag=autopoetsen">Auto poetsen</a>
60 <ul>
61 <li><a href="index.php?pag=mogelijkheden">Mogelijkheden</a></li>
62 <li><a href="index.php?pag=polijsten">Polijsten</a></li>
63 <li><a href="index.php?pag=waxen">Waxen</a></li>
64 <li><a href="index.php?pag=lakpantser">Lakpantser</a></li>
65
66 <li><a href="index.php?pag=interieur">Interieur</a></li>
67 <li><a href="index.php?pag=prijzen">Prijzen</a></li>
68 </ul>
69 </li>
70 <li><a href="index.php?pag=contact">Contact</a>
71 <ul>
72 <li><a href="index.php?pag=mailform">Mailformulier</a></li>
73
74 <li><a href="index.php?pag=route">Routekaartjes</a></li>
75 </ul>
76 </li>
77 <li><a href="index.php?pag=tuning">Tuning</a></li>
78 <li><a href="index.php?pag=vacature">Vacature</a></li>
79 <li><a href="index.php?pag=restyling">Restyling</a></li>
80 </ul></td>
81
82 <td width="760" height="595" background="afbeeldingen/index_03.jpg" valign="top"><div class="content"> </div></td>
83 </tr>
84
85
86 <tr>
87
88 <td width="1018" height="3" colspan="2">
89 <div class="footer">
90 </div>
91 </td>
92
93 </tr>
94
95 </table>
96 </div>
97
98
99 </body>
100 </html
De CSS code:
1 body {
2 behavior:url("csshover.htc");
3 }
4
5
6 /*Als je het menu nu zou bekijken, zie je een opsommingslijst met allemaal bolletjes. In de eerste stap willen we deze weg hebben*/
7 ul {
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 border-bottom: 1px solid #000000;
12 width: 105px;
13 z-index: 5;
14 float: right;
15 }
16 /*De dikte van het menu zal hier 150 pixels zijn, en de boord onderaan zwart.
17 De Z-index heb is op 5 gezet, dit is om te vermijden dat het menu verdwijnt onder de tekst, afbeeldingen ernaast. Steeds opnieuw in de volgende delen zul je dit zien.
18
19 Plaats nu de volgende code, deze is om de positie aan te geven.*/
20 ul li {
21 position: relative;
22 z-index: 5;
23 top: 0px;
24 }
25
26
27 /*Nog steeds zijn we niet veel met ons menu, want we zien nu een lijst waarin de submenu's uitspringen. Wij willen namelijk dat als we er over gaan, dat ze uit geschoven worden. De code hieronder is daar al een eerste stap naar*/
28 li ul {
29 position: absolute;
30 left: 104px;
31 top: 0;
32 display: none;
33 z-index: 10;
34 }
35 /*Wat opvalt in de code hierboven is dat we de positie van de submenu's 1 pixel minder hebben gezet dan de dikte van het menu. Dit is noodzakelijk om het menu mooi te laten aansluiten.
36
37
38 Laten we nu eens het menu een mooi kleurtje geven en rondom de menu-items een rechthoekje plaatsen. Dit zal al mooier overkomen:*/
39 ul li a {
40 display: block;
41 text-decoration: none;
42 color: #FFFFFF;
43 padding: 5px;
44 border: 1px solid #000000;
45 border-bottom: 0;
46 z-index: 10;
47 background-color: #e3001b;
48 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
49 font-size: 12px;
50 text-align: left;
51 }
52
53 ul li a:hover {
54 color: red;
55 background-color: #666666;
56 }
57
58
59 /*Er zijn in Internet Explorer nu al een paar probleempjes, deze kan je met volgende code verhelpen*/
60 * html ul li { float: left; height: 1%; }
61 * html ul li a { height: 1%; }
62
63
64 /*Om de submenu's te laten uitklappen plaats je volgende code*/
65 li:hover ul { display: block; }
66
67
68 /*Plaats voor de hover nog even volgende code:*/
69 li:hover ul, li.over ul {
70 display: block; }
| Apple iMac 27" 2012 | Apple McBook Pro 13" 2010 | qnap ts-112 |
/u/7685/ruinmytune-60x60.png?f=community)
Dit topic is gesloten.