Photoshop-Tutorials.nl - Photoshop Forum

[jaco]

Avond, ik ben bezig met een websitehttp://www.slagerijsnel.nl. Nu wil ik de 2 kolommen in et midden zo uitstrekken dat de pagina mooi gevuld is. Ik heb geprobeerd om de #wrapper op "height: 100%;" te zetten en dan ook de leftcollum en rightcollumn "height: 100%;".

De header en footer (topimage en base) hebben vaste pixelhoogte. Ik ben benieuwd wat ik fout doe.

[Gloomy]

Dit is een probleem dat velen hebben met CSS
100% hieight voor de hoogte van het scherm. zo staat 95% voor 95% hoogte van het scherm.

Stel je vult dus bij een div 50% hoogte in, dan wordt hij op het ene scherm 500 pixels hoog, en op de andere 300. Dat is nogal irritant.

Hoe je dit oplost? dat doe je alsvolgt:

Code: Selecteer alles

<div id="wrapper">
    <div id="linkerkolom"></div>
    <dic id="rechterkolom"></div>
</div>


zoals je kan zien gooi ik hier de 2 kolommen in 1 wrapper. deze wrapper geef je een achtergrond kleur.
De wrapper groeit nu net zo ver als dat de langste kolom ( rechter of linker). wat er voor zorgt dat de achtergrond van die kolommen mee groeit. ( althans zo lijkt het, maar het bereikt wat je wilt).

Als je wilt dat deze kolom tot de bodem van de pagina komt heb je een ander probleem. Dat is namelijk dat elke pagina een andere hoogte heeft.
De meest standaard en misschien beste manier is om gewoon een minimum hoogte op te geven voor de wrapper ( in css: #wrapper: min-height:500px; )
maar dan heb je dus het probleem van de verschillende resoluties.

Als je dat niet wilt moet de hele structuur van de pagina aangepast worden. en wel op de volgende manier:

Code: Selecteer alles

<div id="main-wrapper">
     <div id="header"></div>
     <div id="content-wrapper">
           <div id="linkerkolom"></div>
           <div id="rechterkolom"></div>
     </div>
     <div id="footer"></div>
</div>


Code: Selecteer alles

body,html{ height:100%; width:100%; margin:0px; padding:0px;}
#main-wrapper { height:100%;  background-color:white; width:960px; position:relative;}
#header-wrapper{height:200px; width:960px;}
#content-wrapper{padding-bottom:46px; width:960px;}
#footer{position:absolute; bottom:0px; left:0px; height: 46px; }


okey: wat we hebben gedaan:
we hebben ervoor gezorgt dat de body en html tags altijd het hele scherm vullen.
vervolgens hebben we gezegt dat de "main-wrapper" als referentie punt van wordt gebruikt van alle tags die binnen hem zitten ( door position: relative) en hem een vaste breedte gegeven.
Dan hebben we de header een vaste hoogte en breedte gegeven. ( vaste hoogte is niet ECHT noodzakelijk, maar meestal is dit wel het geval).
Nu volgt de content-wrapper. hier valt waarschijnlijk op dat hij een padding-bottom heeft die even lang is als de hoogte van de footer. Dit gebruiken we om de "footer" net alsof naar beneden te drukken als de inhoud van deze wrapper te lang wordt.
De footer positioneren we op de bodem van de main-wrapper. Dit zorgt ervoor dat hij altijd onderaan de pagina blijft. zelfs als de main-wrapper langer wordt.

Hopelijk heeft dit je vraag beantwoord. Er zijn andere manieren om dit voor elkaar te krijgen, echter is hier javascript noodzakelijk voor ( iets wat niet iedere gebruiker leuk vind).

[jaco]

Gloomy, wat een uitgebreid antwoord. Hartelijk bedankt. Ik ga er vanavond of morgen mee aan de slag.

Ik zal je in dit topic wel even op de hoogte houden. Dank je!

[jaco]

de wrapper een achtergrond kleur geven wil niet werken.... heel apart. Misschien moet ik de css maar eens helemaal overnieuw schrijven. In ieder geval bedankt voor je antwoord.

[Gloomy]

heb je je website online staan? dan zal ik het even nalopen voor je

[jaco]

hey gloomy,

Site staat online. slagerijsnel.nl ik heb nu een andere oplossing bedacht en ben eigenlijk heel erg tevreden met het resultaat dus ik ga het niet meer veranderen. Ik denk dat zelfs nog beter is dat het originele idee.

Maarja. Toch bedankt voor de hulp. Als je iets aan te merken hebt op de site ben je natuurlijk altijd welkom om feedback te geven...