Webdesign 101 demoside

CSS layout

2-spaltet layout med lige høje spalter

Vilkårlig længde på alle begge spalter, vilkårlig placering af menuspalten

Skjul/vis tekst i højre spalte
Vis/skjul tekst i venstre spalte

Nu vil vi gerne slå to fluer med ét smæk, nemlig dels opnå det, vi opnåede med eksempel 5 – at kunne placere højre/venstre spalte vilkårligt i forhold til artikelteksten (#indhold-elementet) – og dels sikre at begge kolonner ser lige høje ud, uanset hvilken kolonne der har det meste indhold, jf. eksempel 6.

Ser vi først på eksempel 5, kunne vi placere menuspalten under #indhold-spalten fordi vi float'ede begge elementer til hhv. højre og venstre. Det kan vi kun gøre, når begge elementer har en bredde. Men for at vi kan bruge en baggrundsgrafik til at skabe udseende af ensartede højder er vi (næsten) nødt til at have en menuspalte med en fikseret bredde. Og så er vi tvunget til også at have en fikseret bredde på artikelspalten.

Denne side viser et sådant layout. De operative formregler er:

div#side {width:750px;}
div#indhold {
  width:530px;
  float:right;
  padding-top:1.5em;
  padding-left:20px;}
div#menucol {
  width:185px;
  padding-left:5px;
  float:left;
  padding-top:1.5em;}
div#wrapper {
  width: 100%;
  background-image:url(res/leftcolbg200.png);
  background-repeat:repeat-y;
  background-position:left top; }

Fikseret vs. elastisk eller flydende layout

En webside kan – for så vidt angår indholdets bredde – konstrueres efter følgende tre principper:

  1. Fikseret bredde – for eksempel i pixel, der er langt det mest almindelige,
  2. Elastisk bredde – breddemål i em'er, og
  3. Flydende bredde – breddemål i procenter (af browservinduets bredde.

Den mest almindelige kombination er nok én eller to smalle spalter med fikserede mål og en indholds- eller artikelspalte som er elastisk eller flydende med en max-width-værdi.

Denne side benytter sig af det først nævnte princip, det vil sige at det div#side-element, der omslutter alt indhold på siden, er 750 pixel bredt. #menucol-elementet er 190 pixel bredt og artikelspalten er 550 pixel bred.

Der er ingen “rigtig” metode, men i min optik er udelukkende fikserede mål den mindst fleksible metode, som først og fremmest bør bruges, når der er meget stringente krav til sidens visuelle udformning. gildahayes.com er et eksempel på et sådant layout.

Men hvordan ordner vi det sådan, at vi kan bruge elastiske eller flydende mål, og alligel float'e to (eller flere) elementer. Svaret på det er at gøre et 100 procent bredt element mindre end 100 procent bredt. Det kan man ikke i det virkelige liv, men i cyberspace findes et begreb der hedder negative marginer, og det er sådanne vi skal benytte os af. Hvordan forklarer jeg i artiklen 2-spaltet layout med negative marginer.

8. august 2007