Linker Balken, soll bis nach ganz unten gehen...

Status
Nicht offen für weitere Antworten.

Darian

Erfahrenes Mitglied
Hallo Leute,

ich soll folgendes Design umsetzen:
http://www.sacbe.info/mittelamerika/index.htm

Habe mir mal den HTML Code angeschaut, und tja, wohl mit Dreamweaver erstellt. Möchte das jetzt gerne schön machen.

Soweit so gut.

Ich brauche also links eine Spalte die für das Menü ist. (fixe Breite)
Rechte eine Spalte die für den Inhalt ist (fixe Breite)
Das heißt nach die beiden fixe Breite haben, haben wir in der Mitte eine Art Puffer. Er hat es mit Tabellen gemacht, wo die mittlere einfache frei war.

Ich habe jetzt schon sicher 2h herum probiert, und bin mir da noch immer nicht so sicher.

Das Problem ist jetzt dass der linke grüne Balken, bis nach unten gehen soll, je nachdem wie der Inhalt der rechten Spalte ist.

Da da noch ein JS Menü, das ich absolut rein setze dazu kommt, kriegt alles noch eine mindest Höhe.

Dachte auch zuerst dass eine Box,die alles umschliesst vielleicht nicht so schlecht wäre, und die anderen einfach mit margin-bottom:0px immer bis zu der anschliessen. Irgendwie will das aber nicht so ganz.

Hatte schon mehr, habe es aber wegen der Fehlersuche vereinfacht.

HTML:
<div id="leftbox">
  <div id="greenline">
  </div>
</div>

<div id="rightbox">
</div>

HTML:
#leftbox {
float:left;
width:201px;
min-height:600px;
border-style:solid;
border-width:1px;
}

#rightbox {
float:right;
width:690px;
min-height:600px;
border-style:solid;
border-width:1px;
}

#greenline {
float:left;
width:35px;
margin-bottom:0px;
background:#C3C73F;
}

Irgendwie ein komisches Problem, ausserdem habe ich geplant die ganzen Balken, die er mit jpg gemacht hat, mit div zu machen. Hoffe da gibt es keine allzu großen Schwierigkeiten.

Wäre echt super wenn ihr mir ein paar Tipps geben könntet.

lg Daniel
 
Hi,

da deine Aufgabenstellung der Einrichtung von sog. "Equal-Height-Columns" gleichkommt, also ein mehrspaltiges Layout, dessen Spalten sich, unabhängig von ihrem jeweiligen Inhalt, in ihrer Höhe automatisch immer der höchsten Spalte im Verbund angleichen, empfehle ich dir den Diskussions-Artikel AnyColumnLongest, der zahlreiche Verweise zu unterschiedlichen Techniken bereithält; sei es für Layouts mit fixer oder relativer Breite, mit zwei oder drei Spalten.

Zum Schluß werden sogar zwei Lösungsansätze mittels Javascript genannt, nur für den Fall, dass bei dir alle CSS-Stricke reißen sollten :-)

mfg Maik
 
Hallo Leute,

war jetzt eigentlich ganz einfach, und dieses Problem hat sich schon geklärt.

Habe einfach nur ein Bild das 1px breit ist im body eingebaut.

background:url(../images/sacbestyle/greenline.jpg) repeat-y;

War eigentlich dann doch einfacher wie ich gedacht habe. Alle anderen Möglichkeiten sind mir ein bisschen komisch vorgekommen, oder haben nicht so gemacht wie ich wollte.

lg aus Guatemala
Darian
 
Status
Nicht offen für weitere Antworten.
Zurück