Webontwerp met 2 kolommen

Pagina indeling

Een klassieke vormgeving en waarschijnlijk het meest gebruikt is het ontwerp met 2 kolommen.

Het ontwerp:

De pagina is opgebouwd uit twee delen, de dividers, die aangegeven worden met 'DIV'. Een voor de tekst en 1 voor het menu.

Het deel waarin de inhoud geplaatst gaat worden is voorzien van een ruime marge aan de linkerkant. Hierin is de Div voor het menu middels een 'float: left' op z'n plaats gezet. Dit wil zeggen dat de Div uit de normale opbouw gehaald wordt en uiterst links in het element waarin het zich bevindt, moet worden geplaatst.

Normaal gesproken een simpel ontwerp, de opmaak in CSS echter biedt voor sommigen nogal wat hoofdbrekens, veelal veroorzaakt door een 1 dimensionaal denken. Essentieel voor het ontwerpen van met CSS opgemaakte websites is het denken in lagen. Ieder element neemt in dit ontwerp precies zoveel ruimte in als er tekst in is geplaatst en kan middels positionering 'over' een ander element worden gelegd. Denkt u maar eens aan een blad waarop in diverse kleuren steeds weer een nieuw blad wordt gelegd dat delen van het onderliggende blad bedekt.

Het eerste blad (het canvas) waarop we alle volgende bladen gaan positioneren is de <body>. In dit ontwerp valt het blad met de tekst deels over dit element. De ruimte die links ervan opgengelaten is toont ons dus een deel van de <body> die een lichtblauwe kleur heeft.

Normaal gesproken is de hoeveelheid tekst groter dan het aantal regels van het menu. De hoeveelheid tekst rekt de Div waarin het zich bevindt op en doordat links het canvas zichtbaar blijft, lijkt het alsof het ontwerp uit 2 kolommen bestaat.

In dat zichtbare deel van de <body> plaatsen we een Div voor het menu, dat dmv. een 'float: left' (een positionerings waarde in CSS) op z'n plaats gezet wordt. Doordat het menu een transparante of eenzelfde achtergrondkleur heeft als de <body> lijkt het erin opgenomen / onderdeel te zijn van de linkerkolom.

Dit ontwerp is de basis voor de volgende twee webontwerp voorbeelden:

Uitgewerkte CSS voorbeelden vindt u in onze sectie: