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

Eine eigene Frage? Dieser Thread ist über 2 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.