✔ schwarzer Balken/Hintergrund verschiebt sich

[Sina]

Hallo,
ich bin schon seit 2 Jahren hier angemeldet und hab bisher immer durch suchen meine Probleme lösen können, doch diesmal komm ich einfach nicht weiter...

ich bin noch ziemlich neu darin was css betrifft, hab bisher nur mit frames gearbeitet

jetzt hab ich angefangen und möchte meine seite so ähnlich haben wie bei einigens Blogs, also oben header, unten nen footer und dazwischen dann der inhalt dessen fenster immer länger wird. das ganze zentriert...

Da der hintergrund allerdings einen effekt und rahmen hat (der evtl noch etwas verändert/ausgeschmückt wird) soll der text eingerückt sein.

ich versuch mich jetzt schon seit 2 Tagen daran aber komme nicht weiter, entweder wirds im Firefox falsch angezeigt oder im Internet Explorer, die ganze zeit lang wurde im Internet explorer der hintergrund rechts wiederholt sobald der text eingerückt wurde, jetzt wirds im IE richtig angezeigt aber im Firefox ist ein schwarzer balken...

http://agility-forum.de/test/test.html

hier noch der css code:

body {
background-color:#222222;
color: black;
margin:0 auto;
text-align:center;
font-size:100%; font-family: verdana, helvetica,sans-serif;
}
#main {
background-color:#222222;
color: white;
border: 0px solid black;
width: 760px;
margin: 20px auto;
text-align:center;
}
#header {
background-color:black; color:black;
text-align:left;
clear:both;
width:760px;
height:200px;
background-image:url(header.jpg);
padding:0px 0 0px 0;
border-top:0px solid black;
}
#haupt {
background-color:black;
background-image:url(bgwide.jpg);
background-repeat:repeat-y;
font-size:100%;
text-align: left;
width:760px;
padding:100px;
}
#footer {
clear:both;
width:760px;
height:95px;
background-color:black;
color:black;
background-image:url(footer.jpg);
padding:0px 0 0px 0;
border-top:0px solid black;
}

Ich hoffe ihr könnt mir helfen!

 

[Maik]

Richte Dir ein weiteres DIV ein, in dem der Inhalt / Text notiert wird, und formatiere es mit dem gewünschten Innenabstand:

#haupt {
background-color:black;
background-image:url(bgwide.jpg);
background-repeat:repeat-y;
font-size:100%;
text-align: left;
width:760px;
}

.padding {
margin:0;
padding:100px;
}

<div id="haupt">
        <div class="padding"><!-- Hier folgt der Inhalt / Text --></div>
</div>

 

[Sina]

Vielen Dank für die schnelle Hilfe Es hat funktioniert!