[CSS] layer in een cel positioneren

[klaaz]

Ik zit met het volgende probleem:
Ik wil in een cel van een tabel een div plaatsen welke als layer fungeert en als zodanig er boven zweeft. Het is de bedoeling dat de inhoud van de layer, een plaatje, tevens over een aantal onderliggende cellen zichtbaar is.

Met de position eigenschap op absolute lukt dit prima, alleen de positie van de layer wordt dan tegen de ancestor body afgezet. Aangezien de tabel horizontaal en verticaal gecentreerd is geeft dit problemen met de positie van de layer als de bezoeker een afwijkend resolutie heeft.

Met de position eigenschap op relative wordt de ancestor td gebruikt, maar duwt de layer de betreffende cel in hoogte uit elkaar. Het plaatje in de layer is immers groter dan de hoogte van de cel.

Stukje code

code:

<table border="0" cellpadding="0" cellspacing="0" width="750">
  <tr>
    <td background="images/products_r1_c1.jpg" height="57">
      <div id="Layer1" style="position:absolute; width:750px; height:57px;
        overflow:visible; z-index:2; visibility: visible;" align="right";>
        [img]"cms/upload/head_acryl_paint.jpg"[/img]
      </div>        
    </td>
  </tr>
  **knip**
</table>

Heeft iemand enig idee hoe dit op te lossen? Ik heb me al een paar uurtjes suf gezocht op GoT en Google, en kom er niet uit.

[ Voor 10% gewijzigd door klaaz op 27-06-2004 13:34 ]

[chris]

Zou je misschien een plaatje/site kunnen laten zien waarop het verhaal gedemonstreerd is?

En nog wat kleine tips:
* gebruik geen tables voor je layout
* zet je css in een apart .css bestand, als je dit combineert met de bovenstaande regel dan kan je veel makkelijker je layout aanpassen achteraf.
* sluit je tags af: ipv [img]"bla"[/img]

[crisp]

zet om je absoluut gepositioneerde div in de cell nog een div met position:relative.

[klaaz]

Chris, bedankt voor je tips. Tag's afsluiten doe ik eigenlijk nooit op die manier, zal eens uitzoeken waarom dat beter zou zijn. CSS in een aparte file is standaard hier, maar zou een overdreven lange post opleveren, vandaar even inline. Een voorbeeld laten zien lukt nu even niet, wellicht later. Draait hier lokaal op een server die niet geconfigureerd is om vanaf de buitenwereld te benaderen.

crisp, ik heb nu:

code:

<div id="Layer1" style="position:relative; z-index:1; top:0px;
  left:351px; width:400px; height:57px;">
   <div id="Layer2" style="position:absolute; z-index:2; overflow:visible;">
     [img]"cms/upload/head_acryl_paint.jpg"[/img]
   </div>
</div>

De layer is nu correct uitgelijnd vanaf de linkerzijde, maar dat was ie eerder ook al. Als ik nu mijn browservenster verklein dan zakt de layer nog steeds naar beneden t.o.v. de tabel.

[crisp]

In het kort bedoel ik zoiets:

HTML:

    <td>
      <div style="position:relative">
        <div style="position:absolute;left:351px;top:0px;height:200px;width:400px;background-color:red"> </div>
      </div>
    </td>

de absoluut gepositioneerde div wordt zo gepositioneerd t.o.v. de relatief gepositioneerde div ipv t.o.v. de body. In IE wordt de div ook zonder de relatief gepositioneerde div t.o.v. de td geplaatst, maar dat is niet het geval in bijvoorbeeld Mozilla omdat een td geen block-level element is.

[klaaz]

Hé, dit lijkt te werken. Al is er na het wijzigen van de resolutie wel een refresh voor nodig om het ding op zijn plaats te krijgen...

Maar dat is wel te triggeren met Javascript hoop ik. Weer een nieuwe uitdaging

Dank je wel voor je hulp!