So, bis eben dachte ich, ich komme mit CSS ganz gut klar. Aber wie immer
kommt irgendwann ein Problem, bei dem man sich zu dumm anstellt.
Ich habe hier einen Vorschlag für ein Layout, wo sich die beiden
Bereiche Navigation und Hauptfenster so an eine Veränderung der
Fenstergrößere anpassen sollen, daß die anderen drei Bereiche in der
Höhe gleich bleiben (sich also nur die Höhe von Navigation und
Hauptfenster ändert) und der Footer am unteren Rand des Bildschirms
verbleibt. Außerdem soll die Breite des Navigations-Bereichs konstant
bleiben.
Leider kriege ich das auf den Tod nicht hin, entweder sieht's so aus wie
auf dem Bild oder der Footer verschwindet unten aus dem Fenster.
Die weißen Bereiche im Bild müssen weg, der mittlere soll zum
Hauptfenster gehörig werden und der unter dem Footer sollte nicht mehr
entstehen weil der Footer immer unten am Fenster kleben soll.
Sollte einer der Bereiche Navigation und Hauptfenster zu groß werden,
dann sollen vertikale Scrollbalken erscheinen... aber das war Phase 2,
so weit war ich noch nicht.
Notlösung wäre absolute Positionierung und ein entsprechendes
JavaScript, was mir alles so anpasst und zurechtschiebt wie ich es haben
möchte... aber ich hoffe, daß man das vermeiden kann.
Hier der zugehörige Fetzen HTML:
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 | <html xmlns="http://www.w3.org/1999/xhtml">
|
3 | <head>
|
4 | <title>Titel</title>
|
5 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
7 | <link rel="stylesheet" SPAMFILTER-FAIL="style.css" type="text/css" />
|
8 | </head>
|
9 | <body class="body_frame">
|
10 |
|
11 | <div class="frameset">
|
12 | <div class="frameset_head">Head</div>
|
13 | <div class="frameset_headnav">Head-Navigation</div>
|
14 | <div class="frameset_variable">
|
15 | <div class="frameset_navigation">Navigation</div>
|
16 | <div class="frameset_main">Hauptfenster</div>
|
17 | </div>
|
18 | <div class="frameset_footer">Footer</div>
|
19 | </div>
|
20 |
|
21 | </body>
|
22 | </html>
|
Das CSS spare ich mir dranzuhängen, ich würde mir eines wünschen, was
funktioniert.
Ich versuch's gleich nochmal mit Tabellen, hat aber auch nicht besser
funktioniert, daher der Ansatz über die DIV-Container.
Wäre super, wenn jemand sowas schon mal gemacht hat und mir 'nen Tip
geben kann.
Danke!
Thread beobachten
Seitenaufteilung abschalten