✔ Homepage Zentriert?

cille · 10. Januar 2007

Hi ho,
finde den fehler nicht warum die Homepage nicht zentriert ist.

HTML code:

HTML:

<html>
<head>
<title>Der Titel ist geil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="ie-fix">
	<div class="hp">
		<div class="id01"><img src="images/01.gif" width="800" height="24" alt=""></div>
		<div class="id02"></div>
		<div class="id03"><img src="images/03.gif" width="800" height="17" alt=""></div>
		<div class="content"></div>
		<div class="id05"><img src="images/05.gif" width="261" height="428" alt=""></div>
		<div class="id06"></div>
		<div class="id07"><img src="images/07.gif" width="5" height="29" alt=""></div>
		<div class="id08"><img src="images/08.gif" width="795" height="1" alt=""></div>
		<div class="id09"><img src="images/09.gif" width="800" height="27" alt=""></div>
	</div>
</div>
</body>
</html>

CSS Code:

HTML:

body {
	background-color: #ffffff;; 
}


.hp {
	margin: 0 auto;
	width:800px;
	height:549px;
	text-align: center;
}
.id01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:24px;
}

.id02 {
	position:absolute;
	left:0px;
	top:24px;
	width:800px;
	height:25px;
	background-image: url(images/02.gif);
}

.id03 {
	position:absolute;
	left:0px;
	top:49px;
	width:800px;
	height:17px;
}

.content {
	position:absolute;
	left:0px;
	top:66px;
	width:539px;
	height:428px;
	background-image: url(images/04.gif);
}

.id05 {
	position:absolute;
	left:539px;
	top:66px;
	width:261px;
	height:428px;
}

.id06 {
	position:absolute;
	left:0px;
	top:494px;
	width:795px;
	height:28px;
	background-image: url(images/06.gif);
}

.id07 {
	position:absolute;
	left:795px;
	top:494px;
	width:5px;
	height:29px;
}

.id08 {
	position:absolute;
	left:0px;
	top:522px;
	width:795px;
	height:1px;
}

.id09 {
	position:absolute;
	left:0px;
	top:523px;
	width:800px;
	height:27px;
}

Also diese muss Vertikal und Horizontal zentriert sein, finde den fehler aber nicht

habe mal den standard code ohne vertical eigenschaften usw. gepostet.

Würde mich riesig freuen.

Mfg,
cille

hela · 10. Januar 2007

cille hat gesagt.:
... Würde mich riesig freuen.

Worüber?

In deinem Quelltext sind mit Ausnahme des DIV.hp-Blockes alle DIV-Blöcke absolut positioniert.

selfHTML hat gesagt.:
Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst.

Zitatquelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Ich hoffe, das hilft dir zur Fehlerfindung weiter.

Maik · 10. Januar 2007

Hi,

wie hela schon richtig darauf hinwies, muss in deinem Fall das umgebende DIV .hp ebenfalls positioniert werden.

Mit der folgenden Regelerweiterung wird es, wie von dir gewünscht, in der Horizontalen und Vertikalen zentriert:

Code:

.hp {
        position: relative;
        left: 50%;
        margin-left: -400px; /* negative Hälfte von width:800px */
        top: 50%;
        margin-top: -274.5px; /* negative Hälfte von height:549px */
	width:800px;
	height:549px;
	text-align: center;
}

✔ Homepage Zentriert?

cille

Erfahrenes Mitglied

hela

Maik

Neue Beiträge