margin/padding? of iets anders?
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
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
/*header*/
#header {
width: 100%;
height: 200px;
padding-top: 20px;
background-color: #121212;
}
/*personal*/
#personal {
margin: 0 auto 0 auto;
width : 700px;
height : 140px;
}
/*logo*/
#logo {
float: left;
width: 250px;
height: 100%;
margin: 0 auto 10px auto;
border-left: 2px dashed white;
}
#logo h1,h2 {
color : #DD462D;
margin-left: 10px;
text-shadow: red 0 0 5px;
}
#logo h1 {
font-size: 60pt;
}
/*quotes*/
#quotes {
float : left;
width : 430px;
height : 100%;
color : #9E9E9E;
overflow : hidden;
}
#quotes ul {
width : 10000px;
}
#quotes li {
list-style-type : none;
text-align : center;
}
/*navigation*/
#nav ul{
width: 100%;
height: 59px;
border-top: 2px dashed #DD462D;
}
#nav li:first-child {
clear : left;
}
#nav li {
list-style-type: none;
text-align: center;
float: left;
width: 25%;
height: 59px;
line-height: 59px;
color : white;
margin : 0;
}
#nav li:hover {
background-color: #DD462D;
color: black;
}
#header {
width: 100%;
height: 200px;
padding-top: 20px;
background-color: #121212;
}
/*personal*/
#personal {
margin: 0 auto 0 auto;
width : 700px;
height : 140px;
}
/*logo*/
#logo {
float: left;
width: 250px;
height: 100%;
margin: 0 auto 10px auto;
border-left: 2px dashed white;
}
#logo h1,h2 {
color : #DD462D;
margin-left: 10px;
text-shadow: red 0 0 5px;
}
#logo h1 {
font-size: 60pt;
}
/*quotes*/
#quotes {
float : left;
width : 430px;
height : 100%;
color : #9E9E9E;
overflow : hidden;
}
#quotes ul {
width : 10000px;
}
#quotes li {
list-style-type : none;
text-align : center;
}
/*navigation*/
#nav ul{
width: 100%;
height: 59px;
border-top: 2px dashed #DD462D;
}
#nav li:first-child {
clear : left;
}
#nav li {
list-style-type: none;
text-align: center;
float: left;
width: 25%;
height: 59px;
line-height: 59px;
color : white;
margin : 0;
}
#nav li:hover {
background-color: #DD462D;
color: black;
}
Kun je heel eenvoudig met je site stoeien en kijken wat waar effect op heeft.
Dit lijkt samen te hangen met line-height: 59px; in #nav li
Ik heb alle properties van li en ul nu uitgezet en alles rustig opgebouwd. Dan zie je dat het probleem ligt bij de width: 25%; van de li. Vervolgens ben ik erachter gekomen dat de hele ul gewoon eigenlijk op deze manier verkeerd staat, vandaar ook die clear: left; die daar zo vreemd hoort. Haal die clear: left; weg bij de li en voeg bij de ul float: left; toe. Dan werkt het.