Zur Navigation

<div>-Layer in CSS zentrieren [5]

41 Firesheep

Könnte einer mir sagen wieso,der Internet Explorer das nicht zentrieren kann und alles untereinander verschiebt und andere machen es richtig?

<html>
<title>Div Container </title>
<head>
<style type="text/css">

<!--

#divHeader{
position: relative;
background-color: FFFF00;
height: 160;
width: 980;
text-align: center;
}
#divNavi{
position: relative;
background-color: #FF0000;
height: 900;
width: 180;
margin: 0 auto ;
float: left;
}
#divcontent {
position: relative;
background-color: #4682b4;
height: 900;
width: 800;
margin: 0px 180px ;

}
#divfooter
{
position: relative;
background-color: #9acd32;
height: 60;
width: 980;
text-align: center;

}
-->
</style>
</head>
<body>
<div style="margin:0 auto; width:980px">
<div id="divHeader"><h1>Herzlich Willkommen</h1></div>
<div id="divNavi">
<p>Startseite</p>
<p>Programm</p>
<p>Stadtplan</p>
<p>Hintergrund</p>
<p>Kontakt</p>
</div>
<div id="divcontent">Guten Tag</div>
<div id="divfooter">Diese Seite ist mein versuch</div>
</div>
</body>
</html>

09.09.2009 11:02

42 Jörg Kruse

Deinem Code fehlt eine Doctype-Angabe - dadurch läuft der Internet Explorer im Quirks Modus (siehe hierzu auch den Thread zum Thema Doctype Switching). Wenn du eine Doctype-Angabe für strictes HTML oder XHTML einfügst, interpretiert auch der IE die CSS-Angaben korrekt.

09.09.2009 11:16

43 Firesheep (Gast)

Ich kriege es einfach nicht auf die reihe,jetzt passt da was mit der farbe nicht keine mehr da

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Div Container </title>


</head>
<body>


<!--

#divHeader{
position: relative;
background-color: FFFF00;
height: 160;
width: 980;
text-align: center;
}
#divNavi{
position: relative;
background-color: #FF0000;
height: 900;
width: 180;
margin: 0px auto ;
float: left;
overflow:hidden;
padding-left:40px;
}
#divcontent {
position: relative;
background-color: #4682b4;
height: 900;
width: 800;
margin: 0px 180px ;

}
#divfooter
{
position: relative;
background-color: #9acd32;
height: 60;
width: 980;
text-align: center;

}



-->


<div style="margin:0px auto; width:980px">
<div id="divHeader"><h1>Herzlich Willkommen</h1></div>
<div id="divNavi">
<p>Startseite</p>
<p>Programm</p>
<p>Stadtplan</p>
<p>Hintergrund</p>
<p>Kontakt</p>
</div>
<div id="divcontent">Guten Tag</div>
<div id="divfooter">Diese Seite ist mein versuch</div>
</div>
</body>
</html>

09.09.2009 15:06

44 Jörg Kruse

Die CSS-Angaben müssen von style Tags umschlossen werden, welche wiederum im head Bereich platziert werden sollten - so wie das in deinen vorigen Code-Beispielen der Fall war.

09.09.2009 15:36

45 Firesheep (Gast)

Ich habe den code raus gesucht aber der IE8 baut es einfach falsch auf.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<HTML="http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=8" />

10.09.2009 08:20

46 Jörg Kruse

So sollte die Doctype-Angabe ausschauen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>

Und wenn es dann immer noch Anzeigeprobleme im IE gibt, bitte den gesamten aktuellen Code posten (am besten in einem Codeblock, d.h. zwischen [code] und [/code] - dann sind die Beiträge lesbarer)

10.09.2009 14:48

... 1 Jahr und 1 Monat später ...

47 Olli (Gast)

Ich habe da auch mal ein Problem... ich hab das auch versucht zu zentrieren alles allerdings mit verschachtelten div tags und meine seite ist einfach mega lang und ich weiß beim besten willen nicht wieso die so lang ist... anbei mal mein code:

body {
background-image:url(flow-light-wallpapers_8222_1920x1200.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment:fixed;
}

div#wrapper {
	width:960px;
	margin:0 auto;
	max-height: 1200px;
}

div#head {
height: 200px;
width: 960px;
}

div#headspace {
height:10px;
top:auto;
}

div#headnav {
height: 32px;
width: 960px;
left: 0px;
top: 210px;
background-image:url(headnav.png);
}

div#headnavborder {
width:960px;
height:1px;
top:242px;
background:#000000;
}

div#nav {
height: 700px;
width: 199px;
left: 0px;
top: 0px;
padding-left: 10px;
padding-top: 10px;
background-image:url(nav.png);
background-repeat:no-repeat;
}

div#navborder {
height: 700px;
width: 1px;
left: 199px;
top: -710px;
background: #000000;
position:relative;
}

div#content {
	height: 700px;
	width: 760px;
	left: 200px;
	top: -1410px;
	padding-left: 10px;
	padding-top: 10px;
	background-image:url(content.png);
	background-repeat:no-repeat;
	position:relative;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Eigenes Projekt</title>
</head>

<body>
<div id="wrapper">
<div id="head">
<img src="header2.png" /></div>

<div id="headspace"></div>

<div id="headnav"></div>

<div id="headnavborder"></div>

<div id="nav">Link 1<br />Link 2</div>

<div id="navborder"></div>
<div id="content"> sjkhdfkjsdhfkshdfjksdh fkjshdfkjshdfhgsdjfvevbhd bfcsjhdgfksdhbfkshdfkjshdbfkhsbgfkhsdbgfhsdbfhsb fhsdbfhsdbfhsbdfhsdbfhsdgfviewnkdnflhsbflksdbfslah bfösafbshlfblaskhdvfsahldfhskdfkj</div>
-
</div>
</body>
</html>

27.10.2010 22:00

... 2 Jahre und 7 Monate später ...

49 markuz

Haben auf unserem Blog auch ein Artikel über genau dieses Thema geschrieben:

DIV in anderem DIV zentrieren

[Edit Jörg: Link mit "nofollow" Attribut versehen]

20.06.2013 08:34 | geändert von Jörg: 20.06.2013 13:35

50 Jörg Kruse

Naja, darin beschreibst du nichts anderes, als in den Beiträgen 1 und 2 dieses Thread geschrieben wurde. Diese sind übrigens mittlerweile über acht Jahre alt. Den IE 5 muss man im Jahre 2013 nun wirklich nicht mehr berücksichtigen, so dass man einfach einen stricten Doctype verwendet, falls man noch nicht HTML 5 einsetzt, dann reicht zur Zentrierung das margin:auto.

20.06.2013 13:40