nicht angemeldet
Hallo,
ich hab ein Problem:
ich versuch gerade ein einfaches 2 spaltiges DIV-Layout zu erzeugen (Top, Menu, Content). Das Top-div hat ein Hintergrundbild das über die gesamten Breite wiederholt werden soll und der content Bereich sollte eine Mindestbreite von 600px aufweisen. Bis jetzt habe ich das mit position:absolute erledigt.
Geht eigentlich ganz gut, nur jetzt habe ich im content eine Tabelle die sehr sehr breit ist. Weil die Tabelle so breit ist schiebt sich der Inhalt über das Content-Div hinaus und das Fenster wird scollbar. Jedoch - und hier ist der eigentliche Haken - wird das TOP-Div in seiner Breite nicht verändert, wodurch das Hintergrundbild beim Scrollen einfach aufhört, anstatt über die wirkliche gesamte Breite zu gehen.
Kann mir jemand helfen ?
P.S.: die Lösung sollte im ie, firefox und opera gehen.
CSS:
html, body
{
font-family: Arial, Geneva, Verdana, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: auto;
background-color: #ffffff;
}
.top
{
background-color: white;
background-image: url("images/menu/top.gif");
background-repeat: repeat-x;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 94px;
}
.menu
{
text-align: left;
padding: 0 5px 0 10px;
position: absolute;
top: 100px;
left: 0;
width: 115px;
height: auto;
background-color: white;
}
.content
{
position: absolute;
top: 100px;
left: 130px;
width: 600px;
height: auto;
margin-right: 20px;
}
table.history
{
padding-top: 20px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html">
<link rel="stylesheet" title="orange" href="test.css" type="text/css">
</head>
<body>
<div class="top">BANNER</div>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="content">
<table class="history">
<tr>
<td>AAAAAAAAAAAAAAAAAAAAAAAAAAA</td><td>AAAAAAAAAAAAAAAAAAAAAAAAAAA</td><td>AAAAAAAAAAAAAAAAAAAAAAAAAAA</td><td>AAAAAAAAAAAAAAAAAAAAAAAAAAA</td><td>AAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</table>
</div>
</body>
</html>