Frage stellen
Normalerweise versuche ich immer ohne anderen lästig zu werden, meine Probleme zu lösen... aber dieses mal bin ich kurz vor dem Verzweifeln
Ich bin dabei meine Seite vom Tabellenlayout ins Containerlayout mit css umzumodeln...
Leider bekomme ich es trotz Hilfe von Tutorials nicht hin, dass mein Footer am Seitenende bleibt...
Hinweis1: der Container "Content" muss wegen seinem Inhalt eine flexible Höhe haben!
Hinweis2: mein Footer ist eine PNG Datei un hat runde (transparente) Ecken und muss deshalb unter dem längsten Container (Content) platziert werden
Wer kann mir sagen, wo mein Fehler liegt??
style.css
- Code: Alles auswählen
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
background:#5472ba;
}
div.main-box {
position:absolute;
left: 50%;
width:800px;
margin-left: -400px;
height: 200%;
top: 10px;
}
div.title-box {
position:absolute;
left: 50%;
width:800px;
margin-left: -400px;
height: 220px;
top: 10px;
overflow:hidden;
background:#D0E1E1;
}
div.left-box {
position:absolute;
left: 50%;
width:150px;
margin-left: -400px;
top: 230px;
height: 100%;
overflow:hidden;
background-image: url('graphics/boarder-left.jpg');
}
div.right-box {
position:absolute;
left: 50%;
width:150px;
margin-left: +250px;
top: 230px;
height: 100%;
overflow:hidden;
background-image: url('graphics/boarder-right.jpg');
}
div.middle-box {
position:absolute;
left: 50%;
width:500px;
margin-left: -250px;
top: 230px;
height: 100%;
overflow:hidden;
background:#002374;
}
div.history-box {
position:absolute;
left: 50%;
width:500px;
margin-left: -250px;
height: 20px;
overflow:hidden;
}
div.headline-box {
position:absolute;
left: 50%;
width:500px;
margin-left: -250px;
height: 50px;
top: 20px;
overflow:hidden;
}
div.content-box {
position:absolute;
left: 50%;
width:500px;
margin-left: -250px;
top: 230px;
height: 100%;
top: 70px;
overflow:hidden;
}
div.bottom-box {
position:absolute;
left: 50%;
width:800px;
margin-left: -400px;
height: 100px;
bottom:0px;
background-image: url('graphics/bottom.png');
}
index.html
- Code: Alles auswählen
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
<div class="main-box">
<div class="title-box">
<img border="0" src="title/title1.jpg" width="800" height="220"><p>
</div>
<div class="middle-box">
<div class="history-box">
<h1>Home</h1>
</div>
<div class="headline-box">
<h2>Überschrift1</h2>
</div>
<div class="content-box">
<h3>Inhalt der Seite als Blocktext</h3>
</div>
</div>
<div class="left-box">
</div>
<div class="right-box">
</div>
<div class="bottom-box">
<img border="0" src="graphics/bottom.png" width="800" height="100"><p>
</div>
</div>
</body>
</html>
