Frage stellen
ich hab mir jetzt schon seit Tagen die Zähne an meinem Outfit ausgebissen, da ich es mit CSS und DIVs realisieren wollte und nicht mit Tabellen.
Ich habs mit verschachtelten DIVs, margin & padding -aufgeteilt in unterschiedliche DIVs und zusammen probiert und weis-der-Geier-was...
Das Problem ist, dass ich das Verhalten von einer Tabelle irgendwie mit DIVs nicht konstruieren kann. Entweder habe ich wegen der festen Header-Höhe und 100% bei Menü und Content einen Scrollbalken oder der Scrollbalken bei einem overflow vom Content-Div verschwindet hinter dem Header border-bottom (eine position-absolut lösung mit CSS die ich bisher auch nicht richtig hinbekommen habe -siehe ganz unten).
Wunschoutfit mit Tabellen:
- Code: Alles auswählen
<html>
<head>
<meta>
<title>neue Seite</title>
<style>
html body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #EEEEEE;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
height: 60px;
padding-bottom: 5px;
border-bottom: #FF0000 5px solid;
}
#menu
{
width: 250px;
background: #99FFFF;
border-right: #EEEEEE 5px solid;
}
#content
{
padding-left: 5px;
border-left: #99FFFF 5px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td>
BILD
</td>
</tr>
<tr>
<td>
<ul>
<li>Menuitem1</li>
<li>Menuitem2</li>
<li>Menuitem3</li>
</ul>
</td>
<td>
irgendein Inhalt
</td>
</tr>
</table>
</body>
</html>
Mein Ansatz mit CSS:
Header:
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 60px;
Menü:
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 100%;
padding-top: 65px;
Content:
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
padding: 65px 0px 0px 255px;
Hat jemand von euch eine Idee, wie ich das Outfit >exakt< so mit CSS und mit DIVs (oder auch ohne DIVs) nachempfinden kann? Es gab immer irgendwas was nicht geklappt hat...
Vielen Dank schonmal für die Hilfe
Michael