3 spaltiges Layout mit CSS

3 spaltiges Layout mit CSS

Beitragvon Serpico » 20.12.2010, 12:27

Werte Forumgemeinde,

ich habe da gerade ein Grundgedankenproblem vermute ich :).
Ich möchte ein 3 spaltiges Layout mit div´s erstellen. Klar könnte ich den Body eine feste Größe verpassen und ihn zentrieren schon hätte ich im Prinzip eine Möglichkeit.
So soll es aussehen :

<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>

Der "left" und "right" soll sich automatisch der Bildschirmgröße anpassen.
und der "middle" soll eine feste Größe bekommen.
Hintergrund der Sache ist das "left" und "right" verschiedene Hintergrundgrafiken bekommen sollen die sich nach dem "middle" Container ausrichten.
Ich finde im Netz viele Beispiele für 3 spaltiges Layout, allerdings skaliert sich die Mitte immer und nicht die äusseren Div´s.
Ist das überhaupt möglich oder muss ich einen anderen Lösungsweg suchen ?
Serpico
neu hier
 
Beiträge: 6
Registriert: 15.12.2010, 13:45

Re: 3 spaltiges Layout mit CSS

Beitragvon sejuma » 20.12.2010, 15:00

Mir ist eine diesbezügliche Lösung nicht bekannt. CSS kann noch nicht rechnen und weis somit nicht, wieviel Platz es links und rechts je nach Fenstergröße zu verteilen gibt.

Umgekehrt ist es möglich: Den äßeren Divs eine fixe Breite geben und der mittlere nimmt dann den Rest ein.

Bedenke:
Je nach Fensterbreite kann dies (in beiden Fällen) zu unerwünschten Ergebnissen führen: Entweder kann für links und rechts (nach deinen Vorstellungen) kein Platz mehr übrig bleiben, oder für die Mitte, wenn links und rechts zu breit und das Fenster zu schmal ist.

Besser wäre deshalb m.E. ein fixes Layout, also feste Breiten für alle drei Bereiche. Falls dazu der Platz nicht ausreicht, erscheint automatisch ein horizontaler Scrollbalken.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: 3 spaltiges Layout mit CSS

Beitragvon djheke » 22.12.2010, 16:24

habe im moment keine zeit, aber ich werde mal in meinem fundus gucken. ich glaube, daß ich sowas habe was du möchtest. bis später.
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: 3 spaltiges Layout mit CSS

Beitragvon djheke » 22.12.2010, 17:48

pustekuchen nichts gefunden. also eimal neu.
guck doch mal ob es so richtig ist. http://www.gipspferd.de/css/forum/3spaltenlayout.htm

Aber trotzdem. sejuma hat recht. nimm lieber fixe bereiche.

viel spass
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: 3 spaltiges Layout mit CSS

Beitragvon Serpico » 22.12.2010, 19:18

genauso wollte ich es :) dankeschön
Serpico
neu hier
 
Beiträge: 6
Registriert: 15.12.2010, 13:45

Re: 3 spaltiges Layout mit CSS

Beitragvon sejuma » 22.12.2010, 20:47

Rein technisch gut gelöst.

Aber:
Verkleinere mal das Bildschirmfenster, so dass nur noch die Mitte sichtbar bleibt.
Wo sind dann die linken und rechten Bereiche? Verschwunden und unsichtbar.
Somit gehen Inhalte für den Besucher definitiv verloren.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: 3 spaltiges Layout mit CSS

Beitragvon djheke » 22.12.2010, 21:53

Ja, es ist richtig und war mir auch von vornherein klar. aber in diesem Fall sollen ja wohl nur Grafiken rein. ansonsten ist diese Technik völlig ungeeignet.
Frage: Warum sollte man das Browserfenster verkleinern? Also, die meisten und auch ich machen es wohl nicht, oder sehr selten. Oder sehe ich es falsch ? Beim entwickeln von Webseiten passe ich auch auf, dass Inhalte nicht verloren gehen.
Deshalb sind mir fixe Bereiche immernoch am liebsten .

mfg
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: 3 spaltiges Layout mit CSS

Beitragvon djheke » 22.12.2010, 23:00

Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: 3 spaltiges Layout mit CSS

Beitragvon Serpico » 23.12.2010, 00:26

theke hat das richtig erkannt, da sollen nur grafiken rein und selbst die sind nicht wirklich wichtig für das Gesamtbild ! Wenn einer mit einer 800x600 Auflösung aufm pc sich noch die Seite ansieht, sieht er zwar dann diese Grafiken nicht aber wer guckt heutzutage schon noch mit so einer Auflösung und selbst wenn dann ist er nach meiner Ansicht selbst schuld.
Es ist halt schwierig in Zeiten wo ein 24" Monitor bisl über 100€ kostet einen guten Kompromiss zu verwenden.
Serpico
neu hier
 
Beiträge: 6
Registriert: 15.12.2010, 13:45

Re: 3 spaltiges Layout mit CSS

Beitragvon sejuma » 23.12.2010, 07:14

Jetzt ist es prima gelöst!
Durch die neue Abstandsdefinition entsteht für die Außenteile eine min-width, so dass auch deren Inhalte erhalten/sichtbar bleiben.
Das kann man dann sogar nach der erforderlichen Grafikbreite ausrichten.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "3 spaltiges Layout mit CSS"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste