Avatar billede krk Nybegynder
28. juli 2007 - 11:49 Der er 10 kommentarer og
1 løsning

Hvorfor centreres siden ikke i IE

Hvorfor bliver det ikke centreret?
Min kode ser sådan ud
css:
body{background:#000;overflow:hidden;}
#page{margin: 0 auto;width:860px;background:pink;height:20px;}

htnl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AddOnAx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="xxx2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">

</div>
</body>
</html>
Avatar billede goya Novice
28. juli 2007 - 12:22 #1
du kan centrere et div tag på denne her måde:
#maincontainer
{
    position:absolute;
    width:900px;
    height:2183px;
    z-index:1;
    top: 0px;
    background-color: #000000;
    left: 50%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin-left: -450px;
    visibility: visible;
}
hilsen
goya
Avatar billede krk Nybegynder
28. juli 2007 - 12:55 #2
Det virker som rimeligt meget kode, men et okay forslag. Jeg har ikke testet om det virker fordi jeg har endelig selv fundet ud af hvad der er forkert.
Der skal stå:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Er der nogen der kan forklare hvad den sidste sætning ("http://www.w3.org/TR/html4/loose.dtd") betyder eller hvorfor den skal med?
Avatar billede robn Nybegynder
28. juli 2007 - 14:56 #3
den skal med, for ellers går din browser i "Quirks" mode, den prøver at gætte og accepterer tidligere standard, som efter html 4.01 er forældet,

http://www.alistapart.com/stories/doctype/

Du kan kun regne med, at html 4.01s standard bliver overholdt, hvis du skriver din doctype helt ud.
Avatar billede goya Novice
28. juli 2007 - 16:33 #4
det her kode er ikke ret meget, det centrerer et,
div id=maincontainer (eksempel)
det der er vigtigt er de her linier

#maincontainer
{
    position:absolute;
    width:900px;
    margin-left: -450px;
    visibility: visible;
}

:-)
Avatar billede goya Novice
28. juli 2007 - 16:36 #5
sorry:
#maincontainer
{
    position:absolute;
    width:900px;
    height:2183px;
    z-index:1;
    top: 0px;
    left: 50%;
    margin-left: -450px;

}

hvor margen left har en minus værdi der svarer til halvdelen af dit <Div>
plus de left: 50%

:-)
Avatar billede apo Praktikant
28. juli 2007 - 16:51 #6
Svaret er simpelt: Div'et 'page' centreres ikke i IE fordi, du mangler linket i din DOCTYPE.

Uden linket i sidens DOCTYPE, virker 'hacket' margin:0 auto; ikke i IE - det samme gælder for det meste andet CSS.

Prøv denne i stedet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AddOnAx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="xxx2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">

</div>
</body>
</html>
Avatar billede apo Praktikant
28. juli 2007 - 16:52 #7
Jeg overså at andre havde afgivet det korrekte svar. Se blot bort fra mit svar :o)
Avatar billede krk Nybegynder
28. juli 2007 - 17:12 #8
ikke for at være på tværs eller noget, men i forhold til "#page{margin: 0 auto;width:860px;}" så er det da en masse ekstra linier :-)
Men smid bare et svar for jeg kan godt se at det også virker
Avatar billede goya Novice
28. juli 2007 - 18:28 #9
hmmm, der er vel flere måder at gøre det på, men på min kan jeg trække et div ind i hoved laget og det forholder sig relativt til hovedlaget, så alle mine div bliver inde i hoved laget, vel jeg er ikke nofen nørd, jeg bruger bare hvad der virker i dreamweaver :-)
du kan se det her http://www.eksperten.dk/spm/789306 hvor jeg selv har oprettet et spørgsmål ....
Avatar billede olebole Juniormester
29. juli 2007 - 01:32 #10
<ole>

goya >> Hvad der virker, er langtfra nødvendigvis god kode ... og det er din absolut ikke. 'margin: 0 auto' er den eneste logiske måde at gøre det på - og den måde, der giver mening i forhold til CSS.

Absolut positionerede elementer er et helvede, man bør holde sig langt væk fra. Det gør kun koden langt vanskeligere at vedligeholde - og besværliggør anbringelsen af elementer (som det f.eks. altid har været tilfældet i Visual Studio og andre miljøer, der udelukkende arbejder med absolut positionering).
Absolut positionering kan være udmærket til enkelte løsninger (f.eks. elementer i relativt positionerede elementer), men det bør ikke bruges generelt ... dét er god CSS  ;o)

/mvh
</bole>
Avatar billede krk Nybegynder
19. august 2007 - 17:41 #11
lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester