csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Instructie-video "Liquid Layout zonder tabellen", met CSS
Dit is geen vraag, maar een TIP!
Een "liquid layout" is een flexibele opmaak van een webpagina, die zich automatisch aanpast aan het beeldschermformaat van de bezoeker. In het algemeen werk je met procenten als (breedte-)maat in plaats van met een vast aantal pixels.
Voordelen:
Sterker nog: met tabellen is het soms veel moeilijker, of onuitvoerbaar.
Of je moet heel veel tabellen in tabellen in tabellen in ... enz. maken. Met vaak problemen bij de achtergronden, of een overmaat aan transparant.gif's om iets maar een bepaalde afmeting te geven, enz. - Tabellen voor de opmaak zijn de pest voor je html-code, want het vraagt veel extra tags, je ziet volstrekt niet waar je zit, en naderhand iets makkelijk aanpassen is er niet bij.
Voor de bouw van een CSS Liquid Layout heeft francky van developerscorner.nl een instructievideo op YouTube gemaakt.
In volgorde worden de stappen doorgenomen voor een pagina met twee kolommen en een splitsing van één kolom in twee kleinere kolommen.
Om de bouw van een Liquid Layout pagina in de praktijk te kunnen brengen, is als basiskennis nodig (niet alles gaat vanzelf ...):
Veel plezier ermee,
CSShunter
PS-1:
Deze instructievideo is voortgekomen uit een vraag over ronde hoekjes (rubriek "Dreamweaver" > "Ronde hoeken in een tabel" > niet dus!), maar omdat Liquid Layout eigenlijk een apart onderwerp is, en niet speciaal bij Dreamweaver hoort, ben ik zo vrij geweest er hier op deze plaats een apart topic van te maken.
PS-2:
Als je de pagina van de video zelf wilt nabouwen, en je komt er niet uit: dan is hier een Escape naar het resultaat.
Dit is geen vraag, maar een TIP!
Een "liquid layout" is een flexibele opmaak van een webpagina, die zich automatisch aanpast aan het beeldschermformaat van de bezoeker. In het algemeen werk je met procenten als (breedte-)maat in plaats van met een vast aantal pixels.
Voordelen:
- De pagina is dan altijd beeldvullend, zowel op een resolutie van 800x600px als bij 1280x1024px, en alles wat daartussen en daarboven zit.
- Hebben mensen met een dure hoge resolutie breedbeeld-monitor deze tenminste niet voor niets gekocht: hoeven ze niet naar een smal strookje webpagina in het midden van hun scherm te kijken, en hoeven ze niet omhoog te scrollen om meer te zien! Weg met die grote lege vlakken aan de zijkanten!
- En hoeven mensen die op een lage resolutie zitten, niet steeds als een gek met de onderste horizontale scrollbar van links naar rechts en terug te schuiven, als ze een regeltje uit de pagina willen lezen!
- Met een "liquid layout" is de pagina automatisch geschikt voor afwijkende lettergrootte-instellingen door de bezoeker. Dat kan afhangen van je resolutie, en de één heeft een grotere letter nodig dan de ander!
- De lettergroote moet dan door de webmaker niet in pixels opgegeven worden, maar in percentages of in de em-maateenheid (een relatieve maat, die loopt van 0 tot 1; meestal is 0.9em voor een <p> een aardig begin).
- Met een "liquid layout" kan je ook flexibele en transparante ronde hoekjes en afwijkende eigen randjes (borders) maken. Ook die passen zich dan automatisch aan.
Sterker nog: met tabellen is het soms veel moeilijker, of onuitvoerbaar.
Of je moet heel veel tabellen in tabellen in tabellen in ... enz. maken. Met vaak problemen bij de achtergronden, of een overmaat aan transparant.gif's om iets maar een bepaalde afmeting te geven, enz. - Tabellen voor de opmaak zijn de pest voor je html-code, want het vraagt veel extra tags, je ziet volstrekt niet waar je zit, en naderhand iets makkelijk aanpassen is er niet bij.
Voor de bouw van een CSS Liquid Layout heeft francky van developerscorner.nl een instructievideo op YouTube gemaakt.
In volgorde worden de stappen doorgenomen voor een pagina met twee kolommen en een splitsing van één kolom in twee kleinere kolommen.
Om de bouw van een Liquid Layout pagina in de praktijk te kunnen brengen, is als basiskennis nodig (niet alles gaat vanzelf ...):
- globaal inzicht in het maken van html-code,
- weten hoe je een <div> maakt en in een pagina plaatst,
- globaal inzicht in het maken van css-code,
- weten hoe de css-eigenschap "float" werkt,
- weten hoe de css-eigenschappen "margin" en "padding" werken.
Veel plezier ermee,
CSShunter
PS-1:
Deze instructievideo is voortgekomen uit een vraag over ronde hoekjes (rubriek "Dreamweaver" > "Ronde hoeken in een tabel" > niet dus!), maar omdat Liquid Layout eigenlijk een apart onderwerp is, en niet speciaal bij Dreamweaver hoort, ben ik zo vrij geweest er hier op deze plaats een apart topic van te maken.
PS-2:
Als je de pagina van de video zelf wilt nabouwen, en je komt er niet uit: dan is hier een Escape naar het resultaat.
