Overlappede Typografiark (CSS)

Styring af layout vha. Containers

Et særdeles udbredt design af netmedier, er fast bredde, centreret med 'whirtespace' til at fylde evt. resterende skærmareal ud (se ex. her).
Ved fast bredde er mange af de større designproblemer der opleves ved dynamisk bredde væk, herunder mange af forskellene i mellem browsernes tolkninger af w3c-standarderne.
For diskussion om fixed-flexible width, se Web Style Guide, men alt andet lige vil whitespace være 'unyttigt' skærmareal som giver mindre plads til de faktiske indhold, evt. med øget scrolling til følge. Omvendt er lange tekstlinier sværere at læse - især på skærm - hvorfor der er røster blandt grafikere, som mener at linielængden ikke må overskride 65-70 typografienheder, og er der tale om lange tekster bør disse være i særlig udskreiftsvenlig udgave, evt. i PDF.

Den klassiske metode til styring af layout er, at lade en udvendig 'container' bestemme placering i skærmvinduet og lade øvrige layoutelementer optræde inde i denne.

Skitse af layoutelementer indeholdt i udvendig box

Udgangspunktet er at sætte de enkelte div-boxe inden i den udvendige div-box:

<div id="udvendig">

<div id="topbanner"> </div>
<div id="venstre"> </div>
<div id="hoejre"> </div>
<div id="sidefod"> </div>

</div>

Se eksempel på layout som ovenstående her med tilhørende css her.
En mere udbredt opdeling kan ses her med tilhørende css her.

Ingen browsere er perfekte, hvorfor vi skal være varsomme med at beregne bredden af de enkelte boxelementer (incl. marginer) for snært, da sidestillede boxe ellers vil komme over hinanden. Ovenstående eksempel har en fast bredde på 768 px og fratrækkes marginer på 5 px fra begge sider af både "hoejre" og "venstre" burde der være 748px tilbage til de to boxe. Firefox og Opera accepterer 744px mens MSIE skal helt ned på 730 px for at give plads til begge.

Boxmodellen (HTML.dk)
CSS Layout Techniques (Glish)
Boxpunch (edge)
CSS play layouts (Stu Nicholls)
CSS zen garden

Intro til CSS (eucsj07)
Samling af CSS-ressourcer (gudmandsen.net)