nicht angemeldet
2-Spalten Layout mit sehr breiter Tabelle
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>
-
Ich grüsse den Cosmos,
Kann mir jemand helfen ?
Das Einfachste dürfte sein, das du keine fixw Breite angibst, sondern, wie du es ansprichst, eine Mindestbreite. Diese kann sich dann an die Tabelle anpassen.
Alternativ verpasst du der Tabelle den HintergrundMöge das "Self" mit euch sein
--
Fragt ein Atom das andere: Hast du mein Elektron gesehen? Ich bin heute so positiv.
ie:{ br:> fl:| va:| ls:& fo:{ rl:( n4:{ de:] ss:) ch:? js:| mo:) sh:( zu:)-
Hi,
danke für die rasche Antwort, du hast mich da auf eine Idee gebracht.
Nach langem Nachforschen hab ich herausgefunden, dass bei einem overflow: visible nur der HTML Bereich vergrößert wird und sonst nichts. Also hab ich einfach mal versucht, das berüchtigte Hintergrundbild als background im html, body Tag einzufügen. Und siehe da auf einmal, wird das Bild über die gesamte Strecke wiederholt.
Ich weiß zwar, dass man im HTML Tag keine background angeben sollte, jedoch der CSS Validator meldet keine Fehler und im IE 7, Firefox, Opera, IE 6, gehts ohne Probleme.
Vielleicht ist es nicht die optimale Lösung, aber sie reicht mir völlig,
danke nochmal.
mfg
samP.S. wie kann man den Thread schließen?
-
hi,
Ich weiß zwar, dass man im HTML Tag keine background angeben sollte,
Wie kommst du darauf?
P.S. wie kann man den Thread schließen?
Gar nicht - zum Glück, sonst könnten solche unsinnigen Aussagen wie die oben ja auch nicht mehr hinterfragt werden.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-