Probleem CSS Dropdown Menu
Ik heb al vanalles geprobeerd maar kom er niet uit.
Probleem 1
Wanneer het menu uitvouwt over een link werkt het niet meer. Het menu schiet dan terug (Safari, Opera, mobiel)
Probleem 2
Wanneer ik gebruik maak van een gradient wordt de tekst niet goed weergegeven in IE8. De andere browsers wel.
Code menu
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<style>
.dd_menu {background: transparant; padding:0px; margin:0 0 0px 0; list-style-type:none; height:25px;}
.dd_menu li {float:left; height:25px; border-right: solid 0px white;}
.dd_menu li a {padding:5px 10px; display:block; color:#000; text-decoration:none; font: 12px arial, verdana, sans-serif; font-weight: bold}
.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none; z-index:1;}
.dd_menu li:hover {position:relative; background: #ccc;}
.dd_menu li:hover ul {left:0px; top:25px; background:#ccc; padding:3px; border:1px solid #ccc; width:158px;}
.dd_menu li:hover ul li {height:18px; border:none;}
.dd_menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:158px; line-height:18px; text-indent:5px; color:#000; background-color:#ccc; text-decoration:none; border:1px solid transparent;}
.dd_menu li:hover ul li a:hover {height:18px; background:#ccc; color:#f80; border:solid 0px #000;}
</style>
.dd_menu {background: transparant; padding:0px; margin:0 0 0px 0; list-style-type:none; height:25px;}
.dd_menu li {float:left; height:25px; border-right: solid 0px white;}
.dd_menu li a {padding:5px 10px; display:block; color:#000; text-decoration:none; font: 12px arial, verdana, sans-serif; font-weight: bold}
.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none; z-index:1;}
.dd_menu li:hover {position:relative; background: #ccc;}
.dd_menu li:hover ul {left:0px; top:25px; background:#ccc; padding:3px; border:1px solid #ccc; width:158px;}
.dd_menu li:hover ul li {height:18px; border:none;}
.dd_menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:158px; line-height:18px; text-indent:5px; color:#000; background-color:#ccc; text-decoration:none; border:1px solid transparent;}
.dd_menu li:hover ul li a:hover {height:18px; background:#ccc; color:#f80; border:solid 0px #000;}
</style>
Code gradient
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#header_menu {
color: #fff;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, right top, from(#fff), to(#f80), color-stop(0.7, #f80));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(left top, #fff, #f80 70%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FF8000, GradientType=1);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8000, GradientType=1)";
}
</style>
#header_menu {
color: #fff;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, right top, from(#fff), to(#f80), color-stop(0.7, #f80));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(left top, #fff, #f80 70%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FF8000, GradientType=1);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8000, GradientType=1)";
}
</style>
Gewijzigd op 08/05/2012 12:42:37 door Radio Delta
Gewijzigd op 08/05/2012 12:55:37 door Radio Delta
Ook in IE7 doen je links niets (tenzij dit zo bedoeld is), verwijzen naar #nogo(nummer hier) links.
De links zijn nog niet ingegeven op een enkele na.
Eerst wil ik het menu goed werkend hebben.
Gewijzigd op 08/05/2012 13:08:03 door Radio Delta
heb je de code door prefixr gehaald?
Ik heb de nieuwe code geprobeerd maar dat maakt niets uit.
De nieuwe code
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
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
<style>
.dd_menu {
background: transparant;
padding: 0px;
margin: 0 0 0px 0;
list-style-type: none;
height: 25px;
}
.dd_menu li {
float: left;
height: 25px;
border-right: solid 0px white;
}
.dd_menu li a {
padding: 5px 10px;
display: block;
color: #000;
text-decoration: none;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
}
.dd_menu ul {
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
z-index: 1;
}
.dd_menu li:hover {
position: relative;
background: #ccc;
}
.dd_menu li:hover ul {
left: 0px;
top: 25px;
background: #ccc;
padding: 3px;
border: 1px solid #ccc;
width: 158px;
}
.dd_menu li:hover ul li {
height: 18px;
border: none;
}
.dd_menu li:hover ul li a {
height: 18px;
padding: 0px;
display: block;
font-size: 11px;
width: 158px;
line-height: 18px;
text-indent: 5px;
color: #000;
background-color: #ccc;
text-decoration: none;
border: 1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height: 18px;
background: #ccc;
color: #f80;
border: solid 0px #000;
}
</style>
.dd_menu {
background: transparant;
padding: 0px;
margin: 0 0 0px 0;
list-style-type: none;
height: 25px;
}
.dd_menu li {
float: left;
height: 25px;
border-right: solid 0px white;
}
.dd_menu li a {
padding: 5px 10px;
display: block;
color: #000;
text-decoration: none;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
}
.dd_menu ul {
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
z-index: 1;
}
.dd_menu li:hover {
position: relative;
background: #ccc;
}
.dd_menu li:hover ul {
left: 0px;
top: 25px;
background: #ccc;
padding: 3px;
border: 1px solid #ccc;
width: 158px;
}
.dd_menu li:hover ul li {
height: 18px;
border: none;
}
.dd_menu li:hover ul li a {
height: 18px;
padding: 0px;
display: block;
font-size: 11px;
width: 158px;
line-height: 18px;
text-indent: 5px;
color: #000;
background-color: #ccc;
text-decoration: none;
border: 1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height: 18px;
background: #ccc;
color: #f80;
border: solid 0px #000;
}
</style>
Gewijzigd op 08/05/2012 13:45:39 door Radio Delta
De links bij "Over Delta" vallen over de luisterlinks waardoor ze in Safari, Opera en mobiel niet aan te klikken zijn. Hoe kan ik dat oplossen?
Gewijzigd op 08/05/2012 13:52:53 door Radio Delta
Als ik de code er helemaal uit haal werkt het wel. Dus mogelijk zit de fout niet in het menu maar in de gradient.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#header_menu {
/* IE6 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8000, GradientType=1);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8000, GradientType=1)";
/* IE10 */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #FF8000));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
</style>
#header_menu {
/* IE6 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8000, GradientType=1);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#FF8000, GradientType=1)";
/* IE10 */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #FF8000));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FF8000 100%);
</style>
Toevoeging op 09/05/2012 10:19:41:
Nog vanalles geprobeerd maar het is me niet gelukt. Iemand nog een idee hoe ik dit op kan lossen?
Gewijzigd op 08/05/2012 15:48:08 door Radio Delta
Waarom niet gewoon een gradient background als je er zoveel moeite mee hebt en dit blijkbaar perse wilt hebben? Gewoon een png van bijvoorbeeld 5x50px (of net hoe hoog hij moet zijn) en laat he repeaten op de y?
Hoe lang hij nu ook wordt hij zal netjes blijven repeaten. Dit is de 'snelste' oplossing die ik kan verzinnen.
Gewijzigd op 09/05/2012 10:28:32 door Chris PHP
Ik ben daar niet zo handig in. Vond de oplossing voor het gebruiken van een gradient eigenlijk wel makkelijk. Bovendien wordt de afbeelding niet goed weergegeven omdat deze dan horizontaal moet zijn.
Het lijkt er op dat het lettertype veranderd zodra ik een gradient gebruik. Wanneer ik met de muis over het menu heen ga wordt de tekst wel goed weergegeven.
Gewijzigd op 09/05/2012 11:33:22 door Radio Delta
probeer is dit
Code (php)
1
2
3
4
5
6
2
3
4
5
6
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='true',
startColorstr=#A38664, /* hier je eigen startkleur */
endColorstr=#F7F7Eb, /* hier je eigen eindekleur */
gradientype=0
);
enabled='true',
startColorstr=#A38664, /* hier je eigen startkleur */
endColorstr=#F7F7Eb, /* hier je eigen eindekleur */
gradientype=0
);
Ja het is makkelijk echter gaat er 'iets' niet goed. De afbeelding (smal en in de lengte gemaakt) repeat z'n eigen netjes (van links naar rechts). Dus je maakt in Photoshop (of vergelijkbare tool) een lange smalle strook, die vul je met de gradient. Deze stel je in als background en zet je background-repeat: op repeat y en zou het goed moeten gaan.
P.S. Kijk of de oplossing van Reshadd hierboven werkt.
Het werkt nog steeds niet.
Heb al vanalles geprobeerd. Het moet toch in combinatie met een gradient werken?
Toevoeging op 10/05/2012 08:42:13:
Ik heb een nieuwe pagina gemaakt met alleen het menu maar ook dan werkt het niet zodra ik een gradient gebruik.
Ook het andere probleem krijg ik niet opgelost.
Wanneer het menu uitvouwt over een link werkt het niet meer. Het menu schiet dan terug (Safari, Opera, mobiel)
Hoe kan ik dit oplossen of kan ik beter een totaal ander menu gebruiken?
Al vast bedankt.
Heb je mijn voorstel al geprobeerd?
Je bedoelt het plaatje? Dat wordt niet altijd goed weergegeven.
Het is natuurlijk aan jezelf ik geef alleen een tip/oplossing mee.