Layout mit feststehenden Bereichen

[Multi]

Mahlzeit,
einer meiner aktuellen Kunden will links ein feststehendes Menü. Soweit kein Problem, wird per CSS erledigt.
Jetzt will er aber links unten auch noch ne Box mit den Firmendaten. Im Prinzip auch kein Problem, einfach ein position: fixed; bottom: 5px;

Das Problem tritt jetzt aber auf, wenn der Viewport zu "kurz" ist, also die Höhe eine bestimmte Grösse unterschfreitet. Da schiebt sich die ober Box über die untere. Ähnlich ist es auch mit der Breite, da verschiebt sich der Hauptbereich ebenfalls unter die festen Boxen.

Mit prozenduralen Breiten kann ich nicht arbeiten, da der Kunde ein Menü will, dass eine gleichbleibende Breite hat.

Gibt es eine Möglichkeit, das Layout so zu gestalten, dass die eine Box oben links und die zweite unten links ist, sich bei zu geringer Auflösung die Boxen aber nicht übereinander schieben. Ob die "Box" nun ein div-Container oder was anderes ist, ist mir wurscht ;)

Ich hab das Beispiel leider nicht im Netz verfügbar, nur aufm Testserver. Grundsätzlich sollte es aber in etwa so aussehen:

+--------+  +----------------------------+
|        |  |                            |
|        |  |                            |
|        |  |                            |
|        |  |                            |
+--------+  |                            |
            |                            |
            |                            |
+--------+  |                            |
|        |  |                            |
+--------+  +----------------------------+

Wenn das grundsätzlich so nicht machbar (also dass es bei kleinerer Auflösung lesbar bleibt ohne Überschneidungen) ist, reicht mir das als Aussage, dann berate ich den Kunden um. Wenns aber machbar ist wäre ich um Tipps dankbar. Ich merke mal wieder, ich bin mehr der Backendprogrammierer als der Designer. Bei dem Budget ist aber kein externer Designer drin.

Eine ANpassung per Javascript bei zu kleinen Viewport wäre zwar machbar aber ich setze bei sowas ungern Techniken sein, die evtl. nicht verfügbar sind.

[ChrisB]

Hi,

Gibt es eine Möglichkeit, das Layout so zu gestalten, dass die eine Box oben links und die zweite unten links ist, sich bei zu geringer Auflösung die Boxen aber nicht übereinander schieben.

Mit den display:table-...-Eigenschaften lässt sich das realisieren.

Eine ANpassung per Javascript bei zu kleinen Viewport wäre zwar machbar aber ich setze bei sowas ungern Techniken sein, die evtl. nicht verfügbar sind.

Das kann man aber bedenkenlos machen - wenn man für Nichtverfügbarkeit von JavaScript dann einen Fallback hat, bei dem die Inhalte bei nicht ganz idealer Darstellung trotzdem erreich- und nutzbar bleiben.

MfG ChrisB

[Multi]

Mit den display:table-...-Eigenschaften lässt sich das realisieren.

Damit hab ich bisher nicht gearbeitet, werd gleich mal nachlesen. Danke für den Tip.

Das kann man aber bedenkenlos machen - wenn man für Nichtverfügbarkeit von JavaScript dann einen Fallback hat, bei dem die Inhalte bei nicht ganz idealer Darstellung trotzdem erreich- und nutzbar bleiben.

Den Fallback gibts aktuell nicht und wenn ich den vermeiden kann, ist es mir lieber weil weniger Arbeit. Dann lieber bei sowas auf JS verzichten weil nicht zwingend nötig ;)

[Beat]

Eine ANpassung per Javascript bei zu kleinen Viewport wäre zwar machbar aber ich setze bei sowas ungern Techniken sein, die evtl. nicht verfügbar sind.

Fein, dann verzichte ohne JS auf jede Mehrspaltigkeit, und wenn JS verfügbar ist, schalte das für den Viewport geeignete Layout durch Klasse ein.

media queries wäre eine andere Strategie.

mfg Beat

[Multi]

Fein, dann verzichte ohne JS auf jede Mehrspaltigkeit,

Das wäre die Notlösung, wenns nicht anders geht. Wobei das Problem nur bei kleinerem Viewport als ca. 1000x550 Pixel auftritt. Und auf mobile Endgeräte brauch ich in diesem Fall kaum Rücksicht zu nehmen, falsche Zielgruppe ;)

media queries wäre eine andere Strategie.

Schau ich mir an. Danke für deine Tips :)