Header bug
Goedenavond,
Ik ben voor mezelf een CMS aan het maken. Echter loop ik tegen een probleem aan waar ik zelf even geen oplossing meer voor zie.
Als ik het logo zoals te zien is op het eerste screenshot: "float: left;" meegeef, krijg ik het resultaat zoals op screenshot 2 te zien is. Oftewel de blauwe achtergrond is weg.
Hopelijk kan iemand mij helpen, ik zie namelijk zelf niet meer hoe ik dit kan oplossen.
Dimitri
Screenshot 1: www.dimitrigeers.nl/bug-1.png
Screenshot 2: www.dimitrigeers.nl/bug-2.png
Ik ben voor mezelf een CMS aan het maken. Echter loop ik tegen een probleem aan waar ik zelf even geen oplossing meer voor zie.
Als ik het logo zoals te zien is op het eerste screenshot: "float: left;" meegeef, krijg ik het resultaat zoals op screenshot 2 te zien is. Oftewel de blauwe achtergrond is weg.
Hopelijk kan iemand mij helpen, ik zie namelijk zelf niet meer hoe ik dit kan oplossen.
Dimitri
Screenshot 1: www.dimitrigeers.nl/bug-1.png
Screenshot 2: www.dimitrigeers.nl/bug-2.png
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
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
<html>
<head>
<title>Dimiti Geers CMS</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="content">
<div id="logo"><img src="images/logo-wit.png" style="width: 100%; height: auto;"></div>
<div id="header-gegevens">
<b>Dimitri Geers</b><br/>
Administrator<br/><br/>
Instellingen | Uitloggen
</div>
</div>
</div>
</body>
</html>
<head>
<title>Dimiti Geers CMS</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="content">
<div id="logo"><img src="images/logo-wit.png" style="width: 100%; height: auto;"></div>
<div id="header-gegevens">
<b>Dimitri Geers</b><br/>
Administrator<br/><br/>
Instellingen | Uitloggen
</div>
</div>
</div>
</body>
</html>
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
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
@font-face {
font-family: 'MavenPro';
src: url('fonts/MavenProLight-200.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body {
padding: 0px;
margin: 0px;
}
#header {
background-color: #3499D5;
width: 100%;
height: auto;
margin: 0px;
}
#header #content {
width: 80%;
height: auto;
clear: both;
margin: 0px auto;
}
#header #content #logo {
width: 30%;
height: auto;
margin-left: 10%;
padding-top: 2.5%;
padding-bottom: 2.5%;
}
#header #content #header-gegevens {
width: 40%;
height: auto;
float: right;
}
font-family: 'MavenPro';
src: url('fonts/MavenProLight-200.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body {
padding: 0px;
margin: 0px;
}
#header {
background-color: #3499D5;
width: 100%;
height: auto;
margin: 0px;
}
#header #content {
width: 80%;
height: auto;
clear: both;
margin: 0px auto;
}
#header #content #logo {
width: 30%;
height: auto;
margin-left: 10%;
padding-top: 2.5%;
padding-bottom: 2.5%;
}
#header #content #header-gegevens {
width: 40%;
height: auto;
float: right;
}
Gewijzigd op 07/07/2015 22:44:45 door Dimitri Geers
Het probleem is dat je een float: left; en een float: right; doet. Wanneer je die float: left; doet dan komen beide divs naast elkaar te staan.
Ik heb hier een voorbeeld gemaakt hoe ik het zou doen: Fiddle
Bovenaan de CSS tot "/* Einde Reset CSS*/" gebruik ik een reset code die de margins van de browsers reset. Dan creeer je automatisch een full width pagina zoals je wilt.
De volledige CSS is hier te vinden: http://meyerweb.com/eric/tools/css/reset/
Edit: Tevens kan je een div id op zich aanspreken bijvoorbeeld "#header-gegevens" ipv "#header #content #header-gegevens".
En sinds HTML5 kan je de header tag gebruiken <header>
Ik heb hier een voorbeeld gemaakt hoe ik het zou doen: Fiddle
Bovenaan de CSS tot "/* Einde Reset CSS*/" gebruik ik een reset code die de margins van de browsers reset. Dan creeer je automatisch een full width pagina zoals je wilt.
De volledige CSS is hier te vinden: http://meyerweb.com/eric/tools/css/reset/
Edit: Tevens kan je een div id op zich aanspreken bijvoorbeeld "#header-gegevens" ipv "#header #content #header-gegevens".
En sinds HTML5 kan je de header tag gebruiken <header>
Gewijzigd op 15/07/2015 18:25:24 door Danny von Gaal
Je kan met veel minder HTML uit de voeten.
Met wat creatief CSS krijg je iets als dit: http://jsfiddle.net/240jha6y/1/
Probeer maar wat te verbreden/versmallen.
Enige wat ik nog niet heb ingebouwd is dat de hoogte gelijk mee gaat met je logo.
PS: nu kan je wel je logo klikbaar maken. Als dat niet hoeft (wel aan te raden), dan kan je hem beter in de achtergrond gooien met een een background-size: contain;
Met wat creatief CSS krijg je iets als dit: http://jsfiddle.net/240jha6y/1/
Probeer maar wat te verbreden/versmallen.
Enige wat ik nog niet heb ingebouwd is dat de hoogte gelijk mee gaat met je logo.
PS: nu kan je wel je logo klikbaar maken. Als dat niet hoeft (wel aan te raden), dan kan je hem beter in de achtergrond gooien met een een background-size: contain;




