Hallo alle zusammen,
ich habe jetzt nach geraumer Zeit halbwegs meine div container so wie ich sie haben möchte und es funktioniert auch so wie ich möchte. Nur habe ich nun das Problem des der Text den ich eintrage zwar irgendwo sein muss - da sich die höhe des divs geändert hat - aber ich sehe in nicht. Wo liegt der Hund begraben?
Schonmal danke im vorraus für die Hilfe!
PS: Ist mein erster Versuch selbst was zu schreiben, also habt Nachsicht mit mir ;-)
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/design.css">
</head>
<body>
<div id="website">
<div id="header">
</div>
<div id="main">
<div id="front" style="position: relative; z-index: 1;">
<div id="back" style="position: absolute; z-index: 0;">
</div>
<br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br>
<br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br>
<br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br>
</div>
</div>
<div id="bottom">
</div>
<div id="footer" >
</div>
</div>
</body>
</html>
CSS:
body {
background-color:black;
text-align:center;
background-image:;
background-repeat:no-repeat;
}
#website {
width:980px;
margin:0 auto;
}
#header {
width:980px;
height:200px;
background-color:#5A0000;
margin-bottom:15px;
box-shadow: 5px 5px 5px black;
}
#back {
width:980px;
height:100%;
background-image:url("bilder/mainbackground.jpg");
opacity: 0.8;
}
#front{
width:980px;
min-height:350px;
background-image:url("bilder/mainbackground1.png");
margin:0 auto;
text-align:center;
}
#main {
width:980px;
min-height:350px;
box-shadow: 5px 5px 5px black;
}
#bottom {
width:980px;
height:5px;
background-color:#5A0000;
margin:0 auto;
margin-bottom:15px;
background-image:url("bilder/unten.jpg");
box-shadow: 5px 5px 5px black;
}
#footer {
width:980px;
height:30px;
background-color:#5A0000;
text-align:center;
background-image:url("bilder/footer.jpg");
display: table-cell;
vertical-align: middle;
box-shadow: 5px 5px 5px black;
}
ich habe jetzt nach geraumer Zeit halbwegs meine div container so wie ich sie haben möchte und es funktioniert auch so wie ich möchte. Nur habe ich nun das Problem des der Text den ich eintrage zwar irgendwo sein muss - da sich die höhe des divs geändert hat - aber ich sehe in nicht. Wo liegt der Hund begraben?
Schonmal danke im vorraus für die Hilfe!
PS: Ist mein erster Versuch selbst was zu schreiben, also habt Nachsicht mit mir ;-)
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/design.css">
</head>
<body>
<div id="website">
<div id="header">
</div>
<div id="main">
<div id="front" style="position: relative; z-index: 1;">
<div id="back" style="position: absolute; z-index: 0;">
</div>
<br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br>
<br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br>
<br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br><br>TEXT</br>
</div>
</div>
<div id="bottom">
</div>
<div id="footer" >
</div>
</div>
</body>
</html>
CSS:
body {
background-color:black;
text-align:center;
background-image:;
background-repeat:no-repeat;
}
#website {
width:980px;
margin:0 auto;
}
#header {
width:980px;
height:200px;
background-color:#5A0000;
margin-bottom:15px;
box-shadow: 5px 5px 5px black;
}
#back {
width:980px;
height:100%;
background-image:url("bilder/mainbackground.jpg");
opacity: 0.8;
}
#front{
width:980px;
min-height:350px;
background-image:url("bilder/mainbackground1.png");
margin:0 auto;
text-align:center;
}
#main {
width:980px;
min-height:350px;
box-shadow: 5px 5px 5px black;
}
#bottom {
width:980px;
height:5px;
background-color:#5A0000;
margin:0 auto;
margin-bottom:15px;
background-image:url("bilder/unten.jpg");
box-shadow: 5px 5px 5px black;
}
#footer {
width:980px;
height:30px;
background-color:#5A0000;
text-align:center;
background-image:url("bilder/footer.jpg");
display: table-cell;
vertical-align: middle;
box-shadow: 5px 5px 5px black;
}