CSS - sentrering av body-element

[kdog]

Følgende kode bruker jeg nå, men ønsker å ha hele websiden sentrert i nettleseren. Bagrunnen i body-elementet inneholder logo, så både menyen og innholdet må være "fixed" i den flytende sentrerte body-en. Har søkt en del, men finner bare måter å sentrere hver div-element, ikke body.

 

 

body{
background: rgb(76,98,80) url('ren_bakgrunn.png') no-repeat;
background-position: 25px 25px;
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
}

a{color: rgb(200,200,200)}
img { border:0;
}
address{color: rgb(50,50,50);
font-size: 12px;
}

#meny{
position: absolute;
width: 200px;
heigth: 415px;
left: 35px;
top: 250px;
background: transparent;
overflow: hidden;
font-size: 11px;
font-family: Arial;
font-weight: bold;
line-height: 18px;
}

#innhold{
position: absolute;
width: 420px;
heigth: 415px;
left: 225px;
top: 200px;
background: transparent;
font-size: 16px;
	font-family: Baskerville;
line-height: 19px;
font-weight:bold;
}

[semafor]

Når mange eksempler forteller at du skal sentrere en div, bør du kanskje revurdere det å sentrere body-elementet.

[selurdog]

Bruk css-shorthand:

 

margin: 0; (dette setter alle til 0, istedetfor å spesifisere alle hver for seg)

font: bold 11px Arial;

[j--]

1) sett riktig doctype

2) Gjør som semafor skriver; Lag en div som du gir id-en "wrapper" (eller lignende), og sløyf marginer på body-elementet.

3) Shorthand, som selurdog skriver! (det vil ikke hjelpe deg med å sentrere siden, men det vil spare deg mye tid og mye kode. Les mer om det på SitePoint )

 

---

 

Redigerte litt på CSS-en din for å passe med en wrapper-div. Spør om det er noe der du ikke forstår!

*{
margin: 0;
padding: 0;
}

body{
background: rgb(76,98,80) url('ren_bakgrunn.png') no-repeat;
background-position: 25px 25px;
}

a{
color: rgb(200,200,200)
}

img {
border:0;
}

address{
color: rgb(50,50,50);
font-size: 12px;
}

#wrapper{
width: 600px;
margin: 0 auto;
}

#meny{
position: absolute;
width: 200px;
heigth: 415px;
left: 35px;
top: 250px;
background: transparent;
overflow: hidden;
font-size: 11px;
font-family: Arial;
font-weight: bold;
line-height: 18px;
}

#innhold{
position: absolute;
width: 420px;
heigth: 415px;
left: 225px;
top: 200px;
background: transparent;
font-size: 16px;
font-family: Baskerville;
line-height: 19px;
font-weight:bold;
}

[kdog]

Takk for hjelpen.

 

Nå er det plutselig noe som overstyrer "line-height". Er det margin i "*"?

 

Er det "auto" i margin som skal/burde sentrert innholdet?

[Steinmann]

Forstår ikke hvorfor dere ikke lar mannen sentrere body elementet sitt altså...

[kdog]

Forstår ikke hvorfor dere ikke lar mannen sentrere body elementet sitt altså...

Hva er i så fall trikset? "Rett kode" bryr jeg meg strengt tatt ikke så mye om, så lenge resultatet er tilfredsstillende..

[semafor]

Hva er i så fall trikset? "Rett kode" bryr jeg meg strengt tatt ikke så mye om, så lenge resultatet er tilfredsstillende..

Strikset er å strengt tatt bry seg om koden, slik at resultatet blir tilfredsstillende.

 

Og løsningen ligger her: Schwing!

[eivihnd]

Vel, selv om EKSEMPLENE der ute sier at du skal bruke wrapper, sier EKSPERTENE (blant annet Eric Meyer) at det ikke er nødvendig. Det fører bare til mer markup.

 

Slik kan du sentrere siden uten wrapper, og holde koden enkel og clean:

html {
text-align: center;
background: #000;
}

body {
text-align: left;
margin: 0 auto;
width: 960px;	  <- Viktig med bredden på siden!
}

 

Og "rett kode" er det viktigste av alt!

Med rett kode trenger du lite eller ingen spesiell tweaking og hacking av koden når du skal vise i IE 5.5 / 6.0

Endret 28. januar 2008 av eivihnd

[Haraldson]

Og "rett kode" er det viktigste av alt!

Med rett kode trenger du lite eller ingen spesiell tweaking og hacking av koden når du skal vise i IE 5.5 / 6.0

Vel, dette strider jo direkte med hva du hiver inn i eksempelet ditt. Text-align-egenskapen på html er en hack for å sentrere i IE5 og nedover.

 

Om en vil støtte så gamle nettlesere eller ikke er jo opp til en selv, men som regel klarer man seg med rett doctype og margin: 0 auto; + bredde.

[semafor]

fail

 

Skal du støtte browsere av nyere dato, har du rett. Som oftest er ikke dette tilfellet.

 

http://annevankesteren.nl/2003/12/your-bod...t-is-just-a-div

[kdog]

Men dette går ikke overens med position:absolute på Meny og innhold?

[Haraldson]

Joda. Så lenge du har bredden på menyen og innholdet, midstiller du på følgende måte;

 

elem {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px; /* Legg merke til at margin-left er width/2 */
}

[eivihnd]

Og "rett kode" er det viktigste av alt!

Med rett kode trenger du lite eller ingen spesiell tweaking og hacking av koden når du skal vise i IE 5.5 / 6.0

Vel, dette strider jo direkte med hva du hiver inn i eksempelet ditt. Text-align-egenskapen på html er en hack for å sentrere i IE5 og nedover.

 

Om en vil støtte så gamle nettlesere eller ikke er jo opp til en selv, men som regel klarer man seg med rett doctype og margin: 0 auto; + bredde.

 

Sant nok, kunne fjernet text-align. Kommer an på målgruppen...

Pr i dag er det så få som bruker IE5.5 at jeg har nesten sluttet å ta den med i beregningene når jeg skriver kode. Det bare sitter i fingrene

 

Men hvor vanlig er egentlig absolute position? Har ikke brukt det på flere år.

[kdog]

Men hvor vanlig er egentlig absolute position? Har ikke brukt det på flere år.

 

Jeg vet ikke bedre Det var en enkel måte å plassere menyen og innholdet på rett sted.

 

Skal leke meg litt mer med sentrering og relative posisjoner. Takk for alle svar.

[Haraldson]

Jeg bruker position stort sett i hvert prosjekt jeg koder. Fint for å ta elementer ut av sideflyten og annet snæks.

[Steinmann]

Position er flottflott.

Skal man bruke position: absolute er det viktig og også forstå position: relative