Brauche Hilfe bei CSS: dynamische Größe zweier Bereiche

Ben B. OP (Firma: Funkenflug Industries) #7542123
Lesenswert?
• ▲
▼

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!

Angehängte Dateien:
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Ben B. OP (Firma: Funkenflug Industries) #7543327
Lesenswert?
• ▲
▼

Hab das jetzt nicht gross getestet: https://jsfiddle.net/q60397ef/

So, ich habe das jetzt großteils übernommen und es funktioniert vergleichsweise gut, allerdings wäre es schön, wenn mir jemand die Dimensionierung innerhalb des grid-template-Containers nochmal erklären könnte. Ich kriege es nur zum Laufen, wenn ich die dort angegebenen Dimensionen in den einzelnen Areas wiederhole. Ich weiß nicht ob das normal ist oder ob da noch irgendwo ein Fehler drinsteckt.

Du solltest wirklich auf HTML5 umstellen, das feiert bald 10-Jähriges... XHTML ist lange tot, wenn es denn jemals lebendig war.

Lass es doch einfach. Du bist anhand Deines heute eher seltenen Vornamens mutmaßlich auch schon etwas älter, denkt Deine Frau auch regelmäßig über einen Wechsel nach weil Du keine 20 mehr bist und der Lack langsam Kratzer bekommt?

Ich fand den Stil von XHTML gut, betrachte HTML sowieso nur als Container, so oft wie das Ursprungsformat mit exponentiell steigender Geschwindigkeit erweitert wird. Ich sehe keinen großen Vorteil, explizit HTML5 zu nutzen, weil das, was man wirklich braucht, sowieso unabhängig von der (X)HTML-Variante funktionsfähig ist. Ich vermute, wenn ich mal aus Spaß ein HTML1.0-Dokument baue und darin Viewport Units in CSS verwende, wird sich keiner der oft genutzten Browser darüber beschweren.

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren