Centrering af <DIV>

bliver den ikke centret med <center> ?

<CENTER> er ikke gyldig ifølge HTML 4.01 Strict, desværre...

Ved det ikke. Du kunne lægge det en i en tabel med hæjde og bredde på 100%. Som standard er elementer heri centreret horisontalt. Men det kan jo sagtens være at du ikke kan bruge det i dit tilfælde.

Hono

Bare en lille \"fidus\" jeg fandt på ;)

Nå horisontalt - undskyld!

align=\"center\"

align=\"center\" virker det? Eller style=\"align:center;\"

> hono: table
Jeg har selv tænkt på det, men det er ikke optimalt i mit tilfælde

align=\"\" er heller ikke gyldig ifølge HTML 4.01 Strict

og style=\"align:center;\" virker ikke på DIV i hvert fald...

<center> er noget som alle browsere fatter, så brug det!

tja....skal man følge standarder, så skal man benytte standarder ;-)

<div style=\"text-align:center;\">test</div>

selve stylen er litt misvisende, men \'align\' er ikke en gyldig attributt i HTML 4.01 spesifikasjonen og det eneste alternativet er \'text-align\'

/nute

Og ellers hedder det jo \"text-align:center\"

Hvad er der galt med:

<div style=\"text-align:center;\"></div>

???

Prøv:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
<HEAD>
<!-- Minus AutoDato -->
    <TITLE>[Ingen titel]</TITLE>
<META NAME=\"Generator\" CONTENT=\"Stone\'s WebWriter 3\">
<STYLE TYPE=\"text/css\">
.boks {
    position:relative;
    width:360;
    height:50;
    padding:10;
    margin:0;
    background-color:#cccccc;
}
</STYLE>
</HEAD>
<BODY STYLE=\"text-align:center;\">
<div CLASS=\"boks\" STYLE=\"position:relative;text-align:left;\">div</div>
</BODY>
</HTML>

Hvem siger vi koder strict?

Transitional er fint nok her :)

Et eks kunne være:

<div align=\"center\">
  <table>
    <tr>
      <td></td>
    </tr>
  </table>
</div>

pelkjaer >> fidusen @ 05/01 2002 00:30:21  forteller at vi koder strict ;)

Det er ikke indholdet, der skal centreres men selve DIV\'en...

nute>>Ahh..

fidusen >> så er du nødt til å neste layers:

<div style=\"text-align:center;\"><div> TADAAA </div></div>

/nute

> pelkjaer
Transitional er for tøser :o)

nute > Smart!!

fidusen>>baahh =oD

Jeg har allerede nest\'et to layers med absolut positionering i forhold til det layer, jeg ville centrere...
Men jeg kan godt prøve at lave et tredje... 2 sec

fidusen >> du kan ikke posisjonere et layer absolutt i forhold til et annet layer. Når du posisjonerer noe absolutt, så er det absolutt i forhold til tilgjengelig plass i browservinduet. Hvis du skal posisjonere noe i forhold til et annet element aller layer, så skal du posisjoneere det relativt

/nute

Jeg sad ellers og legede med det lige før og fandt ud af at hvis jeg kom div1 ind i div2 og havde \"position: absolute; top: 15px; left: 10px;\" i div2 ville den sidde 10 pix fra div2\'s kant... hmmm...
Jeg sender lige lidt kode om 2 sec, når jeg har gjort den klar...

---------- kode ----------

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<HTML>
<HEAD>
<TITLE>Eksperten spm 154372</TITLE>
<META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<STYLE type=\"text/css\">
<!--
BODY {
background-color: #005533;
margin: 0px 0px 0px 0px;
}
#centerdiv {
position: absolute;
top: 10px;
left: 10px;
width: 900px;
height: 550px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px ridge white;
background-color: red;
}
#menudiv {
position: absolute;
top: 15px;
left: 10px;
width: 200px;
height: 400px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 0px ridge white;
background-color: yellow;
}
#maindiv {
position: absolute;
top: 15px;
left: 220px;
width: 570px;
height: 400px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 0px ridge white;
background-color: yellow;
}
-->
</STYLE>
</HEAD>
<BODY>

<DIV id=\"centerdiv\">

<DIV id=\"maindiv\">
<H1>Main</H1>
</DIV>

<DIV id=\"menudiv\">
<H1>Menu</H1>
</DIV>

</DIV>

</BODY>
</HTML>

---------- /kode ----------

Den røde div skal centreres. INde i den skal de to gule sidde med 15px til toppen af den røde.
Håber i forstår det ellers er jeg parat til at omformulere det :-)

- FiDuSeN -

prøv denne:

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<HTML>
<HEAD>
<TITLE>Eksperten spm 154372</TITLE>
<META http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<STYLE type=\"text/css\">
<!--
BODY {
background-color: #005533;
margin: 0px 0px 0px 0px;
}
#container {
  text-align:center;
}
#centerdiv {
position: relative;
top: 10px;
left: 0px;
width: 900px;
height: 550px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px ridge white;
background-color: red;
}
#menudiv {
position: absolute;
top: 15px;
left: 10px;
width: 200px;
height: 400px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 0px ridge white;
background-color: yellow;
}
#maindiv {
position: absolute;
top: 15px;
left: 220px;
width: 570px;
height: 400px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 0px ridge white;
background-color: yellow;
}
-->
</STYLE>
</HEAD>
<BODY>
<div id=\"container\">
<DIV id=\"centerdiv\">
<DIV id=\"maindiv\">
<H1>Main</H1>
</DIV>

<DIV id=\"menudiv\">
<H1>Menu</H1>
</DIV>
</DIV>
</div>

</BODY>
</HTML>

/nute

Hvad med at bruge tabeller?

sukos >> Er udelukket: fidusen 05/01 2002 00:30:21 

> Nute
Det virker!

Jeg manglede
#centerdiv {position: relative;}
da jeg forsøgte mig med et ekstra layer...

Men hvorfor skal den med?

- FiDuSeN -

les hva jeg skrev @ 05/01 2002 00:42:42 

/nute

Men hvorfor skal de to inderste DIV\'er så have position: absolute???

hov...unnskyld, jeg forklarte litt galt (det hjelper noenganger å lese spesifikasjonen ;-) )

absolute plasserer elementet absolutt i forhold til dets omsluttende element.

http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position

/nute

Ok så sku alt vist være i orden...
Tak for hjælpen alle sammen.

Points coming ur way, nute :o)

- FiDuSeN -

takker :-)

Hey. Nu ved jeg godt at spørgsmålet er lukket MEN DET VIRKER IKKE i IE6 på WinXP... Nogen der ved hvorfor?

aner ikke...sitter hverken med IE6 eller XP ;)

Jeg tror jeg laver et nyt spm hvor jeg søger en løsning på dette problem... Skal dog lige spise først.

Se det nye spm på http://www.eksperten.dk/spm/154737