Door
Ilyes Ahidar
op 11-02-2012 22:51
gewijzigd op 11-02-2012 23:01
1.307 views
Ik heb een probleem dat ik met het onderstaande broncode duidelijk maak (zet het in een test.html en open het :)).
<!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>
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?
De oplossing is vrij simpel. Als je om alle bij de divjes een wrapper zet, bijv:
<div id="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).
<!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>
Maar is er echter geen andere manier waarop dit opgelost kan worden zonder gebruik te maken van een container?
Nee, want dan wordt de width van de <body> gepakt en dat is de breedte van het scherm.
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)
"Wat is er erg aan een wrapper?" -Het is dat ik er al zoveel heb :S :P. Maar ik loop mijn html/css maar eens een keer goed door om te zien of ik met minder div's kan werken.
Bedankt voor de reacties!
Gracias. Inderdaad telefoon. Maar wouter: float : left heeft toch geen vaste waarde? Dus kan deze div toch even groot worden als de content, maar die content is toch altijd verschillend?
@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.
Oke, ik heb wat zitten puzzelen, maar kom er met mijn probleem nog niet uit.
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 .)
[size=xsmall]Toevoeging op 12/02/2012 00:52:30:[/size]
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).
