nicht angemeldet
Hallöchen,
ich hänge derzeit an einem kleinen Problem fest.
Ich habe ein Layout, das im Grunde aus zwei vertikalen Spalten besteht, wobei die linke der beiden Spalten eine feste Breite und die komplette verfügbare Höhe hat und die rechte Spalte den Rest des Anzeigebereichs ausfüllen soll, also ebenfalls die komplett verfügbare Höhe haben soll und als Breite die noch verfügbare Breite.
Die rechte Spalte wiederum soll dann in eine Kopfzeile mit fester Höhe und einen Hauptbereich, der die restliche Höhe ausfüllt, aufgeteilt werden.
Zur besseren Vorstellung habe ich ein Schema des Layouts erstellt (externer Link da wahrscheinlich zu groß für diesen Anzeigeberich):
http://s159880906.online.de/layoutbeispiel.jpg
Meine bisherige Idee war folgendes:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<style type="text/css">
/* <![CDATA[ */
/****************************/
/* Allgemeine Einstellungen */
html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: arial, helvetica, sans-serif, sans;
background: white;
}
/****************************/
/***********************************/
/* Einstellungen für grundlegende
Struktur-Elemente */
#left
{
width: 200px;
height: 100%;
padding-left: 5px;
background: #ebeae8;
overflow-y: scroll;
float: left;
}
#right
{
height: 100%;
}
#top
{
background: #ebeae8;
height: 120px;
}
/***********************************/
/* ]]> */
</style
<!-- ... --->
</head>
<body>
<!-- linke Spalte -->
<div id="left">
<!-- Inhalt der vertikalen Navigation -->
</div>
<!-- rechte Spalte -->
<div id="right">
<!-- Kopfzeile der rechten Spalte -->
<div id="top">
<!-- Weitere Navigationselemente -->
</div>
<!-- Inhaltsbereich -->
<div id="main">
<!-- Diagramme und Co. -->
</div>
</div>
</body>
</html>
In der Grafik habe ich schon beschrieben, dass in den Hauptbereich per flot (jQuery-Erweiterung) dynamische Diagramme geschrieben werden sollen.
Eigentlich sieht das auch schon so aus, wie die Vorgabe, doch es gibt zwei Probleme:
Der main-Bereich ist nur so hoch wie sein Inhalt und daher würde overflow-y: scroll nichts bringen, ebenso ist hier height: 100% nicht hilfreich, da das div-Element dann über das untere Seitenende hinausragt, weil es die Höhe des übergeordneten Elements annimmt.
Zweitens zerreißen die flot-Charts das Layout (ich habe an den Einstellungen der Charts noch nichts geändert). Die flot-Charts werden in einem vorgegebenen Container erstellt (z.B. erstellt man ein div-Element mit gewissen Dimensionen und übergibt dieses bzw. dessen ID an die Plotter-Funktion), dem dann automatisch die CSS-Eigenschaft "position: relative" zugewiesen wird, da die weiteren Elemente, die zur Darstellung des Diagramms automatisch im Container erstellt werden, dann per "position: absolute" relativ zum Container plaziert werden - oder so ist es zumindest geplant, denn sie rutschen einfach an den ganz linken Rand des Anzeigebereichs.
Was habe ich hier übersehen, bzw. wie könnte ich das anders lösen? Ich würde sehr gerne auf JavaScript - abgesehen von den Diagrammen - verzichten und anstatt die mögliche Größe für div#main per JS auszulesen und dann entsprechend die height-Eigenschaft von div#main zu setzen lieber das Ganze falls möglich auch ohne JS funktionsfähig haben.
Vielen Dank schonmal an diejenigen, die sich dieser langen Nachricht annehmen :)
Gunnar Bittersmann