nicht angemeldet
Layout mit 2. Spaltenbreite variabel bis zu def. Max-Breite
Hallo,
ich möchte ein zweispaltiges Layout per CSS realsieren, allerdings mit folgender Besonderheit: die rechte Spalte mit dem Inhalt sollte sich in ihrer Breite anpassen, jedoch nur bis zu einer festgelegten Maximalbreite (z.B. 800px), d.h.:
a) ist das Browserfenster breiter als die festgelegte Maximalbreite, dann darf sich die Inhaltspalte auch nur bis zur definierten Maximalbreite des Gesamtlayouts ausdehnen
b) bei schmaleren Browserfenstern sollte sich die Inhaltsspalte jedoch verschmälern, so dass man nicht nach rechts scrollen muss.
c) Kopf- und Fussbereich sollten alle Breitenänderungen des Gesamtlayouts natürlich mitmachen
d) die linke Spalte mit der Navigation sollte ihre Breite fest beibehalten
e) schön wäre es noch, wenn das Gesamtlayout in breiteren Fenstern zentriert wäre.
Grundüberlegung für diese gewünschte Breitenbeschränkung ist die, das bei großen Bildschirmauflösungen ein einspaltiger Inhaltsbereich, der über die gesamte Fensterbreite geht, wegen der großen Zeilenlänge m.E. schwerer lesbar wird. Bei kleineren Fenstern müsste man ausserdem nicht horizontal scrollen, um den Inhalt zu sehen.
Ich habe bisher noch kein Beispiel für eine solche Layoutgestaltung per CSS finden können. Das könnte nun daran liegen, dass ein solches Layout per CSS nicht machbar ist oder aber daran, dass es aus Überlegungen, die mir nicht bekannt sind, nicht sinnvoll ist.
Gefunden habe ich bisher nur Layouts, die entweder eine definierte Spalten- und Gesamtbreite aufweisen oder aber mit allen (variablen) Spalten die gesamte zur Verfügung stehende Breite einnehmen.
Weiß jemand Rat, wie eine solche Seite strukturell aufgebaut sein müsste (nur grob) oder kann mir eine Website nennen, die dieses vorgeschlagene Layout nutzt?
Danke und Gruß
Stephan
-
Hallo Stephan.
a) ist das Browserfenster breiter als die festgelegte Maximalbreite, dann darf sich die Inhaltspalte auch nur bis zur definierten Maximalbreite des Gesamtlayouts ausdehnen
Hierfür gibt es http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width@title=max-width und
http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Star-HTML-Hack sowie http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width.
Ich würde diese Eigenschaften dem body-Element verpassen, damit kann man sich etwas Code ersparen, welcher nur zum Zwecke des Layouts eingefügt würde.b) bei schmaleren Browserfenstern sollte sich die Inhaltsspalte jedoch verschmälern, so dass man nicht nach rechts scrollen muss.
Dass geschieht von allein.
c) Kopf- und Fussbereich sollten alle Breitenänderungen des Gesamtlayouts natürlich mitmachen
Dann vergib all diesen den selben max-width-Wert.
d) die linke Spalte mit der Navigation sollte ihre Breite fest beibehalten
Dann vergib eine feste Breite.
e) schön wäre es noch, wenn das Gesamtlayout in breiteren Fenstern zentriert wäre.
Dafür gibt es http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin:auto
Grundüberlegung für diese gewünschte Breitenbeschränkung ist die, das bei großen Bildschirmauflösungen [...]
Was hat die Bildschirmauflösung mit der Darstellung von HTML-Dokumenten zu tun?
Einen schönen Samstag noch.
Gruß, Ashura
-
Hallo Ashura,
vielen Dank für die Hinweise. die Eigenschaft max-width scheint mir die Schlüsseleigenschaft zur Realisierung zu sein, wird aber leider, wie im Link zu deinem Posting angegeben, bisher von keinem IE interpretiert. Weisst du auch von einer Lösung für IE-Anwender (ausser auf einen besseren Browser umzusteigen)?
Grüße und einen noch schöneren Samstag
Stephan-
Hallo Stephan.
vielen Dank für die Hinweise. die Eigenschaft max-width scheint mir die Schlüsseleigenschaft zur Realisierung zu sein, wird aber leider, wie im Link zu deinem Posting angegeben, bisher von keinem IE interpretiert. Weisst du auch von einer Lösung für IE-Anwender (ausser auf einen besseren Browser umzusteigen)?
Lies mein Posting erneut. Darin waren bereits sämtliche Informationen enthalten, die du benötigen wirst.
Grüße und einen noch schöneren Samstag
Noch schöner? Von mir aus gerne.
Einen schönen Samstag noch.
Gruß, Ashura
-
-
hi,
Hierfür gibt es http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width@title=max-width und
http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Star-HTML-Hack sowie http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width.Und wie realisierst du damit eine maximale Elementbreite im IE?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Hierfür gibt es http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width@title=max-width und
http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Star-HTML-Hack sowie http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=width.Und wie realisierst du damit eine maximale Elementbreite im IE?
Hm... Stimmt. Dieser Hack war nur für min-width geeignet.
Hierzu fällt mir leider keine Lösung ein.In diesem Sinne bitte ich dich, Stephan, um Verzeihung.
Ich hatte dein Posting missverstanden.Einen schönen Samstag noch.
Gruß, Ashura
-
Hi,
Und wie realisierst du damit eine maximale Elementbreite im IE?
Hm... Stimmt. Dieser Hack war nur für min-width geeignet.
Hierzu fällt mir leider keine Lösung ein.Mit CSS gibt es wohl auch keine, aber mit Javascript. Hier habe ich onload für den IE eine max-width von ca. 65em realisiert.
freundliche Grüße
Ingo
-
-
-