nicht angemeldet
Probleme bei CSS-Layout
Hallo zusammen,
ich habe mir ein eigenes CSS-Layout gebaut und habe noch zwei Probleme damit. Auch die Durchforstung vieler Seiten zu meinem Problem brachte mir keine (zufriedenstellende) Lösung.
Ich habe eine Layout bestehend aus Header, Navigation, linker Spalte und rechter Spalte (als content).
Mein HTML-Markup sieht folgendermaßen aus:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"><?php require_once('inc/navigation.php'); ?></div>
<div id="left"><?php require_once('inc/left.php'); ?></div>
<div id="content"><?php require_once('inc/content.php'); ?></div>
<div id="footer"><?php require_once('inc/footer.php'); ?></div>
</div>
</body>
Das Problem bei meinem CSS-Layout ist, dass ich die Seite gerne über die gesamte Höhe anzeigen lassen würde (egal ob content vorhanden oder nicht.) Das klappt auch, allerdings werden left und content nicht bis zum footer "gestreckt" (zu erkennen am Hintergrund!). Kennt da jemand eine vernünftige Lösung? Ausserdem bekomme ich es nicht hin, dass mein Footer so breit ist wie der header.
Hier meine CSS-Datei:
*
{
margin: 0;
padding: 0;
}
html, body {height: 100%;}
body
{
background-image: url(img/background.png);
background-attachment: fixed;
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 11px;
text-align: center;
cursor: crosshair;
}
body div {text-align: left;}
div#container
{
position: relative;
width: 85%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
border: 4px solid #000000;
background-color: #FFFFFF;
}
div#header
{
height: 75px;
padding: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
/* Left Sidebar */
div#left
{
float: left;
width: 256px;
border-right: 2px solid #FF0000;
padding: 8px 4px;
background-color: #000000;
color: #FFFFFF;
}
/* Main Content */
div#content
{
margin-left: 266px;
padding: 12px;
background-color: #FFFF33;
color: #000000;
}
/* Page Footer */
div#footer
{
clear: both;
position: absolute;
bottom: 0;
width: 85%;
height: 24px;
border-top: 2px solid #000000;
padding: 4px;
background-color: #FF0000;
color: #FFFFFF;
line-height: 24px;
text-align: center;
}
Wie gesagt. Habe schon überall nachgeschaut. Wäre super nett, wenn mir jemand weiterhelfen könnte!
MFG
teh_hahn
-
Hallo teh_hahn,
such mal gezielt nach fauxcolums, oder nach sliding-faux-colums, da wird eine Technik beschrieben, wie das funzt. Eric Meyer von www.meyerweb.com lässt sich auch darüber aus... ;-)
Ich hoffe das hilft Dir weiter
Frohes Festchen und nen ordentlichen Rutsch
Edgar