Webdesign 101 demoside

CSS layout

2-spaltet layout med højrestillet menupanel

float-egenskaben bruges til at oprette to spalter.

At gøre menuspalten højrestillet i stedet for venstrestillet er så ubegribeligt simpelt som en lille håndfuld ændringer i stylesheet'et:

div#menucol {
  width:14em;
  float:right;
  padding-top:40px;}
div#indhold {
  /*background:yellow;*/
  padding-top:40px ;
  margin: 0 15em 0 0;
  padding-right:1em;
  border-right:1px solid #257;}

Som du ser er det kun et spørgsmål om at udskifte ordet left med ordet right i de to formdeklarationer for #menucol og #indhold-elementerne.

Bemærk især kortformsudgaven for margin: Jeg sætter fire værdier på én gang, og det er uforanderligt margin-top, margin-right, margin-bottom og margin-left i den rækkefølge.

Bemærk også, at ingen ændringer i HTML-kildekoden er nødvendig.

Og bemærk især at jeg her, fordi artikelspalten kun har et begrænset indhold, har været nødt til at give dette element lidt ekstra højde ved at sætte en padding-bottom på 12em.

8. august 2007