Komplexes CSS Layout?

[Dominik]

Hallo,

ich habe vor ein recht komplexes Layout mit Hilfe von CSS umzusetzen.
Dabei tun sich mir allerdings einige Fragen auf für die ich noch keine Lösung gefunden habe.
Es handelt sich im Grunde um ein Zweispaltiges Layout, welches mittig zentriert werden soll. Dabei hat die erste Spalte eine feste Breite von 150px und eine feste Höhe von 500px. Doch die zweite Spalte hat zwar eine feste Höhe muss aber in der Breite flexibel sein. Dazu kommt noch das jeweils eine Linkliste, an der linken und rechten Seite der zweiten Spalte ausrichten soll. Damit das ganze etwas verständlicher ist habe ich eine Grafik dazu angefertigt.
Zu finden unter http://img245.imageshack.us/img245/114/divlayoutoj9.gif
Ich hoffe das jemand von euch die "zündene" Idee hat und mir weiterhelfen kann.

Viele Grüße,
Dominik

[ChrisB]

Hi,

Es handelt sich im Grunde um ein Zweispaltiges Layout, welches mittig zentriert werden soll. Dabei hat die erste Spalte eine feste Breite von 150px und eine feste Höhe von 500px. Doch die zweite Spalte hat zwar eine feste Höhe muss aber in der Breite flexibel sein.

Definiere "flexibel". Von irgendwas muss ihre Breite ja begrenzt werden, wenn du das ganze "zentrieren" willst. Von der verfuegbaren Viewportbreite? Soll's ein Prozentwert sein, oder sollen vorgegebene seitliche Abstaende die Breite begrenzen, oder ...?

Dazu kommt noch das jeweils eine Linkliste, an der linken und rechten Seite der zweiten Spalte ausrichten soll.

Das waeren dann "Div 4" und "Div 5", von denen du jetzt sprichst?

Damit das ganze etwas verständlicher ist habe ich eine Grafik dazu angefertigt.
Zu finden unter http://img245.imageshack.us/img245/114/divlayoutoj9.gif

*Etwas* mehr Kontrast waere beim naechsten Mal nett - ich habe auf meinem Laptop-Screen Probleme, die Hintergruende der Kaestchen ueberhaupt zu sehen.

Ich hoffe das jemand von euch die "zündene" Idee hat und mir weiterhelfen kann.

Div 1 kann floaten, Div 2 in der unteren linken Ecke eines 1, 2 & 3 umgebenden Containers absolut positioniert werden.
Wenn die dynamischen Hoehen von 1 und 2 zusammen allerdings mehr als die 500px von Div 3 ergeben, dann hast du ein Problem - dann kommt es natuerlich zu einer Ueberlagerung. Wenn du das nicht ausschliessen kannst, dann verlangst du leider etwas zu viel von einem dynamischen CSS-Layout. (Dann koennte wohl wirklich nur noch eine Tabelle helfen - die display-Werte fuer tabellenartige Darstellung kann man im IE ja noch nicht einsetzen.)

Div 4 und 5 sollten eigentlich kein Problem sein, die kommen einfach nach dem ganzen vorherigen Krempel, 5 nach links gefloatet, und werden auf 150px Abstand vom linken Rand eines alles umgebenden Containers (der auch fuer die horizontale Zentrierung verantwortlich ist) gehalten.

MfG ChrisB

[Dominik]

Hey,

danke für die schnelle Antwort

Definiere "flexibel". Von irgendwas muss ihre Breite ja begrenzt werden, wenn du das ganze "zentrieren" willst. Von der verfuegbaren Viewportbreite? Soll's ein Prozentwert sein, oder sollen vorgegebene seitliche Abstaende die Breite begrenzen, oder ...?

»»

Ich möchte das ganze über vorher definierte Seitliche Begrenzungen zentrieren. Also wenn alle Divs in der Breite 760px ergeben, dann sollen bei einer Auflösung von 800x600, 20px an jeder Seite frei bleiben. Allerdings soll das ganze dann eben bei 1024x768 wieder zentriert dargestellt werden.

Das waeren dann "Div 4" und "Div 5", von denen du jetzt sprichst?

Genau das sind dann "Div 4" und "Div 5".

*Etwas* mehr Kontrast waere beim naechsten Mal nett - ich habe auf meinem Laptop-Screen Probleme, die Hintergruende der Kaestchen ueberhaupt zu sehen.

Hier nochmal eine Version mit mehr Kontrast...
http://img46.imageshack.us/img46/9596/divlayoutpe2.gif

Div 1 kann floaten, Div 2 in der unteren linken Ecke eines 1, 2 & 3 umgebenden Containers absolut positioniert werden.

Sorry, aber daraus werde ich leider noch nicht ganz schlau???
Du meinst ich soll um 1,2 und 3 einen Container bauen, und richte "Div 2" dann absolut aber ohne Angabe einer Höhe unten Links aus?

Div 4 und 5 sollten eigentlich kein Problem sein, die kommen einfach nach dem ganzen vorherigen Krempel, 5 nach links gefloatet, und werden auf 150px Abstand vom linken Rand eines alles umgebenden Containers (der auch fuer die horizontale Zentrierung verantwortlich ist) gehalten.

Und hier ergibt sich gleich noch eine neue Frage, welche Methode wäre für meinen Fall die "beste" um einen Div zu zentrieren?

Ich danke euch für die Hilfe.

Grüße,
Dominik

[ChrisB]

Hi,

Ich möchte das ganze über vorher definierte Seitliche Begrenzungen zentrieren.

Und wie sieht deren Definition aus?

Also wenn alle Divs in der Breite 760px ergeben, dann sollen bei einer Auflösung von 800x600, 20px an jeder Seite frei bleiben. Allerdings soll das ganze dann eben bei 1024x768 wieder zentriert dargestellt werden.

*seufz* - was denn jetzt?
Das waere ja wieder andersherum - Breite ist vorgegeben, und seitliche Abstaende richten sich danach - oben war's erst noch andersherum.

Also entscheide dich jetzt bitte mal, wer hier Henne und wer Ei sein soll - und teile das dann verstaendlich und zweifelsfrei formuliert mit.

Div 1 kann floaten, Div 2 in der unteren linken Ecke eines 1, 2 & 3 umgebenden Containers absolut positioniert werden.

Sorry, aber daraus werde ich leider noch nicht ganz schlau???
Du meinst ich soll um 1,2 und 3 einen Container bauen, und richte "Div 2" dann absolut aber ohne Angabe einer Höhe unten Links aus?

Jepp.

Und hier ergibt sich gleich noch eine neue Frage, welche Methode wäre für meinen Fall die "beste" um einen Div zu zentrieren?

Welche die "beste" ist, haengt davon ab, wie du den Rest aufbauen/formatieren willst.

MfG ChrisB

[Dominik]

Hi,

du bist ja wirklich flink im antworten.

Ich möchte das ganze über vorher definierte Seitliche Begrenzungen zentrieren.

Und wie sieht deren Definition aus?

Also wenn alle Divs in der Breite 760px ergeben, dann sollen bei einer Auflösung von 800x600, 20px an jeder Seite frei bleiben. Allerdings soll das ganze dann eben bei 1024x768 wieder zentriert dargestellt werden.

*seufz* - was denn jetzt?
Das waere ja wieder andersherum - Breite ist vorgegeben, und seitliche Abstaende richten sich danach - oben war's erst noch andersherum.

Also entscheide dich jetzt bitte mal, wer hier Henne und wer Ei sein soll - und teile das dann verstaendlich und zweifelsfrei formuliert mit.

Also ich probiere das ganze nun nochmal so zu formulieren, das mein Problem ersichtlich wird. Alle Divs sollen zusammen zentriert dargestellt werden. Das erreicht man normalweise dadurch das ich entweder dem alles umfassenden Container eine feste Breite, oder feste Seiteabstände zuweise. Mein Problem ist nun aber das ich nicht weiß wie breit "Div 3" ist, weil dort immer ein anderer Inhalt per Ajax reingeladen wird. Deshalb benötige ich einen Lösungsansatz wie ich einen Container zentrieren kann ohne ihm eine feste Breite oder Seitenabstände zu definieren. Bzw. ist das überhaupt in HTML möglich?

Ich hoffe das ihr nun mein Problem nachvollziehen könnt.

Grüße,
Dominik

[Kai345]

Moin!

Also ich probiere das ganze nun nochmal so zu formulieren, das mein Problem ersichtlich wird. Alle Divs sollen zusammen zentriert dargestellt werden. Das erreicht man normalweise dadurch das ich entweder dem alles umfassenden Container eine feste Breite, oder feste Seiteabstände zuweise. Mein Problem ist nun aber das ich nicht weiß wie breit "Div 3" ist, weil dort immer ein anderer Inhalt per Ajax reingeladen wird. Deshalb benötige ich einen Lösungsansatz wie ich einen Container zentrieren kann ohne ihm eine feste Breite oder Seitenabstände zu definieren. Bzw. ist das überhaupt in HTML möglich?

Nein, aber mit CSS ;)
Du gibst dem alles umfassenden Container margin: x auto; wobei x der Wert für den oberen und unteren Rand wird. Läßt sich auch noch verfeinern: Siehe auch selfhtml, unsbesondere unter „Erläuterung“

Cü,

Kai

[Dominik]

Hi,

Nein, aber mit CSS ;)
Du gibst dem alles umfassenden Container margin: x auto; wobei x der Wert für den oberen und unteren Rand wird. Läßt sich auch noch verfeinern: Siehe auch selfhtml, unsbesondere unter „Erläuterung“

Kann mir vielleicht jemand mal einen Schnipsel erstellen, womit ich einen Container der sich der Breite des Inhalts anpasst und im Browser mittig zentriert dargestellt wird posten???
Da ich den Tip von Kai345 leider nicht nachvollziehen kann.

Dankeschön für eure Geduld.

Grüße,
Dominik

[Jonathan]

Hallo Dominik,
Wüsste nicht, was daran so schwer sein sollte.

...
<body>
<div style="height:200px;width:800px; border: 1px solid; margin: 0 auto;>
Text
</div>
</body>
...

Jonathan

[Dominik]

Hallo an alle,

irgendwie scheint auf mir der Fluch der Unverständlichkeit zu liegen...

Wüsste nicht, was daran so schwer sein sollte.

Das Problem ist, das die von Jonathan gepostet Lösung voraussetzt das ich den Container 800px breit mache. Da ich aber in den Container per Ajax Bilder laden die zwar alle 500px hoch sind aber, mal 400px oder 800px breit sein können. Kann ich den Container ja nicht zentrieren und ihm eine maximale Breite zuweisen. Ich hoffe das man nun mein Problem nachvollziehen kann. Hoffentlich kann mir jemand von euch einen Schnipsel geben der genau dieses Problem behebt.

Sollte es garkeine Lösung geben würde ich per Javascript jeweils die Breite des Containers der Bildbreite entsprechend anpassen, was ich aber eigentlich umgehen möchte.

Danke aber an alle die mir schon so viele Antworten gegeben haben...

Grüße
Dominik

[Jonathan]

Hallo Dominik,

Normale Blockelemente sind eben immer so breit wie möglich ist bzw. wie Platz im Elernelement ist - solange keine Breite angegeben wird.

Und Elemente deren Größe sich nach dem Inhalt richtet (floats, position:absolute, inline-blocks usw.) lassen sich eben nur schlecht bis garnicht zentrieren.

Aber wenn du die bilder eh mit Ajax holst kannst du ja auch gleich die richtge Größe zuweisen.

Jonathan

[Dominik]

Hallo Jonathan,

also fällt so wie vermutet einen reine XHTML/CSS Lösung flach und ich muss die Breite je nach Bild per Javascript updaten???

Grüße,
Dominik

[Ingo Turski]

Hi,

Ich möchte das ganze über vorher definierte Seitliche Begrenzungen zentrieren. Also wenn alle Divs in der Breite 760px ergeben, dann sollen bei einer Auflösung von 800x600, 20px an jeder Seite frei bleiben. Allerdings soll das ganze dann eben bei 1024x768 wieder zentriert dargestellt werden.

Du willst den Abstand von der Fensterbreite abhängig machen? Dann nimm % und nicht px.

freundliche Grüße
Ingo

[Steffi]

ich habe vor ein recht komplexes Layout mit Hilfe von CSS umzusetzen.

Ohne Dich angreifen zu wollen, richtig wäre die Wortwahl gewesen:
"...recht einfaches Layout..."

[Dominik]

Hallo Steffi,

Ohne Dich angreifen zu wollen, richtig wäre die Wortwahl gewesen:
"...recht einfaches Layout..."

ich freue mich jederzeit über Antworten die mir weiterhelfen. Also wäre ich dir sehr dankbar wenn du mir vielleicht erklärst wie ich dieses Layout umsetze.