[HTML] Layer goed positioneren

[Verwijderd]

http://www2.hku.nl/~patrick/pijncentrum/

hier zie je een layout die gemaakt is dmv. van tables, nu wil ik de div layer die je nu links op het scherm ziet (de stippellijn), zo zetten dat hij voor elke resolutie rechts naast het lichtblauwe vlak komt te staan. I don't have a clue ...

[Verwijderd]

Ik heb nu de laag volgens mij goed in de HTML zitten, ik gebruik de absolute: relative CSS zodat hij de co-ordinaten gebruikt van de bovenstaande table. Op deze manier moet hij dus in elke resolutie goed komen te staan. Probleem is echter dat hij onder deze table staat, wanneer ik de positie van de top aangeef met -415px (de hoogte van de bovenstaande table) dan komt de stippellijn wel te staan zoals het hoort, maar hij laat daaronder nog een enorm wit vlak, van ook precies 415px.

Wat doe ik verkeerd

[Croccifixio]

Op zaterdag 06 april 2002 21:02 schreef PatrickPietens het volgende:
Ik heb nu de laag volgens mij goed in de HTML zitten, ik gebruik de absolute: relative CSS zodat hij de co-ordinaten gebruikt van de bovenstaande table. Op deze manier moet hij dus in elke resolutie goed komen te staan. Probleem is echter dat hij onder deze table staat, wanneer ik de positie van de top aangeef met -415px (de hoogte van de bovenstaande table) dan komt de stippellijn wel te staan zoals het hoort, maar hij laat daaronder nog een enorm wit vlak, van ook precies 415px.

Wat doe ik verkeerd

Hhhmm...zet je het position attribuut nou op relative of op absolute?
Volgens mij moet het op absolute staan. Want je wilt de layer verplaatsen binnen de context van de table.

[Verwijderd]

maar absolute gaat hij kijken naar het document ... en niet naar de tabel. Relative wel ... toch

[Croccifixio]

Op zaterdag 06 april 2002 21:43 schreef PatrickPietens het volgende:
maar absolute gaat hij kijken naar het document ... en niet naar de tabel. Relative wel ... toch

Volgens mij niet.....ik heb het nagekeken in een boek en juist bij absolute kijkt hij naar de context van de omvattende container. Het enige dat je waarschijnlijk dus wel moet doen is de layer binnen de table tag definieren.

Bij relative wordt het element verplaatst binnen zijn eigen context, dwz hij wordt eerst op de oorspronkelijke plaats gezet en daarna verplaatst. Bij absolute kijkt hij niet naar zijn eigen oorspronkelijke plaats, maar naar de positie van de omvattende container en wordt daarna verplaatst.

edit:

Ik zal even een voorbeeldje voor je maken.

[Verwijderd]

Op zaterdag 06 april 2002 21:46 schreef -TheGrimReaper- het volgende:

Bij absolute kijkt hij niet naar zijn eigen oorspronkelijke plaats, maar naar de positie van de omvattende container en wordt daarna verplaatst.

Er wordt gekeken naar een absoluut gepositioneerde container, dus als je je tabel niet absoluut positioneerd, zul je het anders moeten aanpakken.

[Croccifixio]

Absolute positioning:

code:

<div id="someDiv" style="position:absolute; left:100; top:50">
Hello
<span id="someSpan" style="position:absolute; left:10; top:30">
Hello, again.
</span>
And now it's time to say goodbye.
</div>

Relative positioning:

code:

<div id="someDiv" style="position:absolute; left:100; top:50">
Hello
<span id="someSpan" style="position:relative; left:10; top:30">
Hello, again.
</span>
And now it's time to say goodbye.
</div>

Ik heb deze voorbeelden uit: "Dynamic HTML, the definitive reference" van O'Reilly.

Als het goed is kan je nu het verschil zien tussen absolute en relative. Tenminste, als je ze eff in een html docje plakt.

[Croccifixio]

Op zaterdag 06 april 2002 21:48 schreef Cheatah het volgende:

[..]

Er wordt gekeken naar een absoluut gepositioneerde container, dus als je je tabel niet absoluut positioneerd, zul je het anders moeten aanpakken.

Je hebt gelijk....dus de table een absolute positioning meegeven en misschien dat het dan lukt ?

[Verwijderd]

Maar ik wil de table juist niet absoluut hebben, hij moet bij elke resolutie juist middenin het scherm staan!

[Croccifixio]

Op zaterdag 06 april 2002 22:18 schreef PatrickPietens het volgende:
Maar ik wil de table juist niet absoluut hebben, hij moet bij elke resolutie juist middenin het scherm staan!

En als je het volgende probeert:

code:

<table align="center">
<div style="position:absolute">
</div>
</table>

Ik heb het eff snel in IE geplakt en de table wordt gecentreerd en de div heeft als context de table...

[SideBuster]

Ik zelf gebruik voor dit soort gevallen een plugin voor Dreamwaever Ultra dev. Genaamd URL in to layer. Deze is op elke gewenste positie te plaatsen en je kunt de grootte ervan instellen.

Kweet niet of dat is wat je zoekt.....

[Clay]

wat je kan doen is een position:relative div in een td zetten die gecentreerd is in je pagina, en in die relative div absolute neerzetten, genest.
De positie is dan absoluut tov de relative layer, en dus beweegt die netjes mee.

code:

<html>
<head>
<style type="text/css">

#container  {position:relative; width:100px; height:100px;}
#content    {position:absolute; left:0px; top:0px;}

</style>
</head>

<body>

< tables e.d. >

<div id="container">
    <div id="content">
    blah
    </div>
</div>

< tables e.d. >


</body>
</html>

[Verwijderd]

Clay, thnx ... werkt perfect! http://www2.hku.nl/~patrick/pijncentrum/