Codeblok (style.css):
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
#top-bar {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #6485B4 0%, #103869 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #6485B4 0%, #103869 100%);
/* Opera */
background-image: -o-linear-gradient(top, #6485B4 0%, #103869 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6485B4), color-stop(1, #103869));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #6485B4 0%, #103869 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #6485B4 0%, #103869 100%);
height: 75px;
margin-bottom: 29px;
width: 80%;
margin: 0 auto;
border-radius: 5px;
}
#top-bar ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
margin-top: 0px;
}
#top-bar ul li {
float: left;
height: 75px;
text-align: center;
background: url(img/scheiding.gif) right center no-repeat;
}
#top-bar ul li a {
padding: 15px 20px 18px 15px;
display: block; text-decoration: none;
color: #FFF;
font-weight: bold;
margin-top: 11px;
height: 40px;
}
#top-bar ul li a:hover {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
margin-top: 0px;
}
#logo {
color: #103869;
font-size: 29px;
margin-left: 10%;
margin-top: 50px;
margin-bottom: 50px;
}
body {
margin: 0px;
background-color: #f5f5f5;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;e
font-weight: 300;
}
Ik heb een hover zoals je ziet, maar als de hover geactiveerd word, gaat de tekst omhoog.
De schaduw doet het wel fatsoenlijk, maar de tekst niet.
Weet iemand hoe ik dat kan fixen?
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
#top-bar {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #6485B4 0%, #103869 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #6485B4 0%, #103869 100%);
/* Opera */
background-image: -o-linear-gradient(top, #6485B4 0%, #103869 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6485B4), color-stop(1, #103869));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #6485B4 0%, #103869 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #6485B4 0%, #103869 100%);
height: 75px;
margin-bottom: 29px;
width: 80%;
margin: 0 auto;
border-radius: 5px;
}
#top-bar ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
margin-top: 0px;
}
#top-bar ul li {
float: left;
height: 75px;
text-align: center;
background: url(img/scheiding.gif) right center no-repeat;
}
#top-bar ul li a {
padding: 15px 20px 18px 15px;
display: block; text-decoration: none;
color: #FFF;
font-weight: bold;
margin-top: 11px;
height: 40px;
}
#top-bar ul li a:hover {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
margin-top: 0px;
}
#logo {
color: #103869;
font-size: 29px;
margin-left: 10%;
margin-top: 50px;
margin-bottom: 50px;
}
body {
margin: 0px;
background-color: #f5f5f5;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;e
font-weight: 300;
}
Ik heb een hover zoals je ziet, maar als de hover geactiveerd word, gaat de tekst omhoog.
De schaduw doet het wel fatsoenlijk, maar de tekst niet.
Weet iemand hoe ik dat kan fixen?

, maar t was voor t voorbeeld