nicht angemeldet
Hallo zusammen,
Ich stehe vor einem kleinen Design-Problem und hoffe ihr könnt mir helfen.
Ich bin gerade dabei das Table-Layout von meiner Seite in ein Div-Layout umzubauen! Klappte bis auf einige kleine Problemchen etc. auch ganz gut, aber an einer stelle hänge ich jetzt schon 2 Stunden und weiß nicht, wie ich das bewerkstelligt kriege:
Das Layout sieht folgendermaßen aus: http://svst.nhonnef.de/markup.png
Zur Erklärung: Ganz oben ist ein Header, dann kommt links ein Menü gefolgt von einem Submenü rechts und darunter der Content-Bereich! Wichtig ist, dass Header+Submenü+Content zusammen 100% des Browserfensters ergeben sollen, also oben und unten abschließen. Das geht auch soweit ganz gut, bis auf 2 Probleme:
1. Unterhalb des Content-Divs soll noch ein kleiner Rand von etwa 10px bleiben. Da ich aber die Höhe auf 100% gesetzt habe wird dieser nicht angezeigt bzw. das Div geht sogar noch über den Browserrand hinaus. Ließe sich mit einem position: fixed zwar regeln, aber da sich die Höhe des Submenüs verändern kann wüsste ich nicht, wie ich den oberen Rand definieren sollte.
(Screen: http://svst.nhonnef.de/screen1.png - Ganz unten)
2. Das zweite Problem hat was mit dem ersten zutun: Wenn der Inhalt des Content-Divs länger ist als das Browserfenster, dann wird zwar wie gewollt ein Scrollbalken am Div angezeit, dieser geht aber über die Länge des Browserfensters hinaus, sodass man den unteren Pfeil der Scrollleiste nicht mehr sehen kann.
(Screen: http://svst.nhonnef.de/screen2.png - Ganz unten rechts)
Aussehen soll es eigentlich so: http://svst.nhonnef.de/screen3.png (Das ist jetzt mit position: fixed, was aber in der Praxis aus schon genannten Gründen nicht geht!
Mein Quelltext sieht vereinfacht folgendermaßen aus:
============================== CSS ==================================
div.head
{
background: white;
color: #2E71B8;
width: 100%;
height: 84px;
}
div.content
{
position: fixed;
top: 84px;
bottom: 0px;
overflow: hidden;
}
div.InterfaceDiv
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.menu
{
padding: 5px;
float: left;
width: 175px;
}
div.main
{
padding: 5px;
height: 100%;
overflow: hidden;
}
div.homeDiv
{
padding: 10px;
overflow: auto;
height: 100%;
width: 100%
margin-bottom: 10px;
}
============================= HTML ==================================
<html>
<body>
<div class="head">Das ist der Header</div>
<div class="content">
<div class="interfaceDiv">
<div class="menu">Hier steht das Manü</div>
<div class="main">
<div class="submenu">Hier steht das Submenü</div>
<div class="homeDiv">Und hier steht der eigentliche Inhalt</div>
</div>
</div>
</div>
</body>
</html>
... das muss leider so sehr verschachtelt sein, weil ich die Inhalte der Divs teilweise per AJAX lade und da auch andere Layouts geladen werden könnten. Also ich bin bisher der Meinung, dass es dafür so verschachtelt sein muss. ^^
So...viel Text für ein kleines Problem. Ich hoffe ihr wisst Rat!
Lg Niko