hoe maak ik een verschaalbare site liquid design?

volgens mij is het mogelijk om een verschaalbare site te maken doormiddel van css, maar weet niet precies hoe?
kan iemand mij uitleggen of een goede tut site geven?
alvast bedankt

Weet jij het antwoord?

/2500

Het beste antwoord

Dat doe je met CSS. Het idee van een "liquid layout" is dat je de paginabreedte een percentage maakt (bijv. 90%), zodat je website zich netjes aanpast aan de browser van je bezoeker. Bij een "fixed layout" gebeurt dat niet, daar is de paginabreedte niet veranderlijk (bijv. 960 pixels). Onderstaande bronnen helpen je ongetwijfeld op weg met je eigen liquid layout. Succes!

Bronnen:
http://css-tricks.com/examples/PerfectFlui...
http://www.456bereastreet.com/archive/2005...
http://www.smashingmagazine.com/2009/06/09...

Goede bronnen hierboven! Even mieren.... Op zich kon je namelijk vroeger al een liquid site maken met tabellen in plaats van CSS stylesheet opmaak (

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) background image ^^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.

Stel zelf een vraag

Ben je op zoek naar het antwoord op die ene vraag die je misschien al tijden achtervolgt?

/100