Virusscanner tips?
[OPGELOST] probleempje met CSS opmaak
Ik weet niet of mijn vraag hier thuis hoort, maar wellicht kan iemand me op weg helpen.
Ik heb een stukje css code en ik kan er maar niet uit komen waarom er een bepaalde ruimte zit tussen twee elementen.
stukje html5
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<header>
<nav>
<ul>
... etc ...
</ul>
</nav>
</header>
<nav>
<ul>
... etc ...
</ul>
</nav>
</header>
de bijbehorende css opmaak is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
header{
position: relative;
border-bottom: 1px solid orange;
margin: 0;
padding: 0;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 10px;
}
header nav{
display: inline-block;
// margin-bottom: -2px;
width: 100%;
padding: 0;
}
header nav ul{
list-style: none;
margin-left: -8px;
padding-left: 8px;
}
position: relative;
border-bottom: 1px solid orange;
margin: 0;
padding: 0;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 10px;
}
header nav{
display: inline-block;
// margin-bottom: -2px;
width: 100%;
padding: 0;
}
header nav ul{
list-style: none;
margin-left: -8px;
padding-left: 8px;
}
Nu zou ik denken dat het nav-block dezelfde hoogte zou hebben als het header-block. Maar helaas, daar blijkt een paar px verschil in te zitten.
Het header-block blijkt de (binnen) afmeting van 965x19 te hebben, de nav 965x16. En het verschil zit in de onderkant. Nu kan ik dat wel oplossen met een margin-bottom:-3px; maar dat vindt ik niet echt een mooie oplossing. Zekern niet omdat in niet weet waar het verschil door wordt veroorzaakt.
Heeft iemand enig idee waarom?
Toevoeging op 11/04/2016 15:15:53:
48 gluurders maar helaas nog geen enkele reactie ;)
Gewijzigd op 12/04/2016 16:37:25 door J opla
Code (php)
1
// margin-bottom: -2px;
Ik gebruik zelf altijd /* .. */
Inderdaad, je hebt helemaal gelijk, maar dit is bij het testen sneller en Firefox slikt het. Maar het is het probleem niet. Ook zonder de // heb ik de genoemde ruimte.
Daar zit een inspector bij, daarmee kan je over elementen heen gaan, ze selecteren en de paddings, margins en overige css properties bekijken.
Gewijzigd op 11/04/2016 16:33:51 door j opla
Wat zou je willen zien dat invloed kan hebben?
Ik snap niet helemaal wat de bedoeling is van dat fiddle, maar als je de totale code wilt inzien, stuur me dan een pm dan stuur ik je de 2 bestanden wel.
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
/* -----------------------------------------------------------
algemeen
----------------------------------------------------------- */
body {
color: orange;
font-family: verdana, sans-serif;
font-size: 1em;
background-color: #1A1A1A;
padding: 0;
margin: 0;
}
div {
margin: 0;
padding: 0;
}
a {
color: orange;
text-decoration: none;
/* font-size: 1em;*/
}
a:hover, a:focus {
/* font-weight: bold;*/
}
a:active {
/* font-size: 100%;*/
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
margin: 0;
padding: 0;}
h1{
font-size: 1.8em;
line-height: 1.2em;
text-align: center;
letter-spacing: 0.35em;
}
h2{
font-size: 1.2em;
}
h3{
font-size: 1.2em;
text-align: center;}
img{
border-style: none;
border-width: 0;
}
#box{
width: 965px;
}
@media screen and (min-width:965px) and (min-height:650px){
#box{
margin: 0;
padding: 0;
/* width: 965px;*/
/* height: 638px;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin: -319px 0 0 -483px;*/
/* outline: 1px red solid;*/
}
}
/*
+----------------------------------------------------------
| HOOFDNAVIGATIEMENU
+----------------------------------------------------------
*/
header{
position: relative;
border-bottom: 1px solid orange;
margin: 0;
padding: 0;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 10px;
}
header nav{
display: inline-block;
/* margin-bottom: -3px;*/
width: 100%;
padding: 0;
}
header nav ul{
list-style: none;
margin-left: -8px;
padding-left: 8px;
}
header nav li{
float: left;
position: relative;
bottom: 0;
}
header nav li.taal{
float: right;
}
header nav li a {
display: block;
bottom: 0;
padding: 0 15px 0 0;
}
header nav li.taal a{
padding: 0 0 0 15px;
}
header nav li.huidig a {
font-weight: bold;
border-bottom: 3px solid orange;
padding-right: 13px;
margin-right: 2px;
// margin-bottom: -1px;
}
header nav li a:hover {
color: red;
}
</style>
<title></title>
</head>
<body>
<header>
<nav>
<ul>
<li class="huidig">
<a href="#">THUIS</a>
</li>
<li>
<a href="#">GENEALOGIE</a>
</li>
<li>
<a href="#">MEGALIETEN</a>
</li>
<li>
<a href="#">COLUMNS</a>
</li>
<li>
<a href="#">PRIVE</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
<li class="taal">
<span title="Pools"><a lang="pl" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=pl&u=">pl</a></span>
</li>
<li class="taal">
<span title="Engels"><a lang="en" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=en&u=">en</a></span>
</li>
</ul>
</nav>
</header>
</body>
</html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
/* -----------------------------------------------------------
algemeen
----------------------------------------------------------- */
body {
color: orange;
font-family: verdana, sans-serif;
font-size: 1em;
background-color: #1A1A1A;
padding: 0;
margin: 0;
}
div {
margin: 0;
padding: 0;
}
a {
color: orange;
text-decoration: none;
/* font-size: 1em;*/
}
a:hover, a:focus {
/* font-weight: bold;*/
}
a:active {
/* font-size: 100%;*/
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
margin: 0;
padding: 0;}
h1{
font-size: 1.8em;
line-height: 1.2em;
text-align: center;
letter-spacing: 0.35em;
}
h2{
font-size: 1.2em;
}
h3{
font-size: 1.2em;
text-align: center;}
img{
border-style: none;
border-width: 0;
}
#box{
width: 965px;
}
@media screen and (min-width:965px) and (min-height:650px){
#box{
margin: 0;
padding: 0;
/* width: 965px;*/
/* height: 638px;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin: -319px 0 0 -483px;*/
/* outline: 1px red solid;*/
}
}
/*
+----------------------------------------------------------
| HOOFDNAVIGATIEMENU
+----------------------------------------------------------
*/
header{
position: relative;
border-bottom: 1px solid orange;
margin: 0;
padding: 0;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 10px;
}
header nav{
display: inline-block;
/* margin-bottom: -3px;*/
width: 100%;
padding: 0;
}
header nav ul{
list-style: none;
margin-left: -8px;
padding-left: 8px;
}
header nav li{
float: left;
position: relative;
bottom: 0;
}
header nav li.taal{
float: right;
}
header nav li a {
display: block;
bottom: 0;
padding: 0 15px 0 0;
}
header nav li.taal a{
padding: 0 0 0 15px;
}
header nav li.huidig a {
font-weight: bold;
border-bottom: 3px solid orange;
padding-right: 13px;
margin-right: 2px;
// margin-bottom: -1px;
}
header nav li a:hover {
color: red;
}
</style>
<title></title>
</head>
<body>
<header>
<nav>
<ul>
<li class="huidig">
<a href="#">THUIS</a>
</li>
<li>
<a href="#">GENEALOGIE</a>
</li>
<li>
<a href="#">MEGALIETEN</a>
</li>
<li>
<a href="#">COLUMNS</a>
</li>
<li>
<a href="#">PRIVE</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
<li class="taal">
<span title="Pools"><a lang="pl" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=pl&u=">pl</a></span>
</li>
<li class="taal">
<span title="Engels"><a lang="en" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=en&u=">en</a></span>
</li>
</ul>
</nav>
</header>
</body>
</html>
Gewijzigd op 11/04/2016 21:54:55 door Jan de Laet
Ja, zo gaat het wel goed.
@Allen:
Ik denk dat ik de oorzaak heb gevonden, maar nu de oplossing nog. Als ik in het document van Jan
Code (php)
1
<!DOCTYPE html>
toevoeg dan krijg je ook weer het verschil tussen de afmeting van de <nav> en de <header>.
Maar om correct html5 te schrijven moet je volgens mij met de <!DOCTYPE html> beginnen. Is dit een bug?
toevoeging: als je in fiddle voor een HTML4.01 Transitional kiest, dan verdwijnt ook de marge van 3 px
Gewijzigd op 12/04/2016 13:15:36 door j opla
Dan moet je wel een paar CSS regels van <header> verplaatsen naar <nav>, zoals border en font-size.
Dan werkt het volgens mij ook met je DOCTYPE declaratie.
Ik snap niet helemaal wat je bedoelt.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<body>
<nav>
<ul>
<li class="huidig">
<a href="#">THUIS</a>
</li>
<li>
...
<nav>
<ul>
<li class="huidig">
<a href="#">THUIS</a>
</li>
<li>
...
Dus header heb ik hier verwijderd.
In je CSS moet je een aantal keer "header nav" vervangen door "nav" en een paar CSS regels van header naar nav verplaatsen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
nav{
display: inline-block;
font-size: 10px;
border-bottom: 1px solid orange;
width: 100%;
padding: 0;
}
display: inline-block;
font-size: 10px;
border-bottom: 1px solid orange;
width: 100%;
padding: 0;
}
De header box is 24 px hoog, de nav is 15+1+5=21 px. Of wil je dat ik de hele header weg haal, maar dan schrijf je eigenlijk geen goede code heb ik begrepen ...
Gewijzigd op 12/04/2016 13:50:42 door j opla
nav hoeft niet perse in header volgens mij.
Hier de hele body:
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
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
<body>
<nav>
<ul>
<li class="huidig">
<a href="#">THUIS</a>
</li>
<li>
<a href="#">GENEALOGIE</a>
</li>
<li>
<a href="#">MEGALIETEN</a>
</li>
<li>
<a href="#">COLUMNS</a>
</li>
<li>
<a href="#">PRIVE</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
<li class="taal">
<span title="Pools"><a lang="pl" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=pl&u=">pl</a></span>
</li>
<li class="taal">
<span title="Engels"><a lang="en" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=en&u=">en</a></span>
</li>
</ul>
</nav>
</body>
<nav>
<ul>
<li class="huidig">
<a href="#">THUIS</a>
</li>
<li>
<a href="#">GENEALOGIE</a>
</li>
<li>
<a href="#">MEGALIETEN</a>
</li>
<li>
<a href="#">COLUMNS</a>
</li>
<li>
<a href="#">PRIVE</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
<li class="taal">
<span title="Pools"><a lang="pl" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=pl&u=">pl</a></span>
</li>
<li class="taal">
<span title="Engels"><a lang="en" href="https://translate.google.nl/translate?hl=nl&sl=nl&tl=en&u=">en</a></span>
</li>
</ul>
</nav>
</body>
Gewijzigd op 12/04/2016 13:54:22 door Jan de Laet
De vraag was eigenlijk ook: hoe komt die 3 px verschil. Het lijkt een beetje op een bug in de HTML5 code interpretatie want als ik voor HTML4.01 Trans kies dan interpreteert de browser het wel zoals ik verwacht. Of zie ik iets anders over het hoofd?
Wat je allemaal in CSS moet veranderen kan ik natuurlijk niet overzien, maar voor zover je voorbeeld gaat hoef je alleen "header nav" regels te vervangen door "nav". En dat kan met een goede editor heel snel.
Toevoeging op 12/04/2016 14:08:28:
Ik zie nu dat je eventueel ook alles kunt laten zoals het was, maar de volgende regel in CSS van header naar nav verplaatsen
Code (php)
1
border-bottom: 1px solid orange;