Layer in Tabelle "einbauen"

[Manuel B.]

Hallo,

ich habe momentan ein Problem, bei dem ich einfach nicht weiterkomme. Und zwar versuche ich momentan, einen Layer so in eine Tabelle einzubauen, das wenn der Layer die breite von 100% hat, dieser so breit ist wie die Zelle in der er sich befindet. Leider funktioniert das nur unter IE und Opera, nicht aber mit dem Firefox.

Im Firefox ist der Layer bei 100% dann immer so breit wie der Bildschirm und nicht wie die Zelle, in der er sich befindet. Hier ein Code-Beispiel:

<table cellspacing="1" cellpadding="0" border="0" style="table-layout: fixed; border-width:5px; border-color:#E7E3E7; border-style:solid;" width="100%" height="100%">
 <tr style="height: 100%;">
  <td style="width: 190px;" valign="top" style="position: relative;">

<div style="position:absolute; width: 100%; height: 50%; overflow: auto; position:absolute; background-color: #654321; z-index: 0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
  </td>
  <td width="10" style="background-color: #E7E3E7; text-align: center;">
   <a href="#"><img src="../images/minimize.png" border="0"></a>
  </td>
  <td bgcolor="#123456">
  </td>
 </tr>
</table>

Für Tips und Lösungsansätze wäre ich dankbar. Leider konnte mir die Forumssuche zum Thema direkt nicht weiterhelfen.

Viele Grüße, Manuel

[Maxx]

Hi Manuel,

Im Firefox ist der Layer bei 100% dann immer so breit wie der Bildschirm und nicht wie die Zelle, in der er sich befindet.

<div style="position:absolute; width: 100%; height: 50%; overflow: auto; position:absolute; background-color: #654321; z-index: 0">

Der arme Firefox. An seiner Stelle würde ich mich auch weigern so etwas anzuzeigen.

Warum position:absolute, warum gleich zweimal? Einmal ist schon verkehrt. Und warum width:100%? Wenn schon eine Angabe zur Breite, warum dann nicht 190px?
Lass sowohl die Angaben zur Positionierung, als auch die Angabe zur Breite weg.

Grüße,

Jochen

[Manuel B.]

Hi,

ok, ich versuche es auf anderem Wege :-)

Ich möchte folgendes Ergebnis:

+---+ +------------------+
I 1 I I                  I
+---+ I                  I
      I        3         I
+---+ I                  I
I 2 I I                  I
+---+ +------------------+

1 + 2 sollen die Breite 190px und höhe jeweils 50% haben, 3 soll die restliche breite und 100% der Höhe des Bildschirms ausfüllen. Bei einer 1280er wären also 1090px in der breits frei die er ausnutzen könnte.

Wie bekomme ich diese Aufgabe gelöst OHNE eine Tabelle einzusetzen ? Einige Leute haben jetzt schon geschriehen, man soll unbedingt Layer einsetzen, aber irgendwie kann es doch nicht sein, das ich dann bei so einer banalen Aufgabe hängen bleibe.
Über Lösungsvorschläge wäre ich SEHR dankbar.

Gruß, Manuel

[Maxx]

Hallo Manuel,

Ich möchte folgendes Ergebnis:

+---+ +------------------+
I 1 I I                  I
+---+ I                  I
      I        3         I
+---+ I                  I
I 2 I I                  I
+---+ +------------------+

1 + 2 sollen die Breite 190px und höhe jeweils 50% haben, 3 soll die restliche breite und 100% der Höhe des Bildschirms ausfüllen. Bei einer 1280er wären also 1090px in der breits frei die er ausnutzen könnte.

na, so schwer ist das doch nicht. Zuerst machst du dir Gedanken, in welcher Reihenfolge die Layer definiert werden. Für unsere Zwecke würde sich 1 - 3 - 2 (also von links nach rechts, oben nach unten) anbieten. Soweit alles klar?

OK, für 1 soll gelten:
width:190px; height:50%;
und das folgende Element soll anschließen. Also float:left. Bis hier alles ok?

Für 3 soll gelten:
height:100%; und ein linker Rand von 190 Pixel.
Also margin-left:190px; Das war es auch schon für 3.

2 wird etwas komplizierter.
height:50%; width:190px; sind dir klar? Wir müssen es jetzt nur noch unterhalb von 1 positionieren. Das geht nur absolut.
Also: position:absolute;
Jetzt fehlt nur noch eine Angabe zu top. 50% könnte an dieser Stelle passend sein.

Vermutlich musst du noch margin und padding für <body> und <div> auf 0 setzen, damit 50% + 50% auch wirklich 100% sind. Möglicherweise musst du dann auch noch die Höhe von body und html auf 100% setzen.

Aber nun darfst du wieder alleine weitermachen.

Viel Spaß,

Jochen

[Manuel B.]

Ok, deine Beschreibung übertragen würde dann so aussehen:

<body scroll="no" style="height:100%; padding:0px; margin:0px; background-color:#E7E3E7;">

<div style="width:190px; height:50%; float:left; background-color:#666666;">
  </div>

<div style="height:100%; margin-left:190px;">b
  </div>

<div style="height:50%; width:190px; position:absolute; top: 50%;">c
  </div>

</body>

Funktioniert soweit auch ... gut ... nur wie kriege ich innerhalb der Layer einen Rand von 5px hin ohne dass sich alles so verschiebt das Scrollbalken angezeigt werden ?

Gruß, Manuel