CSS - Positionering en breedtes
Ik heb een vraagje. Ik heb een template/lay-out deze wordt horizontaal gecentreerd. Het element waar alles in komt te staan heet "container". Deze is absoluut gepositioneerd. Hierin staat een div-element genaamd "header". Deze heeft een breedte van 100%. Deze is dus ook net zo breed als het omhullende element (in dit geval #container). En #container heeft een breedte van 960px, maar dat is niet relevant.
Nu wil ik graag, zonder de volgorde van div-elementen te verplaatsen, de header 100% van de breedte van de pagina willen maken. Dus #header moet in principe BUITEN de #container komen te vallen.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="container" style="position: absolute; width: 960px; left: 50%; margin-left: -480px">
<div id="header">
Header
</div>
</div>
<div id="header">
Header
</div>
</div>
Zoiets dus, wie kan me helpen? :)
Waarom moet de header 100% (van de pagina) zijn?
Gewijzigd op 15/07/2011 15:13:25 door Ozzie PHP
En de header moet 100% van de pagina zijn omdat deze anders maar 960px is. Dus van boven naar beneden:
Header: 100% breed, 90px hoog
Content: 960px breed, hoogte variabel
Footer: 100% breed, 75px hoog
Edit: En dit alles zit in een omhullende div genaamd "container". En #container staat horizontaal gecentreerd.
Gewijzigd op 15/07/2011 15:19:11 door Kevin de Groot
Code (php)
1
margin: 0 auto;
En je zult dan de totale breedte van het scherm op moeten halen en die aan #header meegeven, met JavaScript. Met CSS kan dit niett.
Gewijzigd op 15/07/2011 15:26:15 door Ozzie PHP
@Ozzie PHP: Hier heb ik ook aan zitten denken. Dat ga ik wel doen denk ik.
Bedankt beide! :)
margin:0 -1500px;
a) ik weet niet of dit werkt
b) het is natuurlijk niet zoals het hoort (maar als het niet anders kan...)