✔ CSS-Layout Frage (div's zentrieren)

Status
Nicht offen für weitere Antworten.
P

pÄd

Grünschnabel
Hi,

ich habe eine Frage bezüglich meines Layouts. Und zwar wollte ich, dass das Layout sich in der Mitte von der Seite befindet. Ich habe schon einiges versucht aber bin nicht zu einer Lösung gekommen.

Code: 
html,body {
height:100%;
margin-top: 0;
}

#center {
	position:absolute;
	left:50%;
}

#main {
position:absolute;
min-height:100%;
width:734px;
background-color:#898989;
}


#top {
position:absolute;
top:0;
left:2px;
width:730px;
height:191px;
background-position: center;
background-image: url(images/index_02.jpg);
}

#topbar {
position:absolute;
top:191px;
left:2px;
width:730px;
height:24px;
background-image: url(images/index_04.jpg);
}


#content {
position:absolute;
top:215px;
left:2px;
bottom:67px;
width:730px;
background-image: url(images/index_06.jpg);
}

#footer {
position:absolute;
bottom:0;
left:2px;
width:730px;
height:67px;
background-image: url(images/index_07.jpg);
}

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

<html>
<head>
	<title>untitled</title>
		<link rel="stylesheet" href="style.css" type="text/css"> 
</head>

<body bgcolor="#111111">

<div id="center">
	<div id="main">
		<div id="top"></div>
		
		<div id="topbar">
			<div></div>
		</div>
		
		<div id="content">
			<div></div>
		</div>
		
		<div id="footer"></div>
	</div>
</div>
	
</body>
</html>


Achso und ich wollte dass jeder Browser die Page richtig darstellt, aber im IE verhaut es das Layout total.. bis jetzt konnte ich nur IE und FF ausprobieren..
 
Hi,

das Stylesheet funktioniert in allen mir zur Verfügung stehenden Browsern:

Code: 
body {
background:#111111;
}

#main {
position:absolute;
left:50%;
min-height:100%;
height:auto !important;
height:100%;
width:734px;
margin-left:-367px; /* negative Hälfte von width:734px */
background-color:#898989;
}

Code: 
<body>

<div id="main">
	<div id="top"></div>
		
	<div id="topbar">
		<div></div>
	</div>
		
	<div id="content">
		<div></div>
	</div>
		
	<div id="footer"></div>
</div>
	
</body>
 
Vielen Dank!

Das Problem im Firefox wurde behoben :)
Jetzt fehlt nurnoch der Internet-Explorer.. der zeigt es immernoch falsch an.

MfG
 
Versuch es mal mit diesem Stylesheet:

Code: 
html,body {
height:100%;
margin:0;
padding:0;
}

body {
background:#111111;
}

#main {
position:absolute;
left:50%;
min-height:100%;
height:auto !important;
height:100%;
width:734px;
margin-left:-367px; /* negative Hälfte von width:734px */
background:#898989;
}

#top {
position:absolute;
top:0;
left:2px;
width:730px;
height:191px;
background:url(images/index_02.jpg) center;
z-index:2;
}

#topbar {
position:absolute;
top:191px;
left:2px;
width:730px;
height:24px;
background:url(images/index_04.jpg);
z-index:2;
}

#content {
position:absolute;
top:215px;
left:2px;
bottom:67px;
width:730px;
background:url(images/index_06.jpg);
}

/* Für IE */
* html #content {
top:0;
height:100%;
border-top:215px solid #898989;
border-bottom:68px solid #898989;
z-index:1;
}

#footer {
position:absolute;
bottom:0;
left:2px;
width:730px;
height:67px;
background:url(images/index_07.jpg);
z-index:2;
}
 
Also jetzt wird schonmal alles im IE angezeigt. Aber Wenn ein langer Text kommt dann verschiebt er den Footer nicht nach unten sonder der Footer überdeckt einen Teil vom Text und der Text geht dann unten Weiter.

Nochmals Danke :)
MfG
 
Hi,

in diesem Fall muss das Layout grundsätzlich anders konzipiert werden, denn deine Variante eignet sich für einen scrollfähigen Inhaltsbereich #content.

Code: 
html,body {
height:100%;
margin:0;
padding:0;
}

body {
background:#111;
}

#main {
position:relative;
left:50%;
min-height:100%;
height:auto !important;
height:100%;
width:730px;
padding:0 2px;
margin-left:-367px;
background:url(images/index_06.jpg) 2px 0 repeat-y;
}

#top {
width:730px;
height:191px;
background:url(images/index_02.jpg) center;
}

#topbar {
width:730px;
height:24px;
background:url(images/index_04.jpg);
}

#content {
width:730px;
padding-bottom:68px;
}

#footer {
position:absolute;
bottom:0;
left:2px;
width:730px;
height:67px;
background:url(images/index_07.jpg);
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück