Posisjonering av div-blokker

[834HF42F242]

Jeg driver og bygger opp en ny nettside for tiden, og har valgt å gå helt bort fra tabelloppsett. Jeg har en del erfaring med div-blokker og posisjonering fra tidligere, men vet ikke om jeg gjør det riktige. Jeg har brukt relative posisjoner, men oppdaget nylig at man kan bruke tags som

float:left;

 

Uansett: Legger ved et bilde av et vilkårlig oppsett med div-blokker, og lurer på hvordan andre ville posisjonert dette. Legg ved et css-eksempel i tråden, på hvordan man kan sette opp blokkene slik, enklest (og ikke minst riktigst) mulig:

 

 

 

Edit: Legger ved påbegynt css-skjema for å gj

øre det litt enklere...

/* $Id: eksempel,v 0.10 08/01/2006 02:39$*/
div#topp {
}

div#meny {
}

div#spesial-v {
}

div#spesial-h {
}

div#hovedside {
}

div#bunn {
}

Endret 8. januar 2006 av anth

[JonH]

Har et noe lignende oppsett på hjemmesida mi, med 'spesial-v' og 'spesial-h' som kolonner med tekst, og 'hovedside' som overskrift. Om jeg har gjort det på den riktigste måten er jeg ikke sikker på

Jobber med et nytt design, så sidene er foreløpig uten særlig innhold.

[Cizza]

Her har du et eksempel på hvordan dette kan løses: http://skohorn.net/div-test/. (Gjerne last ned eksempelet, for det kommer ikke til å ligge der for alltid.)

 

Den blå bakgrunnsfargen er en div som omkranser hele siden, mens den røde bakgrunnsfargen er en div som omkranser kun spesial-delen.

 

Håper det er til hjelp. Bare spør dersom du lurer på noe mer.

[robgar]

Lag en wrapper for :

 

spesial-v, spesial-h og hovedside.

 

html:

<div id="topp"> Toppen </div>

<div id="meny"> Meny </div>


<div id="cont_wrap"> 
 
 <div id="spesial-v"> SPesial v </div>

 <div id ="spesial-h"> Spesial h </div>
 
 <div id="hovedside"> Hovedside </div>

</div>

<div id="bunn"> Bunna </div>

 

CSS :

 

#topp {

}

#meny {

}

div#topp {
}

div#meny {
float: left;
}


div#cont_wrap {
 float: left;
}

 div#spesial-v {
   float: left;
 }

 div#spesial-h {
   float: left;
 }

 div#hovedside {
   clear: both;
 }



div#bunn {
 clear: both;
}