Oversigt over modellerne Layouteksempel 1 Layouteksempel 1a Layouteksempel 2 Layouteksempel 2a Layouteksempel 3 Layouteksempel 3a Layouteksempel 4 Layouteksempel 4a

Det simpleste layout med stylesheet

Dette layout ligner næsten til forveksling det Layoutforslag 1, som vi lavede med en enkel tabel. Måden, det er lavet på, er imidlertid fundamentalt anderledes.

Der er ingen tabelkoder på denne side. Et simpelt stylesheet sørger for opdelingen af siden i en venstre og en højre kolonne:

  #indhold {
    margin:10px 10px 10px 200px;
    border-left:1px solid #ff9900;
    padding-left:10px;
  }
  #leftcol {
    width:180px;
    float:left;
  }

Dokumentets indhold rummes i to div-markører, således:

<div id="leftcol">
  [Menu ]
</div>
<div id="indhold">
[ Indhold ]
</div>

Simplere kan det vist ikke gøres...

Benærk formateringen af menuen i venstre kolonne. HTML-koden er blot en serie links, indsat efter hinanden. I stedet for at indsætte en br-markør efter hver linie har jeg ændret a-markøren display-værdi fra inline til block med den simple formregel:

a {display:block;}

Det må da vist være den simpleste måde af alle, hvorpå man kan formatere en menu af links.