Zentrierung von divs und Inhalt...

Status
Nicht offen für weitere Antworten.

dshock

Mitglied
Hollerö zusammen!

Vorab möchte ich erwähnen, dass ich ein ziemlicher CSS-Neuling bin...

Ich habe mir eine Page gebastelt mit insg. 4 DIVS:
#all
#header
#content
#footer

#all ist 100% breit und 98% hoch und soll die DIVS in ihm zentrieren. In diesem DIV befinden sich die drei anderen untereinander, wobei #header und #footer eine feste Größe haben und #content 100% hoch ist. Die Breite der drei DIVS #header, #content und #footer ist 992px.

Ich habe mir folgendes gebastelt:

CSS
Code:
body{
	margin:0px 0px 0px 0px;
	background:#FFFFFF;
	font-size:11px;
	font-family:Verdana, Arial, sans-serif;
	color:#666666;
}

.center{
	text-align:center;
}


#allcell{
	float:left;
	margin: auto auto 5px auto;
	width:100%;
	height:98&;
	background:#999999;
}

#headcell{
	position:relative;
	top:0px;
	margin: 0px 0px 0px 0px;
	width:992px;
	height:229px;
	background:#99CC00;
}


#contentcell{
	position:relative;
	right:0px;
	margin:0px 0px 0px 0px;
	width:992px;
	height:100%;
	background:#FFFFFF;
}

#footercell{
	position:relative;
	bottom:0px;
	margin:0px 0px 0px 0px;
	width:992px;
	height:39px;
	background:#ffcc00;
}

und die HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>bli bla blubb</title>
<link rel="stylesheet" type="text/css" media="screen" href="all.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
<div id="allcell" class="center">
  <!--allcell-->
  	<div id="headcell">
	
	</div>
	
		
	<div id="contentcell">
	
	</div>
	
	
	<div id="footercell">
	
	</div>

</div>
</body>
</html>

Mein Prob ist, dass die drei DIVS #header, #content und #footer alles zentrieren, sodass weitere DIVS innerhalb der drei nicht positioniert werden (left right wird ignoriert und zentriert).

Wäre echt super, wenn ihr mir helfen könntet! DANKE!


greets
 
Nimm mal in #header, #content und #footer jeweils text-align: left/right oder wie auch immer auf.
Ich denke das sollte helfen.

redlama
 
Status
Nicht offen für weitere Antworten.
Zurück