Website 100% breed met outer background
Ik loop nu al enige tijd te klooien met het volgende probleem.
Ik heb een header en een footer. Beide hebben zeg maar een gradient die ik over de hele breedte wil laten lopen.
Nu kwam ik op het idee om zeg maar het midden stuk een gradient aan de linker en rechterkant te geven, over de header en footer heen waardoor je een dimentie krijgt.
Mijn voorwaarde is dat als de pagina kleiner is als de hoogte van het scherm, de footer onderaan moet blijven. Maar wanneer deze langer is, moet de footer naar beneden gedrukt worden.
Ik heb geprobeerd om bijv een div buiten mijn outer/container te plaatsen en deze position:absolute en bottom:0px te geven. Maar in IE8 krijg ik een witruimte onder de footer. (IE9 niet meer)
Iemand een oplossing?
daar was ik inderdaad bang voor dat ik die reactie zou krijgen:P
Ik weet wat een sticky footer is en ook hoe te gebruiken. Echter wil ik mijn grafische krachten nog iets meer bundelen.
Normaal ziet mijn structuur er ongeveer zo uit:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="outer">
<div id="header"></div>
<div id="content"></div>
<div id="clear_footer"></div>
<div id="footer"></div>
</div>
<div id="header"></div>
<div id="content"></div>
<div id="clear_footer"></div>
<div id="footer"></div>
</div>
De outer zorgt in dit geval dat de pagina wordt gecentreerd op het beeld.
De clear footer en footer zijn dus de sticky footer...
Mijn bedoeling zal ik nogmaals proberen uit te leggen.
De outer div gaat doormiddel van een image een gradient/shadow aan de zijkanten. (hierdoor lijkt het dat de outer naar voren komt)
Nu wil ik de header en footer qua kleur laten doortrekken. dus 100% breedte.
Schematisch weergeven:
(http://tinypic.com/r/20kc1l4/5)
Zwarte is scherm van de monitor
Rood is de outer / website, gecentreerd en footer onderaan de pagina (afhankelijk van hoogte, altijd onderaan), zijkanten hebben shadow
Blauw is footer en header kleur, waarbij er dus word doorgetrokken over gehele lengte van pagina.
Ik heb zeg maar geprobeer door outer, 100% breed te maken, en een div absolute erover heen te leggen op 100% height. Alleen als de content langer is, blijft footer op zelfde plek en resized niet mee zodat die onderaan de pagina blijft staan.
Ik hoop dat het nu wat duidelijk is:)
Gewijzigd op 18/02/2012 16:46:32 door Wim E
Kun je misschien niet een online voorbeeldje maken op http://tinkerbin.com/ ofzo?
(http://tinypic.com/r/15zpj9/5)
Gewijzigd op 18/02/2012 18:04:25 door Wim E
HTML:
Code (php)
1
2
3
4
5
2
3
4
5
<body>
<header><h1>Header!</h1></header>
<div id="content"><img src="afbeelding.jpg" /><p>Tekst tekst tekst</p></div>
<footer><small>Footer</small></footer>
</body>
<header><h1>Header!</h1></header>
<div id="content"><img src="afbeelding.jpg" /><p>Tekst tekst tekst</p></div>
<footer><small>Footer</small></footer>
</body>
CSS:
Code (php)
1
2
3
4
2
3
4
body { background: blue; }
header { width: 100%; text-align: center; background: red; }
#content { width: 900px; margin: auto; min-height: 600px; }
footer { width: 100%; text-align: center; background: red; }
header { width: 100%; text-align: center; background: red; }
#content { width: 900px; margin: auto; min-height: 600px; }
footer { width: 100%; text-align: center; background: red; }
EDIT: http://jsfiddle.net/k2QgT/1/embedded/result/
Gewijzigd op 18/02/2012 18:16:39 door Roy -
Gewijzigd op 18/02/2012 19:10:43 door Wouter J