• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Content-Bereich wird nicht zentriert... -.-

K

kaykay16

Neues Mitglied
Juten morgen meine webfreunde...
hab die ganze Nacht schon dran gefummelt und raste bald aus...
Für eine Discothek aus meinem Ort möchte ich eine HP schreiben und habe die Grafiken soweit fertig...
dann angefangen zu schreiben:
style.css erstellt... index.html erstellt... images Verzeichnis angelegt und los...
header eingefügt... klappt... zentriert
Navi eingefügt... klappt... zentriert
content eingefügt... BÄÄM... linksbündig... egal was ich mache... ich bekomme es nicht zentriert...

hier der HTML code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Club le Baron</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>



<body>

<div id="container">
  <div id="head">
  	</div>
    
    <div id="menu"><a href="index.html"><img src="images/menu_01.gif" width="150" height="53" /></a><a href="partypics.html"><img src="images/menu_02.gif" width="203" height="53" /></a><a href="events.html"><img src="images/menu_03.gif" width="160" height="53" /></a><a href="guestbook.html"><img src="images/menu_04.gif" width="208" height="53" /></a><a href="videos.html"><img src="images/menu_05.jpg" width="149" height="53" /></a>
    </div>    
</div>

<div id="middle">
	<div id="middle2">
		<div id="content">
    		
   		</div>
	</div>
</div>


</body>
</html>

Hier der CSS Code:
Code: 
* {
	margin: 0px;
	padding: 0px;
}

body {
	padding-top: 0px;
	background-color: #01111d;
	color: #FFF;
	font-family: verdana, arial, sans-serif;
	
	text-align: left;
	letter-spacing: 1px;
}

a {color: #FFF;font-size: 14px;}

a:hover {color: #01a9c0;}

.more{float: right; font-size: 11px; color: #add8f9; font-weight: bold; text-decoration: none;}

.clear{clear:both;}

p{	margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}

#container {
	margin: 0px auto;
	width:870px;
}

#head {
	background-image:url(images/header.png);
	width:870px;
	height:250px;
	position:relative;
}

#menu {
	background-image:url(images/menu.jpg);
	width:870px;
	height:53px;
	position:relative;
}

#m01{left:30px;}
#m02{left:150px;}

#menu a{
	font-family: georgia, sans-serif;
	font-size: 20px;
	font-weight:bolder;
	color:#FFFFFF;
	text-decoration:none;
	text-transform: uppercase;
}

#middle {
	background-image:url(images/middle.jpg);
	width:870px;
	height:16px;
}

#middle2 {
	background-image:url(images/middle2.jpg);
	width:870px;
	height:15px;
}

#content {
	background-image:url(images/content.jpg);
	width:870px;
	height:16px;
}

was hab ich da falsch gemacht? :oops:
 
Ein Durcheinander. Manche Div's kannst du weglassen bzw. zusammenfassen.

Wieso ist dein content und die Div's, die es umgibt, nur wenige px hoch?

#content könntest du vom #container noch umschließen lassen, sodass es auch ein "margin:0px auto;" bekommt. Also das eine </div> über dem <middle> machst du ganz nach unten.
Damit wärst du erstmal ein Schritt weiter. Schau, was passiert und berichte.

HTML: 
<div id="container">
<div id="top"></div>
<!-- Du schließt das container-div irgendwo mitten drin, sodass #content kein margin:0 auto mehr abbekommt. -->
<div id="content></div>

</div> <!-- erst hier #container schließen -->
 
Zuletzt bearbeitet:
...das Ding ist, das dein #middle -div nicht im #container ist, der #container ist ja zentriert.

Einfach f. #middle auch ein
margin: 0 auto;

im CSS, dann ist der content samt middle auch in the middle.
 
Zu spät. Er hat seine Antwort anscheinend schon im CSS Forum bekommen.

Am einfachsten ist halt, dass er #container zuletzt schließt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben