flexible layouts

[ryan]

Hallo,
ich hätte da mal eine Frage zu einem flexiblen layout.
Also ich habe testweise ein einfaches layout erstellt mit 3 spalten.
Meine Frage ist:
Wenn ich den Browser kleiner ziehe, zB auf 1024x768, passen sich alle container dann nur korrekt an wenn sie !alle! eine prozentuale größe haben?
Mir ist aufgefallen dass wenn ich den zwei Sidebars eine feste breite gebe, dem maincontent aber eine prozentuale, das sie sich nicht korrekt anpassen.
Bei prozentangaben allerdings passt sich alles korrekt an, abgesehn von der höhe. Gibt es da andere möglichkeiten?

[Beat]

Also ich habe testweise ein einfaches layout erstellt mit 3 spalten.
Wenn ich den Browser kleiner ziehe, zB auf 1024x768, passen sich alle container dann nur korrekt an wenn sie !alle! eine prozentuale größe haben?

Definiere korrekte Anpassung?
Viele verwenden dreispaltige Layouts, wobei die äusseren Spalten eine nicht prozentuale Breite hat. Das geht dann in einem bestimmten Rahmen gut.

Mir ist aufgefallen dass wenn ich den zwei Sidebars eine feste breite gebe, dem maincontent aber eine prozentuale, das sie sich nicht korrekt anpassen.

Klar. Offenbar hast du deinen Content mi einem formating Block-Kontext versehen, was ihn natürlich bei einer Angabe ungleich width:auto sperrig macht.

Bei prozentangaben allerdings passt sich alles korrekt an, abgesehn von der höhe. Gibt es da andere möglichkeiten?

Brauchst du eine andere Möglichkeit?
Du kannst nur dann effektiv komplex layouten, wenn die die Ausmasse kennst.

Meine Möglichkeit ist im Link im Header dieser Message dargelegt.
Allerdings nur für ein zweispaltiges Layout. Ich verwende hier grundsätzlich prozentuale Angaben. JS gibt mir den zur Verfügung stehenden Raum und schreibt dann das passende Modell (block versus inline-block)

mfg Beat

[ryan]

Definiere korrekte Anpassung?
Viele verwenden dreispaltige Layouts, wobei die äusseren Spalten eine nicht prozentuale Breite hat. Das geht dann in einem bestimmten Rahmen gut.

Mit korrekt meine ich dass wenn ich den sidebars feste größenangaben gebe, dass der prozentuale content sich über bzw unter sie setzt. Ich möchte aber dass wenn die sidebars eine feste größe haben, und der content eine prozentuale, dass er sich perfekt anpasst wenn das fenster sich verändert, aber das passiert nicht, die rechte Sidebar setzt sich immer über ihn.
Ich schätze mal aber dass dieses verhalten logisch ist, oder?
Muss ich meine Designerin von einem flexiblen layout überzeugen :p

Klar. Offenbar hast du deinen Content mi einem formating Block-Kontext versehen, was ihn natürlich bei einer Angabe ungleich width:auto sperrig macht.

meinst du display: block? :p

Brauchst du eine andere Möglichkeit?
Du kannst nur dann effektiv komplex layouten, wenn die die Ausmasse kennst.

[ChrisB]

Hi,

Wenn ich den Browser kleiner ziehe, zB auf 1024x768, passen sich alle container dann nur korrekt an wenn sie !alle! eine prozentuale größe haben?
Mir ist aufgefallen dass wenn ich den zwei Sidebars eine feste breite gebe, dem maincontent aber eine prozentuale, das sie sich nicht korrekt anpassen.

Es sollte dir, wenn du im Matheunterricht mal wach warst, einleuchten, dass ein Prozentwert plus zwei feste Pixelwerte nicht immer 100% (zur Verfügung stehende Gesamtbreite) ergeben *kann* - also muss der Browser irgendeine Art von Anpassung vornehmen.

MfG ChrisB

[ryan]

Es sollte dir, wenn du im Matheunterricht mal wach warst, einleuchten, dass ein Prozentwert plus zwei feste Pixelwerte nicht immer 100% (zur Verfügung stehende Gesamtbreite) ergeben *kann* - also muss der Browser irgendeine Art von Anpassung vornehmen.

ja stimmt, ist auch vollkommen logisch =D
Was ich mich aber frage ist: wenn links und rechts eine Sidebar mit jeweils 200px stehen und der Content in der mitte 50% hat.
Wie kann ich denn dem Content sagen das er sich nach den beiden Sidebars richten soll, und dementsprechend nicht unter oder über sie geht, also er seinen Raum nutzt und sich dementsprechend ändert?

[ChrisB]

Hi,

ja stimmt, ist auch vollkommen logisch =D
Was ich mich aber frage ist: wenn links und rechts eine Sidebar mit jeweils 200px stehen und der Content in der mitte 50% hat.

Ich dachte, du hättest gerade eingesehen, dass das unsinnig ist ...?

Wie kann ich denn dem Content sagen das er sich nach den beiden Sidebars richten soll

Wenn der Content-Bereich den restlichen Raum nutzen soll, dann lass ihn das einfach machen - ohne Breitenangabe.
Wenn er sich nicht unterhalb der Sidebars wieder nach aussen ausbreiten soll - dann gebe ihm entsprechende seitliche margins.

MfG ChrisB

[ryan]

Wenn der Content-Bereich den restlichen Raum nutzen soll, dann lass ihn das einfach machen - ohne Breitenangabe.
Wenn er sich nicht unterhalb der Sidebars wieder nach aussen ausbreiten soll - dann gebe ihm entsprechende seitliche margins.

ok, hast recht, ich werd es so machen wie in diesem beispiel:
http://www.thestyleworks.de/examples/layout1/layout108.html

hätte dazu aber eine frage, das beispiel sieht ungefähr genauso aus wie meine Seite, meine Sidebars sind nur fixiert und der Content soll eine flexible größe haben mit eigenem Scrollbalken per overflow-y.
Wie kriegt man es hier denn jetzt hin das der Container auch darauf reagiert wenn man das Fenster von unten verkleinert? Weil da bleibt er fest und reagiert nicht