width- und height- Problem mit <div>

[Kalle_Worms]

Hallöle,

habe eine Seite, die in 4 Quadranten geteilt werden soll. Der Text gruppiert sich um den Schnittpunkt, soll also in Qu1 und Qu2 unten stehen:

11em             Rest
+----------+--------------------+
!          !                    ! 6em
!      Qu1 ! Qu2                !
+----------o--------------------+
!      Qu3 ! Qu4                !
!          !                    !
!          !                    ! Rest
!          !                    !
+----------+--------------------+

Kein Problem mit <table width=100% height=100%>

Aber: Wenn die Seite einmal höher wird als BS-Höhe, sollen Qu1 und Qu3 nicht mitscrollen, also position:fixed haben. Nun bleibt natürlich kein <td> stehen, wenn die Tabelle gescrollt wird, also versuche ich es mit <div>.

Da ergeben sich folgende Fragen:

1. Wenn Qu1 _width:11em;_ hat, was hat dann Qu2 ?
   _100%_ geht über den rechten BS-Rand hinaus, _auto_ füllt nicht bis zum Rand und _100%-11em_ mag er nicht rechnen.

2. In Qu1 und Qu2 möchte ich den text unten anordnen, aber _vertical-align:bottom_ wird ignoriert, obwohl _height:6em_ klar definiert ist. Da muss ich dann doch wieder zur Tabelle innhalb des <div> greifen ?

Muss bei diesem Layout von vornherein eine Tabelle genommen werden ?

LG Kalle

[Dracophagos]

Hallöle,

Moin.

Aber: Wenn die Seite einmal höher wird als BS-Höhe, sollen Qu1 und Qu3 nicht mitscrollen, also position:fixed haben. Nun bleibt natürlich kein <td> stehen, wenn die Tabelle gescrollt wird, also versuche ich es mit <div>.

Du kannst einen <div>-Layer in die Zelle einbauen. Auf Browsern ohne CSS hat das keine Auswirkungen, mit kannst Du sie frei positionieren, also auch das Mitscrollen ausschalten.

Da ergeben sich folgende Fragen:

1. Wenn Qu1 _width:11em;_ hat, was hat dann Qu2 ?
      _100%_ geht über den rechten BS-Rand hinaus, _auto_ füllt nicht bis zum Rand und _100%-11em_ mag er nicht rechnen.

Bei einer solchen Konstruktion wirst Du immer mit browserspezifisch unterschiedlichen Auswirkungen rechnen müssen. Im Zweifelsfall ist eine feste Breite die zuverlässigere Methode.

2. In Qu1 und Qu2 möchte ich den text unten anordnen, aber _vertical-align:bottom_ wird ignoriert, obwohl _height:6em_ klar definiert ist. Da muss ich dann doch wieder zur Tabelle innhalb des <div> greifen ?

Soviel ich weiß: ja. "vertical-align" wird meines Wissens nur als Eigenschaft einer Tabellenzelle akzeptiert. Warum das so ist, weiß ich nicht.

[wahsaga]

hi,

1. Wenn Qu1 _width:11em;_ hat, was hat dann Qu2 ?
      _100%_ geht über den rechten BS-Rand hinaus, _auto_ füllt nicht bis zum Rand und _100%-11em_ mag er nicht rechnen.

Qu2 könnte, wenn Qu1 gefloatet ist, width:auto und margin-left:11.Xem bekommen.

2. In Qu1 und Qu2 möchte ich den text unten anordnen, aber _vertical-align:bottom_ wird ignoriert, obwohl _height:6em_ klar definiert ist.

natürlich wird es ignoriert, weil vertical-align für elemente mit display:block nicht definiert ist.

Da muss ich dann doch wieder zur Tabelle innhalb des <div> greifen ?

es _könnte_ natürlich auch über den umweg absoluter positionierung innerhalb der dann selber relativ positionierten divs gehen; wird aber leicht fehleranfällig bei schriftgrößenänderung.

gruß,
wahsaga