Sentrere bilde i CSS

[f00b]

Heisann, jeg driver å lager en side. Jeg skal bruke div's i css for å plassere bilder. Problemet er at jeg skal ha en side som skal være sentrert, altså i midten av nettleseren (som f.eks. denne).

 

Problemet er at jeg vet ikke hvordan jeg skal sentrere i css.

 

Dette er den jeg har nå:

#header {
position:absolute;
width:750px;
height:120px;
z-index:1;
left: 100px;
background-image: url(images/header.gif);
}

Her har jeg satt left: 100px;, dette ser sentert ut dersom jeg viser siden med en oppløsning på 1024x768, men dersom jeg prøver med høyere oppløsning så vil det ikke lenger være sentrert. Jeg er altså ute etter en 'center' funksjon.

 

Takk for hjelp

[Kim T]

#bildet {
margin: auto;
}

 

Edit: Leste feil...trodde det var siden du skulle sentrere. Men gi bildet en id. F.eks bildet. (rettet opp koden)

Endret 15. april 2006 av kimthoma

[f00b]

Noe jeg må gjøre i #header for at dette skal funke?

[Kim T]

Du kan forsøke med dette. Er litt usikker om det fungerer siden du kjører "position absolute".

 

#header {
margin: auto;
}

[f00b]

Herlig! Hjertelig takk, det funket

[f00b]

Jeg sliter fortsatt litt med dette, dersom dere tar en titt på dette bildet, så vil dere se hvordan det ser ut slik jeg har det nå. Jeg har tegnet opp to gule rektangler på hver side, som på en måte skal være rammen til siden.

 

Koden til headeren min ser slik ut:

#header {
margin:auto;
position:static;
width:750px;
height:120px;
z-index:1;
background-image: url(images/header.gif);
}

 

Spørsmål 1: Jeg slet med å få headeren midtstilt, slik som koden er nå så vil den være midtstilt. Men jeg får ikke bestemt at den skal være øverst på siden. Dersom jeg legger til en top:0px; så vil det ikke fungere ettersom margin er satt til auto. Hvordan skal jeg kunne få bestemt at bildet skal være øverst, og fortsatt ha bildet midtstilt?

 

Spørsmål 2: Dersom jeg skal ha en ramme rundt siden, slik som jeg viste på bildet ovenfor, hvordan kan jeg gjøre dette med div's?

Jeg får det til dersom jeg bruker denne koden:

#ramme {
position:absolute;
width:7px;
height:100%;
z-index:1;
left: 137px;
top: 16px;
background-image: url(images/vert_line.gif);
}

Men da vil jeg ikke kunne bestemme at den skal være vedsiden av headeren.

 

Takker så mye om noen har noen tips

[arthoz]

Ikke bruk "position: absolute/static"

 

Putt en ramme/boks rundt hele siden, sett en bredde på den, og margin: 0 auto;

 

margin: 0 auto; gjør at den putter maks margin rundt den boksen på høyre og venstre side, som vil si resten av vinduet til browseren, som gjør den midtstilt.

 

Eksempel av den er her: http://haxx.no/scroll.html