:strip_exif()/u/4149/hond.gif?f=community)
Hoi,
Ik ben op dit moment bezig met een menu dat is opgebouwd uit verschillende tabbladen. Dit werkt op zich allemaal correct, behalve voor de actieve tab. Het ontwerp van de site heeft namelijk overal een 3D border omheen zitten, en dat sluit (natuurlijk) niet echt aan op de tabs die ik nu heb. Wat ik nu eigenlijk wil is het volgende:
en ik heb nu dit:
De gifjes die de tab opmaken zijn op hoogte van de horizontale balk wel voorzien van de afbuigingen naar links en rechts, maar deze ligt nu dus qua niveau achter de getoonde horizontale balk. Nu hebben de tabs een z-index van 10, de horizontale balk ook (en de div waar deze inzit ook), en de actieve tab geeft ik nu een z-index van 20 mee. Maar deze komt dus niet over de bovenste horizontale balk te liggen...
Het vreemde is wel: ik heb het in IE werkend gehad door (bijna) overal de position: relative/absolute weg te halen, maar dat wilde in Firefox niet helpen...
Dus, iemand die mij aan de geniale ingeving kan helpen om zo het tabblad 'li.itemOn' boven de 'div.boven' te krijgen?
De CSS:
De HTML:
Ik ben op dit moment bezig met een menu dat is opgebouwd uit verschillende tabbladen. Dit werkt op zich allemaal correct, behalve voor de actieve tab. Het ontwerp van de site heeft namelijk overal een 3D border omheen zitten, en dat sluit (natuurlijk) niet echt aan op de tabs die ik nu heb. Wat ik nu eigenlijk wil is het volgende:
en ik heb nu dit:
De gifjes die de tab opmaken zijn op hoogte van de horizontale balk wel voorzien van de afbuigingen naar links en rechts, maar deze ligt nu dus qua niveau achter de getoonde horizontale balk. Nu hebben de tabs een z-index van 10, de horizontale balk ook (en de div waar deze inzit ook), en de actieve tab geeft ik nu een z-index van 20 mee. Maar deze komt dus niet over de bovenste horizontale balk te liggen...
Het vreemde is wel: ik heb het in IE werkend gehad door (bijna) overal de position: relative/absolute weg te halen, maar dat wilde in Firefox niet helpen...
Dus, iemand die mij aan de geniale ingeving kan helpen om zo het tabblad 'li.itemOn' boven de 'div.boven' te krijgen?
De CSS:
Cascading Stylesheet:
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
113
114
115
| div#container { position: relative; width: 999px; margin: 40px auto; z-index: 1; } /* TOP MENU */ ul#mainMenu { position: absolute; top: 0px; left: 0px; height: 150px; list-style-type:none; margin:0; padding:0; width: 100%; overflow: hidden; z-index:10; } ul#mainMenu li { float:left; width:111px; height:75px; vertical-align:bottom; position:relative; z-index: 10; } ul#mainMenu li a { position:absolute; display:block; width:121px; color:#000; font-weight:800; font-size:13px; text-align:center; height:65px; padding-top:15px; margin-top: 15px; left:-10px; z-index:10; } ul#mainMenu li.itemOn { position: relative; z-index:20; } ul#mainMenu li a.itemOn { position: absolute; height:75px; margin-top: 0; z-index:20; } ul#mainMenu li a:hover { height:75px; margin-top: 0; } ul#mainMenu li a.red { background:url(/images/framework/background/BF0000/menutab.gif) left top no-repeat; } ul#mainMenu li a.yellow { background:url(/images/framework/background/FBC100/menutab.gif) left top no-repeat; } ul#mainMenu li a.blue { background:url(/images/framework/background/358DCA/menutab.gif) left top no-repeat; } ul#mainMenu li a.green { background:url(/images/framework/background/97C000/menutab.gif) left top no-repeat; } ul#mainMenu li a.first { left:0; background:url(/images/framework/background/BF0000/menutab-first.gif) left top no-repeat; } ul#mainMenu li a.last { background:url(/images/framework/background/BF0000/menutab-last.gif) left top no-repeat; } /* HEADER */ div#header { position: absolute; top: 65px; left: 0px; height: 160px; width: 999px; z-index: 10; } div.linksboven { position: absolute; top: 0px; left: 0px; width: 10px; height: 10px; background-repeat: no-repeat; z-index: 10; } div.boven { position: absolute; top: 0px; left: 10px; height: 10px; width: 979px; background-repeat: repeat-x; z-index: 10; } div.rechtsboven { position: absolute; top: 0px; left: 989px; width: 10px; height: 10px; background-repeat: no-repeat; z-index: 10; } /* nog veel meer voor de rest van de pagina... */ |
De HTML:
HTML:
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="nl"> <head> <title>Title</title> <link rel="stylesheet" href="/css/main.css" type="text/css" media="screen"> </head> <body> <div id="container"> <ul id="mainMenu"> <li class=""><a class=" red first" href="home_1.html">Home</a></li> <li class=""><a class=" yellow" href="winkel_2.html">Winkel</a></li> <li class=""><a class=" blue" href="nieuws_3.html">Nieuws</a></li> <li class="itemOn"><a class="itemOn green" href="in-de-pers_4.html">In de pers</a></li> <li class=""><a class=" red" href="downloads_5.html">Downloads</a></li> <li class=""><a class=" yellow" href="verkooppunten_6.html">Verkooppunten</a></li> <li class=""><a class=" blue" href="kinderpanel_7.html">Kinderpanel</a></li> <li class=""><a class=" green" href="over-ons_8.html">Over ons</a></li> <li class=""><a class=" red last" href="contact_9.html">Contact</a></li> </ul> <div id="header"> <div class="linksboven" style="background-image: url(images/framework/background/97C000/topleft.gif);"></div> <div class="boven" style="background-image: url(images/framework/background/97C000/top.gif);"></div> <div class="rechtsboven" style="background-image: url(images/framework/background/97C000/topright.gif);"></div> </div> Meer tekst en divjes enzo... </div> |
If nothing is written below, I was the last to reply...
:strip_icc():strip_exif()/u/151534/crop5a48e625630a0_cropped.jpeg?f=community)
:strip_exif()/u/39469/calvingot.gif?f=community)