Layer Problem mit der Höhe

Status
Nicht offen für weitere Antworten.
A

Agravain

Erfahrenes Mitglied
Grüße,

Ich arbeite gerade an einer Website bei der der Inhalt gesamt 6 Spalten hat, 3 davon sind für Text und dazwischen drin 3 für Trennlinien.

Die 6 Layer für die Spalten liegen alle in einem großen Layer, alle relative positioniert, float left. Der große Layer soll seine Höhe an den Inhalt anpassen, also an den längsten Layer der in ihm drin ist, damit ich dann anhand der Höhe des großen Layers die Höhe der Trennlinien ausrichten kann (100%)

Die Positionierung funktioniert soweit, der große Layer passt seine Höhe allerdings leider nicht an, hier mal der Quellcode:

<div id=content style="position: relative; width: 819px; margin: 0px; padding: 0px; background-color: #FFCCFF;">

<div id=trennlinie01 style="position: relative; width: 3px; height: 100; margin: 0px; padding: 0px; float: left; background-color: #9999FF;">

</div>

<div id=layer01 style="position: relative; width: 206px; left: 18px; margin: 0px; padding: 0px; float: left; background-color: #9999FF;">
sadas<br />
asd<br />
asdff<br />
sdasd<br />
ssfa<br />
</div>

<div id=trennlinie02 style="position: relative; width: 3px; height: 100%; margin: 0px; padding: 0px; float: left; background-color: #9999FF;">

</div>

<div id=layer02 style="position: relative; width: 206px; margin: 0px; padding: 0px; float: left; background-color: #9999FF;">
sadas<br />
asd<br />
asdff<br />
sdasd<br />
ssfa<br />
</div>

<div id=trennlinie03 style="position: relative; width: 3px; height: 100%; margin: 0px; padding: 0px; float: left; background-color: #9999FF;">

</div>

<div id=layer03 style="position: relative; width: 206px; margin: 0px; padding: 0px; float: left; background-color: #9999FF;">
sadas<br />
asd<br />
asdff<br />
sdasd<br />
ssfa<br />
</div>

</div>
 
Der Maik, immer flott und kompetent ... danke. ;)

Beim durchlesen des ganzen bin ich auf eine sehr einfache Lösung gestoßen, der "große Layer" passt sich den Spalten inzwischen in der Höhe an. Nur .... die Trennlinien sollen nun auch noch so lang sein wie der große Layer, was mit einer einfachen 100% Angabe bei der Höhe leider nicht funktioniert. :(
 
Ok ... in dem Artikel steht, soweit ich das verstanden hab, man benutzt für die Trennlinien einfach ein Hintergrund Bild.

Ich sicher eine Lösung, aber meiner Meinung nach nicht gerade die Sauberste. Hat irgendwer noch einen Alternativvorschlag?
 
Hi,

ehrlich gesagt kann ich deinen Einwand nicht nachvollziehen, was an dieser Lösung mit dem Hintergrundbild nicht sauber sein soll, aber wenn du dir das Leben mit deinem "6-spaltigen-Layout" unbedingt schwer machen willst, hab ich noch ein paar alternative Techniken im Angebot, die sich aber eigentlich auf das klassische zwei- oder dreispaltige Layout beziehen:

  1. Equal height boxes with CSS
  2. Equal height boxes with CSS, part II
  3. Equalising Columns in CSS
  4. The 'Holy Grail' 3 column Liquid Layout (Pixel-widths)
Ob sich diese Methoden auf dein Modell übertragen und anwenden lassen, musst du selber herausfinden.

Und noch ein Hinweis: Die ersten beiden Beispiele erzielen im IE (5.x, 6, 7) nicht das gewünschte Ergebnis, da er sich hier mal wieder nicht an die Webstandards hält, und die verwendeten Tabelleneigenschaften für die display-Eigenschaft nicht unterstützt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück