Tijden veranderen
100% width probleem
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Een voorbeeld</title>
<style type="text/css">
.fullw {
width: 100%;
background: red;
color: white;
font-size: 2em;
height: 300px;
}
.fixed {
width: 2500px;
margin-top: 20px;
background: blue;
color: white;
font-size: 2em;
height: 300px;
}
</style>
</head>
<body>
<h1>Voorbeeld van mijn 100% probleem</h1>
<div class="fullw">
Dit zou 100% van de inhoud moeten zijn, maar het is 100% van de scherm grootte (dat is niet wat ik wil!).
</div>
<div class="fixed">Dit is een fixed size van 2500px (2500px moet hoger zijn dan jouw maximal schermpixels in de breedte!).</div>
<p>
Wat ik dus wil bereiken, is dat de rode balk net zo breed is als de blauwe balk.
</p>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Een voorbeeld</title>
<style type="text/css">
.fullw {
width: 100%;
background: red;
color: white;
font-size: 2em;
height: 300px;
}
.fixed {
width: 2500px;
margin-top: 20px;
background: blue;
color: white;
font-size: 2em;
height: 300px;
}
</style>
</head>
<body>
<h1>Voorbeeld van mijn 100% probleem</h1>
<div class="fullw">
Dit zou 100% van de inhoud moeten zijn, maar het is 100% van de scherm grootte (dat is niet wat ik wil!).
</div>
<div class="fixed">Dit is een fixed size van 2500px (2500px moet hoger zijn dan jouw maximal schermpixels in de breedte!).</div>
<p>
Wat ik dus wil bereiken, is dat de rode balk net zo breed is als de blauwe balk.
</p>
</body>
</html>
edit:
In het voorbeeld hierboven heb ik 2 div's met ieder een eigen kleur (resp. rood en blauw) waarbij de hoogte op 300px is gezet. De rode heeft een width:100% terwijl de blauwe een width:2500px heeft. Mijn probleem is dus dat de rode balk net zo breed moet worden als de blauwe (van 2500px). Nu wordt de rode net zo breed als de browserwindow. Hoe kan dit probleem dus oplossen?
Gewijzigd op 11/02/2012 23:01:05 door Ilyes Ahidar
Voor jouw de vraagstelling er onder geplaatst :)! Waarschijnlijk bekijk je dit met je tablet ^^?
edit:
of telefoon.
Gewijzigd op 11/02/2012 22:59:27 door Ilyes Ahidar
Code (php)
1
2
3
2
3
<div id="wrapper">
<!-- divjes -->
</div> <!-- end of #wrapper -->
<!-- divjes -->
</div> <!-- end of #wrapper -->
en deze wrapper float: left; meegeeft ben je klaar.
Float: left; betekend dat het element zich gaat aanpassen aan zijn content. Zonder float: left; is de width gelijk aan 100%, met float: left; wordt de width even groot als de grootte van de content + padding (+ borders).
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Een voorbeeld</title>
<style type="text/css">
.fullw {
width: 100%;
background: red;
color: white;
font-size: 2em;
height: 300px;
}
.fixed {
width: 2500px;
margin-top: 20px;
background: blue;
color: white;
font-size: 2em;
height: 300px;
}
.container {
float:left;
}
</style>
</head>
<body>
<h1>Voorbeeld van mijn 100% probleem</h1>
<div class="fullw">
Dit zou 100% van de inhoud moeten zijn, maar het is 100% van de scherm grootte (dat is niet wat ik wil!).
</div>
<div class="fixed">Dit is een fixed size van 2500px (2500px moet hoger zijn dan jouw maximal schermpixel in de breedte!).</div>
<p>
Wat ik dus wil bereiken, is dat de rode balk net zo breed is als de blauwe balk.
</p>
<h1>De zelfde div's, maar dan in een container:</h1>
<div class="container">
<div class="fullw">Nummer 1</div>
<div class="fixed">Nummer 2</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Een voorbeeld</title>
<style type="text/css">
.fullw {
width: 100%;
background: red;
color: white;
font-size: 2em;
height: 300px;
}
.fixed {
width: 2500px;
margin-top: 20px;
background: blue;
color: white;
font-size: 2em;
height: 300px;
}
.container {
float:left;
}
</style>
</head>
<body>
<h1>Voorbeeld van mijn 100% probleem</h1>
<div class="fullw">
Dit zou 100% van de inhoud moeten zijn, maar het is 100% van de scherm grootte (dat is niet wat ik wil!).
</div>
<div class="fixed">Dit is een fixed size van 2500px (2500px moet hoger zijn dan jouw maximal schermpixel in de breedte!).</div>
<p>
Wat ik dus wil bereiken, is dat de rode balk net zo breed is als de blauwe balk.
</p>
<h1>De zelfde div's, maar dan in een container:</h1>
<div class="container">
<div class="fullw">Nummer 1</div>
<div class="fixed">Nummer 2</div>
</div>
</body>
</html>
Maar is er echter geen andere manier waarop dit opgelost kan worden zonder gebruik te maken van een container?
Je zou ook de body tag kunnen gebruiken als wrapper, maar ik zou dit uit semantische redenen niet doen. Wat is er erg aan een wrapper? (het is een van de tags die in zo'n beetje elke site zit)
Bedankt voor de reacties!
Gewijzigd op 11/02/2012 23:12:55 door Ilyes Ahidar
Voorbeeldje: http://tinkerbin.com/5btmtjev
@Ilyes, je hoeft niet een nieuwe wrapper te maken. Dit kun je ook op een bestaande wrapper uitvoeren, niet iedere stijl heeft een aparte wrapper nodig.
Gewijzigd op 11/02/2012 23:21:13 door Wouter J
Ik moet namelijk een container-full-width div hebben met daarin een andere div die gecentreerd is (gecentreerd op de 100% van de browserwindow).
Dus een voorbeeld in de praktijk:
Voor een header. Ik wil dus een background image content-fullwidth van links t/m rechts met daarin een 960px container met de daadwerkelijk menu/logo/etc gecentreerd volgens de fullwidth van de window.
Als de content 2500 px breed zou zijn, dan zou mijn content-container zich bevinden op 2500px/2-960px/2 t/m 2500px/2+960px/2. Maar wat ik wil is dat het op mijn window-fullwidth centreert. Dus als mijn browser-window 1000px breed zou zijn 1000px/2-960px/2 t/m 1000px/2+960px/2.
Ik hoop dat je snapt wat ik hierboven probeer uit te leggen! Je zou mijn probeem eventueel hier in het echt kunnen zien: beta#qmodo#nl (verander de # in een .)
Toevoeging op 12/02/2012 00:52:30:
Na intensieve forensisch onderzoek (google :P) en het bekijken van andere websites, trek ik de conclusie dat dit een bekend probleem is waarbij er geen echte oplossing is. Oplossingen lijken beperkt tot de content niet centreren, de site fluid maken of gewoon negeren (ik kies de laatste waarschijnlijk).