Forum: PC-Programmierung Brauche Hilfe bei CSS: dynamische Größe zweier Bereiche


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Ben B. (Firma: Funkenflug Industries) (stromkraft)


Angehängte Dateien:

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!

: Bearbeitet durch User
von Daniel A. (daniel-a)


Lesenswert?

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

von Ben B. (Firma: Funkenflug Industries) (stromkraft)


Lesenswert?

Interessant, grid-templates kenne ich noch nicht. Ich schaue mir das 
morgen an, werde etwas Zeit brauchen um das zu übernehmen. Danke Dir!

von Εrnst B. (ernst)


Lesenswert?

Ben B. schrieb:
> Hier der zugehörige Fetzen HTML:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...

Du solltest wirklich auf HTML5 umstellen, das feiert bald 10-Jähriges...

XHTML ist lange tot, wenn es denn jemals lebendig war.

von Ben B. (Firma: Funkenflug Industries) (stromkraft)


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.

von Walter B. (walter1950)


Lesenswert?


Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.