Overzicht
Als je op zoek bent op het internet naar basis layouts dmv CSS, vind je heel veel artikels dewelke één welbepaalde layout bespreken...of die een specifiek probleem bij opmaak aanpakken.
We proberen hier een overzicht te geven van diverse basis layouts op basis vanCSS. Daarbij wordt gekeken naar een 2-kolom en 3-kolom layout. Deze basis layouts kun je als vertrekpunt gebruiken bij het ontwerpen van eigen webpagina's.
Vanuit deze HTML pagina kun je diverse layouts opvragen, en bestuderen.
Voor de eenvoud is de CSS code telkens opgenomen in de 'head' van diverse voorbeeld-pagina's.
Dus met een eenvoudige rechter-muis "bron weergeven" zie je zowel de gebruikte CSS als HTML code.
De HTML opbouw van alle hieronder weergegeven templates (layouts) is steeds dezelfde
Deze layout
Deze layout is dus een 2-kolommen opmaak, waarbij links en onderaan een menu is opgenomen.Als u over langere webpagina's beschikt kan het nuttig zijn onderaan een horizontaal menu te plaatsen.
Overige layouts
Een 3-kolom CSS layout wordt bekomen door voornamelijk te werken met floating, margin en padding. Er wordt geen gebruik gemaakt van "absolute positioning".
- 3 kolom CSS layout - linker en rechter menu. Dit is de basis layout voor alle onderstaande layouts.
- 2 kolom CSS layout - linker en horizontaal menu
- 2 kolom CSS layout - rechter en horizontaal menu
- 3 kolom CSS layout: 100% hoogte met voet.
- 3 kolom layout met fluid layout: 100% breedte
Je kunt deze voorbeelden vrij gebruiken.Hopelijk vind je ze interessant en nuttig