hoe maak ik een verschaalbare site liquid design?

Het tricky gedeelte is waarschijnlijk de achtergrond. In css kan je inderdaad met percenten werken. maar niet elke browser ondersteund de nieuwe functionaliteiten van CSS. Iets dat steeds werkt is met een achtergrond afbeelding werken.

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

^^CSS (de position fixeren op pixel 0,0 en de hoogte en breedte op 100% zodat hij volledig alles vult. ook alle paddings en margins op '0' zetten is een veilige optie zodat je geen witte rand krijgt rond je achtergrond)








^^hiermee voeg je de afbeelding toe aan je website. als je dan in je CSS goed met 'Z-index' ofwel layers kan werken komt deze mooi onderaan te staan ongeacht welke webbrowser je gebruikt. Dit zijn namelijk allemaal al oudere functionaliteiten die zo goed als alle browsers ondersteunen.


Wat nog een probleem kan zijn is het centreren van een bepaalde 'div' of 'box' in het css boxmodel. Dit pak je best ook aan doormiddel van oudere css truks omdat nog niet alle browsers de nieuwe ondersteunen.

bv:

#main {
position:absolute;
z-index:1;
height:100%;
width: 1024px;
top:0;
left:50%;
margin-left:-512px;
}


uitleg:

position: absolute -> niet relatief omdat dit een vaststaand element moet zijn.

z-index:1 -> laag nummer 1 (de laag met het hoogste nummer ligt bovenaan)

height:100% -> het moet in de hoogte schermvullend zijn (in dit voorbeeld)

width: 1024px -> stel de gewenste breedte in voor je div

top:0 -> het aantal pixels van de bovenrand dat de div verwijderd moet zijn (in het voorbeeld dus 0)

left: 50% -> dit is het eerste deel van de eigenlijke truk! ook hier kan je met percenten werken. je gaat dus de div laten beginnen vanaf de helft van je pagina.

margin-left: -512px -> deel 2 van de truk is de helft van de breedte af te trekken van de margin-left.



---> het resultaat is dat jou div mooi in het midden komt te staan (horizontaal)

vertikaal werkt deze techniek ook maar dan moet je de betrokken settings omdraaien.

Met deze technieken ga je al heel ver komen om een liquid desing te maken dat ondersteund word in bijna alle browsers.