[HTML] Relative Layers

[Verwijderd]

Voor een klein projectje heb ik een plaatje in een tabel staan... op deze plaatjes moeten weer DIV layers komen. De TD van de tabel echter kan gaan schuiven (links of gecentreerd), dus wilde ik de DIV relatief plaatsen ten opzichte van de TD. Ik gebruik hiervoor onderstaande code:

code:

<td style="padding: 0 0px 0 0px; vertical-align: top; background-color: 
rgb(255,255,255); border-left: 1px solid #007FC5; border-right: 1px solid 
#007FC5;">
   <div style="position: relative; left: 100px; top: 50px; width: 20px; 
border: 2px solid #000000;" >sfh</div>
   [img]"images/kaart.gif"[/img]
</td>

Het probleem is nu dat het lijkt alsof hij eerst de DIV tekent... dan de kaart plaatst, waardoor het plaatje een stuk naar beneden wordt geplaatst in de TD. DIV wordt correct weergegeven, maar mijn plaatje moet dus omhoog.

Hoe kan ik er voor zorgen dat het declaren van een DIV in de TD geen invloed heeft op de rest binnen de TD?

Thnx!

[ Voor 12% gewijzigd door Verwijderd op 25-08-2004 11:55 ]

[BtM909]

Door hem niet relative maar absoluut te positioneren. Je div zal zich absoluut positioneren tov. van z'n (relative gepositioneerde) parent.

[Verwijderd]

Als ik mijn DIV absoluut positioneer, gaat hij direct uit vande 0, 0 positie van het hele scherm zeg maar. Dus die parent, de TD, maakt hem niets meer uit en de DIV komt verkeerd te staan.

[André]

Verwijderd schreef op 25 augustus 2004 @ 11:58:
Als ik mijn DIV absoluut positioneer, gaat hij direct uit vande 0, 0 positie van het hele scherm zeg maar. Dus die parent, de TD, maakt hem niets meer uit en de DIV komt verkeerd te staan.

Dan moet je op die TD een position:relative zetten, dan gaat hij vanaf dat punt uit.

[BtM909]

André schreef op 25 augustus 2004 @ 11:59:
[...]

Dan moet je op die TD een position:relative zetten, dan gaat hij vanaf dat punt uit.

Dat zeg ik

[André]

BtM909 schreef op 25 augustus 2004 @ 12:00:
[...]

Dat zeg ik

Maar je komt niet duidelijk over blijkt wel weer

[BtM909]

André schreef op 25 augustus 2004 @ 12:00:
[...]

Maar je komt niet duidelijk over blijkt wel weer

offtopic:

Moest snel typen, omdat jij als posthoer behulpzame WG-er altijd veel te snel bent

[Verwijderd]

Ja dit werkt wel... alleen enkel onder Internet Explorer... Bij FireFox bijvoorbeeld gaat hij gewoon weer uit van de linkerbovenhoek van de pagina. Is er dan ook een methode om dit werkend te krijgen in andere browsers dan IE?

[André]

Verwijderd schreef op 25 augustus 2004 @ 12:06:
Ja dit werkt wel... alleen enkel onder Internet Explorer... Bij FireFox bijvoorbeeld gaat hij gewoon weer uit van de linkerbovenhoek van de pagina. Is er dan ook een methode om dit werkend te krijgen in andere browsers dan IE?

code:

<td style="position:relative;">
  <div style="position:absolute;">
  </div>
</td>

Dit zou prima moeten werken in alle browsers.

[1st_Ro]

Zolang je geen left en top definieert, gebruikt hij de linkerbovenhoek van de parent als referentie. Zodra je left en top WEL definieert, dan pakt ie de linkerbovenhoek van je scherm (bruikbare scherm) als referentie.

Even ter verduidelijking.

[ Voor 23% gewijzigd door 1st_Ro op 25-08-2004 13:22 ]

[André]

1st_Ro schreef op 25 augustus 2004 @ 13:21:
Zolang je geen left en top definieert, gebruikt hij de linkerbovenhoek van de parent als referentie. Zodra je left en top WEL definieert, dan pakt ie de linkerbovenhoek van je scherm (bruikbare scherm) als referentie.

Even ter verduidelijking.

Is dat zo? Volgens mij niet.

* André heeft geen FF om dat te testen...

[BtM909]

André schreef op 25 augustus 2004 @ 13:47:
[...]

Is dat zo? Volgens mij niet.

* André heeft geen FF om dat te testen...

Hmmm... Hij heeft gelijk Dat heb ik niet eerder gezien

edit:

Overigens alleen in combi met een table-cell. Met alleen div-jes werkt het wel!

[ Voor 18% gewijzigd door BtM909 op 25-08-2004 14:06 ]

[Verwijderd]

1st_Ro schreef op 25 augustus 2004 @ 13:21:
Zolang je geen left en top definieert, gebruikt hij de linkerbovenhoek van de parent als referentie. Zodra je left en top WEL definieert, dan pakt ie de linkerbovenhoek van je scherm (bruikbare scherm) als referentie.

Even ter verduidelijking.

Ah, dit ging er dan nog fout... ik gebruikte wel top / left, nu ik dit er uit heb gehaald werkt het wel, ik plaats de DIV nu met margin-left etc. Is dit de aan te raden manier?

Bedankt iig!

[André]

BtM909 schreef op 25 augustus 2004 @ 14:01:

Overigens alleen in combi met een table-cell. Met alleen div-jes werkt het wel!

Verwijderd schreef op 25 augustus 2004 @ 14:02:

Is dit de aan te raden manier?

Dan zou je nog kunnen overwegen om een td te plaatsen met een relative div daarin, en daarin weer een absolute div die je met top en left positioneerd.

[BtM909]

André schreef op 25 augustus 2004 @ 14:54:
[...]


[...]

Dan zou je nog kunnen overwegen om een td te plaatsen met een relative div daarin, en daarin weer een absolute div die je met top en left positioneerd.

Daar heb ik zelf nog niet eens aan gedacht

edit:

Het lijkt me trouwens ook een optie om de margin te misgebruiken!

[ Voor 13% gewijzigd door BtM909 op 25-08-2004 14:56 ]

[crisp]

BtM909 schreef op 25 augustus 2004 @ 14:01:
[...]

Hmmm... Hij heeft gelijk Dat heb ik niet eerder gezien

edit:

Overigens alleen in combi met een table-cell. Met alleen div-jes werkt het wel!

Een table-cell is ook geen blocklevel element, vandaar
zo werkt het idd altijd goed:

HTML:

<td>
  <div style="position:relative">
    <div style="position:absolute;top: 100px; left: 50px;">bla</div>
  </div>
</td>