✔ CSS Webdesign mit fester Mitte

[Tobi81]

Hallo Forum,

ich bekomm es schon seit über einer Woche nicht hin, das Design in der Anlage mithilfe von CSS umzusetzen.

Das Design soll so eine Art Blatt Papier in der Mitte (1 und 2) darstellen.
Die Zeilen 3 und 4 sind Platzhalter fürs Layout und sollen sich über die komplette Browserbreite erstrecken. Die Höhe ist fix.
Die Boxen 5 und 6 sind ebenfalls in der Höhe fix und passen sich auch in der Breite an.
Die Boxen 7 und 8 sollten sich die Höhe teilen und zur Seite wachsen.

Ich hoffe die Pfeile zeigen an, was ich mein.


Ich habe schon versucht das ganze mit einer Tabelle umzusetzen, habe aber bei den Boxen 7 und 8 immer das Problem dass wenn die Zellen leer sind diese sich ungleichmässig vergrößern. Also dann entweder die obere, oder die untere Box zu sehen ist. Aber nicht beide. :-(


Ich hoffe ihr könnt mir helfen.
CSS Beispiele nach dieser Art finde ich leider kaum im Internet.

Vielen Dank,
Tobias

 

[Maik]

Moin,

ich denke, dass wir dir auch kein lauffähiges Lösungsbeispiel bieten werden können, denn ich sehe hier die Knackpunkte in den variablen Breiten der äußeren Spaltenblöcke (Boxen "5" bis "8"), sowie das gewünschte Verhalten der Boxen "7" und "8" in ihrer Höhe.

mfg Maik

 

[Tobi81]

Oki, danke Dir für deine Antwort.

Ich habe schon befürchtet, dass das nur mit Layer nicht so einfach wird.

Ich habe jetzt eine Tabelle, die ich mit CSS formatiere.


Nun möchte ich in einer Tabellenzelle drei DIVs wie in der Grafik zu sehen ist, aneinander anordnen.

Zwei DIVs nebeneinander habe ich mit float: left hinbekommen, aber nicht die dritte unten.

A und B sollen eine gleiche Breite haben, und je nach Inhalt in der Höhe wachsen.
Daneben soll C positioniert werden und den noch verfügbaren Platz in der Tabellenzelle bekommen.

Hoffe mir kann jemand helfen.

 

[Maik]

Bette hierfür die beiden Boxen "A" und "B" in ein übergeordnetes DIV, und zeichne dieses mit float:left, sowie der gewünschten Breite aus.

mfg Maik

 

[Tobi81]

Hallo Maik,

vielen Dank für deine Antwort.
Das klappt soweit ganz gut.
Ein Problem hab ich noch, und zwar siehst du auf dem Screenshot nun zwei DIVs und der gelbe DIV beginnt scheinbar schon links vom dem linken DIV.

Mein CSS sieht so aus:

#navi1 {
    background-color:#F3F3F3;
    margin-top: 2px;
    margin-left: 20px;
    margin-right: 10px;
    width:220px;
}
#inhalt {
    background-color:#FFFFCC;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 10px;
}

Ich müsste mit meinem CSS bei margin-left die Angabe mit mindestens der Breite von dem navi1 DIVs angeben, damit das so aussieht wie ich will.

Wie bekomme ich es hin, dass der zweite DIV 40 Pixel vom ersten DIV entfernt ist.

Vielen Dank!

 

[Maik]

Das funktioniert so:

#navi1 {
    background-color:#F3F3F3;
    margin-top: 2px;
    margin-left: 20px;
    margin-right: 0;
    width:220px;
    float:left;
    display:inline; /* fixt den "Doubled-Float-Margin-Bug" im IE6 */
}
#inhalt {
    background-color:#FFFFCC;
    margin-top: 2px;
    margin-left: 280px;
    margin-right: 10px;
}

mfg Maik