Help met CSS, misschien een JS probleem?
Ik ben een klein beginnetje gestart met het opnieuw bouwen van mijn website nu heb ik een leuk uitschuifbaar menu volledig aangepast maar een aantal dingetjes lukken mij nog steeds niet, deze dingetjes heb ik aangegeven in het onderstaande plaatje:
Oké de puntjes die ik met jullie wil bespreken:
Het script is in werking te zien op:
http://www.perkele.nl/online/test/menu.htm
Via de broncode is de rest te vinden zoals CSS en JS / hieronder is ook de CSS code te vinden, ik hoop echt dat jullie mij hiermee kunnen helpen .. het gaat natuurlijk slechts om een paar details waarvan ik denk dat deze met een paar simpele CSS strings kunnen opgelost worden. Helaas heb ik deze zelf niet kunnen vinden ook nadat ik het CSS script vele malen heb door geplozen.
Hier is mijn css-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
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
116
117
118
119
120
121
122
123
124
125
126
127
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
116
117
118
119
120
121
122
123
124
125
126
127
.navbar
{
}
.mainDiv
{
width:185px;
border-bottom: 1px solid #000000;
}
.topItem
{
font: 10px Arial;
background: url("spacer.jpg");
border-bottom: 1px solid #000000;
width: 185px;
height: 19px;
color: #000000;
cursor:pointer;
text-indent:10px;
}
.topItemOver
{
text-indent:10px;
font: 10px Arial;
background: url("spacer.jpg");
border-bottom: 1px solid #000000;
height: 19px;
width: 185px;
color: #000000;
cursor:pointer;
}
.topItemClose
{
text-indent:10px;
font: 10px Arial;
background-color:#E7E7E7;
height: 19px;
width: 185px;
color: #000000;
cursor:pointer;
}
.topItemCloseOver
{
font: 10px Arial;
text-indent:10px;
font-family: Arial;
font-size: 10px;
letter-spacing: 0;
background-color:#E7E7E7;
height: 19px;
width: 185px;
color: #000000;
cursor:pointer;
}
.dropMenu
{
background-color: #FFFFFF;
color: #000;
border: 1px solid #FFFFFF;
border-width: 0px 1px 1px 1px;
filter:alpha(opacity=100);
padding-top:0px;
padding-bottom:0px;
}
.subMenu
{
border-bottom: 1px solid #E2E2E2;
margin-bottom:10px;
display:block;
}
.subItem
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
height:19px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #000000;
}
.subItem a
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
text-decoration:none;
color: #000000;
}
.subItemOver
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
height:19px;
background-color: #F2F4E8;
color: #000000;
}
.subItemOver a
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
cursor:pointer;
color: #000000;
text-decoration:none;
cursor:pointer;
}
.drop
{
border-left:1px solid black;
border-right:1px solid black;
}
{
}
.mainDiv
{
width:185px;
border-bottom: 1px solid #000000;
}
.topItem
{
font: 10px Arial;
background: url("spacer.jpg");
border-bottom: 1px solid #000000;
width: 185px;
height: 19px;
color: #000000;
cursor:pointer;
text-indent:10px;
}
.topItemOver
{
text-indent:10px;
font: 10px Arial;
background: url("spacer.jpg");
border-bottom: 1px solid #000000;
height: 19px;
width: 185px;
color: #000000;
cursor:pointer;
}
.topItemClose
{
text-indent:10px;
font: 10px Arial;
background-color:#E7E7E7;
height: 19px;
width: 185px;
color: #000000;
cursor:pointer;
}
.topItemCloseOver
{
font: 10px Arial;
text-indent:10px;
font-family: Arial;
font-size: 10px;
letter-spacing: 0;
background-color:#E7E7E7;
height: 19px;
width: 185px;
color: #000000;
cursor:pointer;
}
.dropMenu
{
background-color: #FFFFFF;
color: #000;
border: 1px solid #FFFFFF;
border-width: 0px 1px 1px 1px;
filter:alpha(opacity=100);
padding-top:0px;
padding-bottom:0px;
}
.subMenu
{
border-bottom: 1px solid #E2E2E2;
margin-bottom:10px;
display:block;
}
.subItem
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
height:19px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #000000;
}
.subItem a
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
text-decoration:none;
color: #000000;
}
.subItemOver
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
height:19px;
background-color: #F2F4E8;
color: #000000;
}
.subItemOver a
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
cursor:pointer;
color: #000000;
text-decoration:none;
cursor:pointer;
}
.drop
{
border-left:1px solid black;
border-right:1px solid black;
}
Code (php)
1
padding-top: 3px;
en misscien de margin-bottom van .subMenu wat minder maken.
Jurgen schreef op 12.07.2007 21:11:
even padding toevoegen op topitem.
en misscien de margin-bottom van .subMenu wat minder maken.
Code (php)
1
padding-top: 3px;
en misscien de margin-bottom van .subMenu wat minder maken.
Even een paar puntjes:
Probeer i.p.v. Javascript een CSS :hover te gebruiken, voorbeeld:
Code (php)
1
2
3
4
2
3
4
a:hover {
color: #FF0000;
}
/*De tekst word rood als men over een <a> heen gaat*/
color: #FF0000;
}
/*De tekst word rood als men over een <a> heen gaat*/
Probeer ervoor te zorgen dat mensen niet op de tekst van de <a> hoeven te klikken, maar ook gewoon op de hele "balk" (subItem), dit doe je door de <a> de grote te geven van de hele "balk" (subItem).
Menu's maak je meestal op met:
Code (php)
1
2
3
4
2
3
4
<ul>
<li><a href="link1.html">Klik 1</a></li>
<li><a href="link2.html">Klik 2</a></li>
</ul>
<li><a href="link1.html">Klik 1</a></li>
<li><a href="link2.html">Klik 2</a></li>
</ul>
Je zou elk submenu zo kunnen opmaken.
Edit:
Je was me voor. Ik ga maar eens een tut schrijven over een normaal menu.
Gewijzigd op 01/01/1970 01:00:00 door - -
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.subItemOver a
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
cursor:pointer;
color: #000000;
text-decoration:none;
cursor:pointer;
}
{
font: 10px Arial;
margin-left:10px;
margin-right:10px;
cursor:pointer;
color: #000000;
text-decoration:none;
cursor:pointer;
}
En als ik de volgende list gebruik om mijn menu te maken:
Code (php)
1
2
3
4
2
3
4
<ul>
<li><a href="link1.html">Klik 1</a></li>
<li><a href="link2.html">Klik 2</a></li>
</ul>
<li><a href="link1.html">Klik 1</a></li>
<li><a href="link2.html">Klik 2</a></li>
</ul>
Wat met ik dan veranderen in de code van de site, is het dan de bedoeling dat ik die code gebruik inplaats van:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Frontpage</a></div>
<div class="subItem"><a href="#">Tweakers</a></div>
<div class="subItem"><a href="#">Kroketten</a></div>
<div class="subItem"><a href="#">Koeien</a></div>
</div>
<div class="subItem"><a href="#">Frontpage</a></div>
<div class="subItem"><a href="#">Tweakers</a></div>
<div class="subItem"><a href="#">Kroketten</a></div>
<div class="subItem"><a href="#">Koeien</a></div>
</div>
Hoop dat jullie me stapje voor stapje hier doorheen kunnen nemen :) want ja! Het moet uiteindelijk wel zo gebruikersvriendelijk mogelijk zijn ;)
En door al deze goodies te verwerken in mijn CSS / webpagina kan ik uiteindelijk de JavaScript file weglaten, of zie ik dit verkeerd?
Andries Louw W. schreef op 12.07.2007 23:39:
Voor een eerste keer doe je het goed!
Even een paar puntjes:
Probeer i.p.v. Javascript een CSS :hover te gebruiken, voorbeeld:
Probeer ervoor te zorgen dat mensen niet op de tekst van de <a> hoeven te klikken, maar ook gewoon op de hele "balk" (subItem), dit doe je door de <a> de grote te geven van de hele "balk" (subItem).
Menu's maak je meestal op met:
Je zou elk submenu zo kunnen opmaken.
Even een paar puntjes:
Probeer i.p.v. Javascript een CSS :hover te gebruiken, voorbeeld:
Code (php)
1
2
3
4
2
3
4
a:hover {
color: #FF0000;
}
/*De tekst word rood als men over een <a> heen gaat*/
color: #FF0000;
}
/*De tekst word rood als men over een <a> heen gaat*/
Probeer ervoor te zorgen dat mensen niet op de tekst van de <a> hoeven te klikken, maar ook gewoon op de hele "balk" (subItem), dit doe je door de <a> de grote te geven van de hele "balk" (subItem).
Menu's maak je meestal op met:
Code (php)
1
2
3
4
2
3
4
<ul>
<li><a href="link1.html">Klik 1</a></li>
<li><a href="link2.html">Klik 2</a></li>
</ul>
<li><a href="link1.html">Klik 1</a></li>
<li><a href="link2.html">Klik 2</a></li>
</ul>
Je zou elk submenu zo kunnen opmaken.