[HTML/CSS] 2 plaatjes op elkaar

[SiliconError]

Ik ben dus bezig met een klein experiment, en ondanks veel gepruts wil het niet helemaal lukken.

Ik ben dus het volgende aan het doen...

2 plaatjes

over elkaar aan het leggen (http://silicon.xs4all.nl/test/)...

Ik heb al heel wat gelezen op W3C over layers, blocks, boxes en CSS om z-indexen en positie te bepalen, maar tot nu werkte dit het beste:

code:

  <span style="border: 1px solid white">
    [img]"plaatje1.gif"[/img]
    [img]"plaatje2"[/img]
  </span>

De 2 plaatjes moeten over elkaar in een blok van 100x100 (daar heb ik die span voor gebruikt).
Dit omdat het uiteindelijk bedoeld is voor een thumbnail systeem, waar dus meerdere van dit soort gelayerde images naast elkaar moeten (absoluut positioneren kan dus niet).

De span heeft nu even een witte border om te laten zien wat mozilla ermee doet

De bovenstaande code levert in Internet Explorer het volgende resultaat op:

Dat is dus (redelijk) goed.

In Mozilla ging het totaal door de war:


Nu is mijn vraag: weet iemand een oplossing die in mozilla ook werkt. Mozilla gaat al fout met die span (die wordt niet opgerekt naar de grootte van het plaatje).
De positionering slaat ook nergens meer op

[ Voor 7% gewijzigd door SiliconError op 31-01-2003 20:20 ]

[disjfa]

die span is niet eens nodig

als je nou gewoon die plaatjes in een style style="position: absolute" en nog een height en een left ben je klaar

alleen denk wel ff goed css te leren om dit soort vragen te voorkomen

[SiliconError]

Euh, ik had geloof ik ergens neergezet:

Dit omdat het uiteindelijk bedoeld is voor een thumbnail systeem, waar dus meerdere van dit soort gelayerde images naast elkaar moeten (absoluut positioneren kan dus niet).

Er moet dus een andere element zijn waar ik naar kan positioneren... (de span die ik nu gebruik?)

[ Voor 20% gewijzigd door SiliconError op 31-01-2003 20:27 ]

[disjfa]

dan definieer je de waarde waar je die 2 plaatjes hebt staan in js en als je een ander plaatje er neer wilt zetten verander je de src van een van de 2 plaatjes mbv js

[crisp]

Positioneren die je altijd aan de hand van een relatief of absoluut geplaatst block-level element. Ten eerste is een span een inline element, en ten tweede is hij niet relatief gepositioneerd.
De oplossing voor jouw probleem:

HTML:

<div style="position: relative; border: 1px solid white">
    [img]"plaatje1.gif"[/img]
    [img]"plaatje2"[/img]
</div>

[ Voor 18% gewijzigd door crisp op 31-01-2003 20:45 ]

[SiliconError]

Hmm, kan het kloppen dat het pas goed gaat met een hele zooi van deze dingen naast elkaar zetten als je de width en height van de <div> opgeeft (100x100) ?

Mozilla pakt het zonder ook, maar dan is de border niet 100x100, en IE pakt het helemaal niet.

Met werkt het trouwens wel:
http://silicon.xs4all.nl/test/

Heel erg bedankt!