[XHTML & CSS] Image over image, bovenste positioneren

[Urk]

Ik heb onderstaande code geschreven:

HTML:

<div id="imagezoom" style="visibility: hidden; position: absolute; left: 194px; top: 233px; width: 586px; z-index: 20;">
 [img]"images/products/2001_2_big.jpg"[/img]
 [img]"images/sluit_foto_button.gif"[/img]
</div>

Hoe kan ik er echter voor zorgen dat het 2e plaatje (sluit_foto_button.gif) rechtsboven bovenop het eerste plaatje wordt gepositioneerd? Het eerste plaatje heeft altijd een variabele breedte.
Ik krijg het maar niet voor elkaar, wat ik ook probeer met float, align, right, top etc...
Iemand die een inkoppertje kan geven?

[André]

Zoiets?

code:

<img src="images/products/2001_2_big.jpg" id="imagezoom" border="0" alt="" style="position: absolute; border: 2px solid white; right: 0px;" />
<img src="images/sluit_foto_button.gif" width="20" id="sluitbutton" border="0" alt="Sluit foto" style="position: absolute; right: 2px; top: 2px; cursor: pointer;" onclick="document.getElementById('imagezoom').style.visibility='hidden';" />

[Urk]

André schreef op dinsdag 31 mei 2005 @ 14:28:
Zoiets?

code:

[img]"images/products/2001_2_big.jpg"[/img]
[img]"images/sluit_foto_button.gif"[/img]

Nu lijnt hij het plaatje echter rechts uit door je right: 0px; bij het eerste image.
Dit is echter niet de bedoeling, het eerste plaatje moet altijd links links blijven, stel dat het plaatje dan 50 breedt is dan moet de sluitknop dus rechtsboven op het eerste plaatje staan. ongeacht de breedte van het eerste plaatje.

[André]

Dan zul je een container om beide plaatjes heen moeten zetten die net zo groot is als het eerste plaatje. Dan kun je de kleine image aan de rechterkant van die container zetten.

[Urk]

André schreef op dinsdag 31 mei 2005 @ 14:43:
Dan zul je een container om beide plaatjes heen moeten zetten die net zo groot is als het eerste plaatje. Dan kun je de kleine image aan de rechterkant van die container zetten.

OK, dat probeerde ik inderdaad al eerst met die DIV. Wat bedoel je echter precies met een container?? Kan dat een DIV zijn?
Ik moet dat dus dan echt dynamisch gaan doen met ASP, om beide "containers" de breedte te geven van het plaatje, toch?

[ThunderNet]

Urk schreef op dinsdag 31 mei 2005 @ 14:46:
[...]

OK, dat probeerde ik inderdaad al eerst met die DIV. Wat bedoel je echter precies met een container?? Kan dat een DIV zijn?
Ik moet dat dus dan echt dynamisch gaan doen met ASP, om beide "containers" de breedte te geven van het plaatje, toch?

Ik denk dat andre bedoeld, dat elk plaatje in een aparte DIV doet
en die 2 DIVS dezelfde grote geeft

[Urk]

OK, dat vermoeden had ik al
Zou ik dan de breedte van het eerste plaatje op kunnen halen en dan beide divs die breedte geven?
Dat kan neem ik aan alleen met JS en/of ASP en niet met alleen CSS, correct?
Wat is de meest efficiente methode om de breedte van het plaatje op te halen?

[André]

Nee, ze kunnen allebei in dezelfde container, en ja dat kan een div zijn.

[ThunderNet]

in asp zou je het plaatje kunnen laden, en de dimensies ervan bekijken.
maar misch. kan het ook wel met css dat weet ik niet

[André]

code:

  <div id="imagezoom" style="visibility: haidden; position: absolute; left: 194px; top: 233px; width: 586px; z-index: 20;">
    <div style="position: absolute;">
      <img src="bla.jpg" id="imagezoom" />
      <img src="bla.jpg" id="sluitbutton" style="position:absolute; right: 0px; top: 0px;" />
    </div>
  </div>

[Urk]

André schreef op dinsdag 31 mei 2005 @ 14:58:

code:

  <div id="imagezoom" style="visibility: haidden; position: absolute; left: 194px; top: 233px; width: 586px; z-index: 20;">
    <div style="position: absolute;">
      [img]"bla.jpg"[/img]
      [img]"bla.jpg"[/img]
    </div>
  </div>

Top! Dank je André!
Uiteindelijk is het dit geworden:

HTML:

<div id="imagezoom" style="display: none; position: absolute; left: 194px; top: 233px; width: 586px; z-index: 20;">
 <div style="position: absolute;">
  [img]"images/products/2001_1_big.jpg"[/img]
  [img]"images/sluit_foto_button.gif"[/img]
 </div>
</div>

Uiteindelijk zat het ook in de position: absolute; van het eerste plaatje, deze weggehaalt werkt het perfect.
Een container kan ook een <SPAN> zijn toch?
Wat is precies het technische verschil tussen een DIV en SPAN container?

[ThunderNet]

Urk schreef op dinsdag 31 mei 2005 @ 15:07:
[...]

Ik dacht dat een span puur voor tekst bedoeld was?

edit:
ik zat er dus naast

[ Voor 10% gewijzigd door ThunderNet op 31-05-2005 15:16 ]

[André]

Een span is een inline element en mag ook alleen maar inline elementen bevatten, en een div is een block level element en mag ook inline elementen bevatten.

[Urk]

ThunderNet schreef op dinsdag 31 mei 2005 @ 15:09:
[...]


Ik dacht dat een span puur voor tekst bedoeld was?

edit:
ik zat er dus naast

Dat dacht ik ook, als ik een DIV voor tekst gebruik krijg ik soms een extra lege regel, bij een SPAN niet.