header over de volledige breedte v.h. scherm
Nu wil ik eigenlijk dat alleen de zwarte balk bovenaan de pagina div#header zich uit gaat strekken over de volledige breedte van het scherm en de rest moet gewoon netjes in het midden blijven staan. Ik heb al geprobeerd om aan div#header een width toe te wijzen maar dat heeft geen resultaat. Heeft iemand een idee zodat het wel lukt?
Toevoeging op 01/04/2012 22:00:15:
de link is http://beterbyte.nl/
Een div aanmaken voor je de pagina centreert.
Laat anders eens wat relevante css code en opbouw van je div's op je pagina zien.
Denk dat je met de gegeven info in die topic wel stukje verder komt.
Tip: Kijk even na de 2e url in Wouter J laatste reactie.
dit doe je door je header uit de wrapper te halen: http://tinkerbin.com/X9gzDsAJ
@Frank, dit zou ik in dit geval niet doen, aangezien je dit maar bij 1 section wilt. Bij jou voorbeeld wil je dat de background overal doorloopt, maar je wel een wrapper gevoel behoud. Dan zul je met inits aan de slag moeten, voor de rest moet je dit zoveel mogelijk proberen te vermijden, echt goed voor je semantiek is het namelijk niet.
Gewijzigd op 01/04/2012 22:10:56 door Wouter J
Oke dat snap ik. Ik wist niet hoe hij het kon oplossen, maar herindere mij die topic waardoor ik dacht miss licht daar een mogelijkheid voor het probleem.
Wouter J op 01/04/2012 22:06:29:
Dan zul je met inits aan de slag moeten, voor de rest moet je dit zoveel mogelijk proberen te vermijden, echt goed voor je semantiek is het namelijk niet.
Kort gezegd wat ik je gisteren stuurde is eigenlijk semantiek gezien niet goed? ;)
Gewijzigd op 01/04/2012 23:24:19 door Frank WD
Maar in elk geval deze code:
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 code
=========
<div id=header>
<h2>Sitenaam</h2>
</div>
<div id=wrapper>
<div id=content>
<h1>titel</h1>
<p>Lorem ipsum gedoe</p>
</div>
</div>
CSS Code
========
body { margin:0; }
#header
{
background: #333;
color: #fff;
float: left;
width: 100%;
padding: 0 50px;
}
#wrapper
{
width: 300px;
margin: 0 auto;
background: #ddd;
padding: 10px 20px
}
=========
<div id=header>
<h2>Sitenaam</h2>
</div>
<div id=wrapper>
<div id=content>
<h1>titel</h1>
<p>Lorem ipsum gedoe</p>
</div>
</div>
CSS Code
========
body { margin:0; }
#header
{
background: #333;
color: #fff;
float: left;
width: 100%;
padding: 0 50px;
}
#wrapper
{
width: 300px;
margin: 0 auto;
background: #ddd;
padding: 10px 20px
}
@Frank, semantisch inderdaad niet 100% (misschien 98%). Maar dit soort problemen kun je niet anders oplossen (ten zij je met images gaat werken) en dus kies ik dan liever voor een iets minder goede semantiek.
Gewijzigd op 02/04/2012 09:30:57 door Wouter J