Favoritlayout 1

Hvis du vil se html-kildekoden og stylesheet'et for hele siden, må du bruge browserens Vis kilde funktion.

I det følgende gennemgår jeg hovedpunkterne i stylesheet'et:

html, body {
  margin:0;
  padding:0; 
  font-family:georgia,serif;}
body {
  padding-bottom:1em;}

Sidens dokumenttypeerklæring er xhtml Strict, så nogle browsere vil lægge padding og/eller margin til enten html-elementet eller body-elementet. Det sikreste er at nulstille padding og margin på begge elementer.

Jeg kan godt lide en smule afstand mellem det nederste element på siden og browervinduets underkant, derfor en padding-bottombody-elementet.

#page {
  width:45em;
  margin:1em auto;
  position:relative;}

#page-elementet omslutter alt indhold på siden. Indholdet – sidehoved (banner-elementet), venstre og højre spalte tilsammen og sidefoden får derfor en bredde på 45em – det vil sige 45 bogstavhøjder. position:relative sikrer, at et absolut positioneret element placeres i forhold til #page-elementet og ikke i forhold til body-elementet.

Det er en fikseret bredde, der ikke ændrer sig med browserviduets størrelse. Fidusen ved dette er en overkommelig linielængde, se mumleteksten herunder, hvor jeg har givet de første 65 tegn en grå baggrund.

En følge af at vælge en em-størrelse til bredden er, at linierne forbliver nogenlunde lige lange, selvom teksten gøres større ved hjælp af browserens tekststørrelsesværktøj.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Layout

div#indhold {
  margin: 0 0 0 200px; 
  border-left:1px solid black;
  padding:0 1em;}
#leftcol { 
  position:absolute;
  left:0;
  top:80px;
  width:180px;  }

Indholdets inddeling i to spalter svarer til princip-layoutet i eksempel 2. #indhold-elementet forsynes med en rigelig venstre margin, og heri placeres et element #leftcol 80 pixel fra overkanten. I artiklen Noter om websidelayout skriver jeg mere om beregningen af afstanden mellem banner-elementet og det absolut placerede #leftcol-element.

Spaltestregen

Formreglen border-left:1px solid black; skaber den sorte spaltestreg. Der er et par ting at sige om denne.

Som du ser, holder indholdet af venstre spalte og højre spalte ikke register. (Når teksten i to spalter ved siden af hinanden har fælles overkant, kalder typografer det “at de holder register”). Spaltestregen viser, at det er #indhold-kassen, der ikke rækker helt op til sidehovedet eller helt ned til sidefoden. Det illustreres til overflod, hvis vi sætter en baggrundsfarve på #indholdkassen: Sæt baggrundsfarve. (Klik igen for at fjerne baggrundsfarven).

Desuden kunne jeg tænke mig, at det blev illustreret, hvordan vi putter nogle ekstra kasser i venstre spalte.

Disse ting viser jeg på en ny udgave af siden: Favoritlayout 1a.

Retur til foregående