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

html.de-Forum HTML, XHTML & CSS
1

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]

Club le Baron 
<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>
[/CODE]

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;
}[/CODE]

wo hab ich da was falsch gemacht??? :oops:

2

Aufgrund der Verschachtelungen musst du das übergeordnete #middle zentrieren oder die Verschachtelung ändern.

In diesem Bereich ist allerdings überhaupt nichts zentriert, da das erforderliche

margin: 0 auto;

fehlt.

3

ja cool danke das hat schon mal funktioniert…
ein Problem gelöst, folgt gleich das nächste…xD
nun will ich meinen content-bereich in zwei teile aufteilen…
in CSS die Variablen left und right…
Codes:

[CODE]#left {
float:left;
width:430px;
margin: 0px 0px 0px 20px;
display:inline;
}

#right {
float:right;
width:350px;
height:auto;
margin: 0px 62px 20px 0px;
display:inline;
}[/CODE]

nun wird allerdings die Backgroundgrafik der Variable #content bzw #middle nicht weitergeführt…

4

Das ist dann wohl ein Fall für Faux Columns