CSS: sentrering av side

[estigma]

Driver akkkurat å setter meg inn i CSS, og har ett problem med å få til siden til å være sentrert, uansett tanke på oppløsning brukeren kjører.

 

Tenger hjelp med dette.

Noen som har noen forslag?

[haugsand]

http://decalibration.net/artikler/sentrering/

[estigma]

Har sett på denne løsningen før, men får det ikke til.

 

Her er css filen min:

 

body {

text-align: center;

}

 

div#topp {

background: #ffffff;

position: absolute;

top: 20px; left: 20px;

width: 713px;

height: 211px;

border: 0px;

}

 

div#venstre {

position: absolute;

left: 20px;

top: 231px;

width: 100px;

height: 500px;

background: #00FFBB;

border: 0px;

}

 

div#hoyre {

background: gray;

position: absolute;

top: 231px;

left: 545px;

width: 188px;

height: 500px;

border: 0px;

}

 

bruker da bare eksempel på html siden:

 

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

 

<div id="venstre"> Venstre </div>

 

<div id="hoyre">Høyre</div>

 

---

 

Får den da ikke til å stå sentrert....

[Haraldson]

Du må legge en div rundt disse tre, som du setter margin:0 auto; på, samt text-align:left;

 

Dessuten funker det ikke med position:absolute;.

 

 

Det hele står vel ganske bra i artikkelen...

[Arve Systad]

http://www.absentvoid.com/hwno/boks_setup.htm

og

http://www.alistapart.com/articles/fauxcolumns

 

Kan vere til nytte

 

edit: feil url og greier

Endret 2. november 2004 av arve87

[estigma]

sitter fortsatt å sliter... får det fortsatt ikke til...

 

CSS filen:

 

 

body {

text-align: center;

}

 

div#frame {

background: #ffffff;

margin: 0 auto;

text-align: left;

}

 

div#topp {

position: absolute;

background: #ffffff;

top: 20px; left: 20px;

width: 713px;

height: 211px;

border: 0px;

}

 

div#venstre {

position: absolute;

left: 20px;

top: 231px;

width: 100px;

height: 500px;

background: #00FFBB;

border: 0px;

}

 

div#hoyre {

background: gray;

position: absolute;

top: 231px;

left: 545px;

width: 188px;

height: 500px;

border: 0px;

}

 

OG HTML filen:

 

<div id="frame">

 

<div id="topp"><img src="topp.jpg"></div>

 

 

<div id="venstre"> Venstre </div>

 

<div id="hoyre"><img src="bilde.jpg"><br>Høyre</div>

 

</div>

[PoleCat]

Dersom du ikke angir bredde for #frame, vil den fylle 100% av body, og dermed hele viewport. margin: 0 auto vil altså bare fungere på element med en bredde.

 

Dropp absolutt posisjonering av de andre div'ene dine, og sjekk ut float-egenskapen.

[haugsand]

Det er også mulig å midtstille et posisjonert element problemfritt, dersom det bare er én kolonne:

 

element {

position: absolute;

left: 50%;

top: 0;

width: 700px;

margin: 0 0 0 -350px;

}

 

Sammendrag: margin-left skal være halvparten av width.

[PoleCat]

*klipp*

Men dersom viewport blir /mindre/ enn 700px (i dette tilfellet), vil det av boksen som er overflødig forsvinne.

[haugsand]

Stemmer, det er derfor vi foretrekker float

[FuLu]

Mange gode forslag er alt blitt nevnt, men siden noen må mates med teskje av og til, så har jeg lagt opp et eksempel

 

http://home.chello.no/alexholm/hw.no/estigma/

http://home.chello.no/alexholm/hw.no/estigma/default.css

 

Nå har jeg bare endret litt på HTML så du får et #innhold område. Kommenterte vekk <img> siden jeg ikke hadde noen bilder (men jeg foretrekker egentlig å ha bilder i CSS'en ved bruk av background)

 

Jeg endret CSS på #venstre og #hoyre slik at de floater istedet.

 

Som du ser, så strekker ikke venstre eller høyre kolonne seg helt ned. Dette er normalt, og en metode nevnt av arve87, fauxcolumns er da en metode for å få bakgrunnen visuelt til å strekke seg helt ned.

 

Footeren er der med clear: both; for at #wrap skal strekke seg helt ned, uten denne ville #wrap kollapset pga alle float'ene. Jeg bruker også en fix der for IE så footer ikke får ekstra rom i toppen på footer. Dvs en height: 1px for IE mens auto for alt annet.

 

Ellers har jeg ikke brukt padding (left og right) i selve #hoyre, #venstre og #innhold, men heller brukt padding på h2 og p. Grunnen er at de DIV'ene alt har satt en width, og padding pleier å legge seg til width og width blir da større enn ønsket.