Hoi pascal,
Footer-positie
Eerst het meerekken van de inhoud, terwijl de footer altijd onder de inhoud blijft staan, en bij een korte pagina altijd helemaal onderaan het scherm.
Daarvoor is de volgende hoofdstructuur van de pagina nodig:
HTML:
<body>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</body>
Vervolgens kan je met css de posities gaan vastleggen.
Meerekkende schaduw
Hiervoor kan je de schaduw opsplitsen in 3 gedeeltes: een blokje voor de bovenaan, een blokje voor het rekbare middendeel, en een blokje voor de footer:
Met css laat je het middenstuk met de zijkanten zich verticaal herhalen: repeat-y.
Dit middenstuk koppel je aan de <body>, want de <body> is altijd minstens de schermhoogte, en rekt anders mee met de inhoud.
Het bovenste stukje wordt gekoppeld aan de #content, en hoeft niet herhaald te worden: no-repeat. Omdat de #content binnen de <body> staat, wordt de top nu over de algemene achtergrond met de zijkanten geplakt!
Op dezelfde manier komt de onderkant-figuur er in als background van de #footer.
Het aardige van css is, dat je de background ook links-rechts kunt verschuiven met de eigenschap background-position. Dat betekent dat we de 3 afbeeldingen naast elkaar in één langwerpig image kunnen zetten.
- Alle schaduwen in: images/top-midden-bottom-background990x50x3.gif
- Het bovenstuk zit helemaal links, en is 990px breed (de paginabreedte *). Die komt op background-position: 0 0.
- Het middendeel begint vanaf 990px, mag ook bovenaan beginnen, en krijgt de background-position: -990px 0.
- Het onderstuk, helemaal rechts, zit op 2x990px vanaf links, en moet van onderaf in beeld gebracht worden; met background-position: -1980px bottom.
- De gedeeltes van de content in de achtergrond kunnen transparant zijn, dan kan die achtergrondkleur met de css nog alle kanten op.
Dit levert dan de volgende pagina:
- Test: gecentreerde-footer-C.htm
- De rest van de pagina kan nu allemaal binnen de <div id="content> komen: een <div id="header">...</div>, een <div id="pagina-content">... </div>, enz.
Met vriendelijke groet,
CSShunter
_________
*) De <body> is nu 1028px breed. Dat is te breed voor een resolutie van 1024*768px, die krijgt dan een horizontale scrollbar onderaan het scherm. Er moet ook nog rekening gehouden worden met de ruimte van de scrollbar-rechts, die er van af moet, zodat een veilige breedte zo'n 990px is.
PS: Waar heb ik het footer-verhaal toch
eerder gelezen, met een bekende vragensteller?
