nicht angemeldet
Wie kann ich dieses Layout mit DIVs umsetzen?
0 0 0 0 0 0 
Struppi
0
Wie kann ich dieses Layout mit DIVs umsetzen?
Hallo!
Ich möchte ein klassisches Layout mit Menübalken links, Titelbalken oben mit DIVs realisieren - Vor ewigen Zeiten hab ich das mit Frames gelöst, das ist aber wohl nicht mehr zeitgemäß:
1.) 2.)
+-------------------------+ +----+--------------------+
| DIV1 | |DIV1| DIV2 |
+----+--------------------+ | +--------------------+
| | | | | |
| | | | | |
|DIV2| DIV3 | | | DIV3 |
| | | | | |
| | | | | |
+----+--------------------+ +----+--------------------+
Der Menübalken links soll _mindestens_ so hoch sein wie das Browserfenster, der Titelbalken soll auch die ganze Breite ausfüllen. Da ergibt sich jetzt folgende Schwierigkeit:
Wenn ich im ersten Beispiel für DIV2 height='100%' angebe, dann ist die ganze Ausgabe sicher länger als das Browserfenster, weil Höhe von DIV1 + Höhe des Browserfensters (100%).
Im zweiten Beispiel habe ich das gleiche Problem mit der Breite.
Ich bräuchte also eine Höhenangabe wie "100% - 100px". Irgendeine Idee, wie ich das umsetzen kann? Vorzugsweise so, daß es auch schwachsinnige Browser wie IE verstehen?
-
Hi
Irgendeine Idee, wie ich das umsetzen kann? Vorzugsweise so, daß es auch schwachsinnige Browser wie IE verstehen?
Du musst das Rad nicht neu erfinden. Schau dir doch mal das YAML-Framework an.
Sonst könnte auch noch folgendes helfen:
Die Google Scuhergebnisse für die Stichpunkte mehrspaltiges Layout sehen auch vielversprechend aus.Obendrein sollte auch etwas passendes im Archiv zu finden sein
so long
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.-
Vielen Dank für die Hinweise, ist aber nicht so, daß ich nicht danach gegoogelt hätte - Die Schwierigkeit sind nicht die Spalten, sondern die Tatsache, daß ich gerne hätte, daß das oben beschriebene Layout das ganze Browserfenster vollständig ausfüllt. Dazu habe ich leider weder in Selfhtml noch sonstwo ein passendes Beispiel gefunden. Nur den Hinweis mit height=100% der mir aber in diesem konkreten Fall nichts nutzt.
-
Hi
vielleicht wären faux columns passende Suckworte für dich?
so long
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.-
vielleicht wären faux columns passende Suckworte für dich?
Oh danke vielmals, ich denke, das ist es... aber die Tatsache, daß man mit Graphiken arbeiten muß, um so ein simples Layout hinzukriegen, schockiert mich ein wenig. Dann ist ja das ganze Stylesheet fürn A*, denn normalerweise hab ich eine Klasse .backgroundcolor, die ich den entsprechenden elementen zuordne. Möchte ich nun die Farbe ändern, brauche ich nur den Eintrag in dieser Klasse ändern. Und nun muß ich eine Bilddatei bearbeiten?
Alle Welt schwärmt von CSS, aber so ganz hundertprozentig nachvollziehen kann ich diesen Hype nicht, einiges erscheint mir nicht besonders durchdacht. In diesem konkreten Fall erscheints mir beinahe sinnvoller, zu Table-based Layout zurückzukehren, auch wenn das immer wieder verflucht wird.
Danke Dir nochmals für Deine Hilfe!
-
Hi,
Oh danke vielmals, ich denke, das ist es... aber die Tatsache, daß man mit Graphiken arbeiten muß, um so ein simples Layout hinzukriegen, schockiert mich ein wenig.
Alle Welt schwärmt von CSS...In diesem konkreten Fall erscheints mir beinahe sinnvoller, zu Table-based Layout zurückzukehren,
Schau dich doch ein bisschen bei dynamicdrive um, da sind CSS beispiele zu hauf.
Grüße,
Engin
GYRO -
Alle Welt schwärmt von CSS, aber so ganz hundertprozentig nachvollziehen kann ich diesen Hype nicht, einiges erscheint mir nicht besonders durchdacht. In diesem konkreten Fall erscheints mir beinahe sinnvoller, zu Table-based Layout zurückzukehren, auch wenn das immer wieder verflucht wird.
Natürlich ist es sinnvoller, gerade bei deinem Entwurf, denn du hast ein Tabellendesign, dass du mit CSS umsetzen willst, das geht nur mit Gewürge. Entwerfe ein Layout das die Vorteile von CSS nutzt dann hast du die Probleme nicht mehr.
Struppi.
-
-
-
-
-
Hallo!
Vielleicht funktiert ja folgendes:
Zu 1):
Alle drei Elemente absolut positionieren, jeweils ganz oben und ganz links.
Für DIV1 Breite 100%, Höhe in px
Für DIV2 Breite in px, Höhe 100%
Für DIV3 Breite und Höhe 100%
Innerhalb von DIV2 und DIV3 jeweils ein weiteres Element für den Inhalt definieren und mit margin an die richtige Stelle schieben.
DIV1,2 und 3 gegebenenfalls mit z-index sortieren.Habe es nicht ausprobiert, aber vielleicht geht es ja so.
