nicht angemeldet
CSS Layoutproblem - bisschen kompliziert
0 0 
Struppi
0
CSS Layoutproblem - bisschen kompliziert
Hallo!
Ich möchte mir eine Homepage gestalten. Ich habe ein bestimmtes Layout im Kopf, und trotz einiger CSS Erfahrung komme ich nicht weiter.
Bevor ich das umständlich beschreibe, poste ich den Link zu einem Bild, dass den Aufbau beschreibt:
http://www.weatherfield.de/layout1.gif
http://www.weatherfield.de/layout2.gif
Der Hintergrund der Seite ist also blau. Oben ist eine Genau positionierte Box (rot), was einwandfrei klappt (mit position: absolute positioniert).
Der Inhaltsteil darunter ist weiß, jeweils mit Abstand zum linken, rechten und (das ist das Problem) unteren Teil.
Der Inhaltsteil ist zweigeteilt, eine linke Seite für den echten Inhalt, eine rechte, für Navigation etc.
Wenn ich die Inhaltsbox mit position:absolute formatiere, und bottom: 10 px; eingebe (die DIVs inhalt-links und inhalt-rechts sind in der "weißen" DIV für den Gesamtinhalt) klappt das auf Seiten mit wenig Inhalt prima.
Sobald mehr Inhalt dazu kommt und man scrollen muß (siehe mein Bild, das rosa Rechteck ist hier die Bildschirmgröße), klappt es leider nicht mehr - der Inhalt wird abgeschnitten. (Es soll aber so klappen wie auf layout2.gif)
Ich kann die weiße Gesamt-Inhalts-DIV auch nicht fixieren, denn die ganze Homepage soll ja scrollbar sein, und nichts fixiert (z.B. Titel oben).
Ich hoffe, jemand erkennt was ich meine und vor welchem Problem ich stehe, und weiß eine Lösung. Tut mir leid, dass dies so kompliziert klingt - ich hoffe, mein Bild macht es einfacher.
-
Solange dein Inhalt absolut positioniert wird, sorgt er sich nicht um das drum herum (wie den blauen Rahmen).
Du müßtest deshalb abhängig vom Umfang des Inhalts dynamisch den blauen Rahmen weiter runterziehen, z.B. indem du viel unsichtbaren Inhalt (<br> und ) einfügst, der seinen Platz einfordert.
Einfacher erscheint mir aber die Lösung, den Seiteninhalt nicht absolut zu positionieren. Dann sorgt der Browser dafür, daß der Inhalt komplett in deinem Layout untergebracht wird.
Gerade weil man damit rechnen muß, daß der User die Fenstergröße schon mal verändert, sollte man mit der absoluten Positionierung eher sparsam umgehen.
-
Bevor ich das umständlich beschreibe, poste ich den Link zu einem Bild, dass den Aufbau beschreibt:
http://www.weatherfield.de/layout1.gif
http://www.weatherfield.de/layout2.gifDer Hintergrund der Seite ist also blau. Oben ist eine Genau positionierte Box (rot), was einwandfrei klappt (mit position: absolute positioniert).
also ich sehe einen blauen Rahmen, dann einfach einen roten Bereich, der in kleinsterweise psotioniert sein muss.
Der Inhaltsteil darunter ist weiß, jeweils mit Abstand zum linken, rechten und (das ist das Problem) unteren Teil.
Das läßt sich einfach mit margin lösen.
Der Inhaltsteil ist zweigeteilt, eine linke Seite für den echten Inhalt, eine rechte, für Navigation etc.
Ein Bereich, der float:right in dem Inhalt ist, wobei der Inhalt dann einen entsprechenden padding-right Wert bekommt.
Ich hoffe, jemand erkennt was ich meine und vor welchem Problem ich stehe, und weiß eine Lösung. Tut mir leid, dass dies so kompliziert klingt - ich hoffe, mein Bild macht es einfacher.
Du machst es dir kompliziert, dieses Design läßt sich einfach ohne positionierung realisieren.
Struppi.
--
Javascript ist toll (Perl auch!) -
Hallo,
dir geht es darum, dass der blaue Rand stehen bleibt, auch wenn der weisse Breich scrollt?
Dann estze doch die vier blauen divs fixiert auf die Seite, und mit z-index vor den weissen Bereich.
Lieben Gruß, Kalle