Css navBar inline probleem
Wat klopt er niet aan deze code? Wat kan ik beter anders neerzetten? En wat moet erbij, zodat het wordt zoals ik wil?
Het valt te vergelijken met het menu van: http://webtraders.nl/ (2de afbeelding hier)
Bovenste afbeelding is mijn hover, dus alles rood. De onderste is zoals ik het hebben wil.
#navBar{
display: block;
position: relative;
z-index: 10px;
height: 45px;
color: white;
background: #00c9fc;
-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
unselectable: on;
background: #0078c9;
}
#navBar ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
list-style-type:none;
margin:0;
padding:0;
float: right;
margin-right: 250px;
margin-top: 10px;
word-spacing:15px;
}
#navBar li{
display:inline;
}
#navBar ul:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
list-style-type:none;
margin:0;
padding:0;
float: right;
margin-right: 250px;
margin-top: 10px;
word-spacing:15px;
color: red;
}
Gewijzigd op 29/02/2012 23:54:13 door M grootveld
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
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
#navBar {
display: block;
position: relative;
z-index: 10;
height: 45px;
color: white;
background: #00c9fc;
-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
unselectable: on;
background: #0078c9;
}
#navBar ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
word-spacing:15px;
float: right;
margin-right: 50px;
list-style: none;
}
#navBar ul li {
float: left;
height: 46px;
margin: 0 0 0 4px;
padding: 0;
position: relative;
}
/* Normale link kleur */
#navBar ul li a {
color: #FFFFFF;
display: block;
font-size: 14px;
height: 25px;
line-height: 26px;
margin-top: 10px;
padding: 0 10px;
text-transform: uppercase;
}
/* Hover kleur */
#navBar ul li a:hover {
color: #000;
display: block;
font-size: 14px;
height: 25px;
line-height: 26px;
margin-top: 10px;
padding: 0 10px;
text-transform: uppercase;
border: 0px solid #F00;
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
}
/* Active link kleur */
#navBar ul li.active a {
background-color: #FFFFFF;
border-radius: 12px 12px 12px 12px;
color: #E11E28;
}
display: block;
position: relative;
z-index: 10;
height: 45px;
color: white;
background: #00c9fc;
-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
unselectable: on;
background: #0078c9;
}
#navBar ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
word-spacing:15px;
float: right;
margin-right: 50px;
list-style: none;
}
#navBar ul li {
float: left;
height: 46px;
margin: 0 0 0 4px;
padding: 0;
position: relative;
}
/* Normale link kleur */
#navBar ul li a {
color: #FFFFFF;
display: block;
font-size: 14px;
height: 25px;
line-height: 26px;
margin-top: 10px;
padding: 0 10px;
text-transform: uppercase;
}
/* Hover kleur */
#navBar ul li a:hover {
color: #000;
display: block;
font-size: 14px;
height: 25px;
line-height: 26px;
margin-top: 10px;
padding: 0 10px;
text-transform: uppercase;
border: 0px solid #F00;
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
}
/* Active link kleur */
#navBar ul li.active a {
background-color: #FFFFFF;
border-radius: 12px 12px 12px 12px;
color: #E11E28;
}