Positionner plusieurs images au milimètre sur une page

Bonjour

J'ai plusieurs images a positionner sur une page
ca fonctionne avec ie mais pas avec ff
j'ai essayé avec des div mais le résultat est le même
voici le lien
http://www.planete-sports.fr/

voici le code si vous avez une idée ça m'arangerait bien

<span class="footdiv"><a class="foot" href="#"><img  alt="Stages Football" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp;&nbsp; Stages Football</span>
<span class="tenndiv"><a class="tenn" href="#"><img  alt="Stages Tennis" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp;&nbsp;&nbsp; Stages Tennis</span>
<span class="dancdiv"><a class="danc" href="#"><img  alt="Stages Danse" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp;&nbsp;&nbsp; Stages Danse</span>
<span class="evasdiv"><a class="evas" href="#"><img  alt="Stages Multisports évasion" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp;&nbsp; Multisports évasion</span>
<span class="multdiv"><a class="mult" href="#"><img  alt="Stages Journalisme - Multimédia" src="images/transparent.gif" width="100" height="100" /></a>Journalisme Multimédia</span>
<span class="muscdiv"><a class="musc" href="#"><img  alt="Stages multisports P'tit musclés" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; P'tits musclés</span>
<span class="mavediv"><a class="mave" href="#"><img  alt="Stages multisports aventure" src="images/transparent.gif" width="100" height="100" /></a>Multisports aventure</span>
<span class="terrdiv"><a class="terr" href="#"><img  alt="Stages terre et aventure" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp; Terre et aventure</span>
<span class="biatdiv"><a class="biat" href="#"><img  alt="Stages Biathlon" src="images/transparent.gif" width="100" height="100" /></a>&nbsp;&nbsp;&nbsp;&nbsp; Stages biathlon</span>

 .footdiv {position:absolute; padding-top: 555px; padding-left: 288px;}
 a.foot { background-image: url('images/foot_rollover.png'); display: block; width: 100px } 
 a.foot:hover { background: url('images/foot_rollover.png') 0 -100px } 
 
 .tenndiv {position:absolute; padding-top: 355px; padding-left: 188px;}
 a.tenn { background-image: url('images/tennis_rollover.png'); display: block; width: 100px } 
 a.tenn:hover { background: url('images/tennis_rollover.png') 0 -100px } 

 .dancdiv {position:absolute; padding-top: 355px; padding-left: 522px;}
 a.danc { background-image: url('images/danse_rollover.png'); display: block; width: 100px } 
 a.danc:hover { background: url('images/danse_rollover.png') 0 -100px } 

 .evasdiv {position:absolute; padding-top: 277px; padding-left: 400px;}
 a.evas { background-image: url('images/evasion_rollover.png'); display: block; width: 100px} 
 a.evas:hover { background: url('images/evasion_rollover.png') 0 -100px} 

 .multdiv {position:absolute; padding-top: 400px; padding-left: 611px;}
 a.mult { background-image: url('images/multimedia_rollover.png'); display: block; width: 100px } 
 a.mult:hover { background: url('images/multimedia_rollover.png') 0 -100px } 

 .muscdiv {position:absolute; padding-top: 515px; padding-left: 477px;}
 a.musc { background-image: url('images/muscles_rollover.png'); display: block; width: 100px } 
 a.musc:hover { background: url('images/muscles_rollover.png') 0 -100px } 

 .mavediv {position:absolute; padding-top: 322px; padding-left: 300px;}
 a.mave { background-image: url('images/1317_rollover.png'); display: block; width: 100px } 
 a.mave:hover { background: url('images/1317_rollover.png') 0 -100px } 

 .terrdiv {position:absolute; padding-top: 533px; padding-left: 577px;}
 a.terr { background-image: url('images/terre_rollover.png'); display: block; width: 100px } 
 a.terr:hover { background: url('images/terre_rollover.png') 0 -100px } 

 .biatdiv {position:absolute; padding-top: 444px; padding-left: 244px;}
 a.biat { background-image: url('images/biathlon_rollover.png'); display: block; width: 100px } 
 a.biat:hover { background: url('images/biathlon_rollover.png') 0 -100px } 

Modifié par titi63 (04 Jun 2008 - 11:11)

J'ai l'impression que les calques se chevauchent et se cachent sur FF. Existe il un autre moyen que les DIV ou les SPAN pour placer plusieurs images sur une page???

En fait c'est un problème de rollover que j'ai. Le script vien de ce site : http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
Mais ça marche pô Sous FF
Y a t'il une autre solution?
Modifié par titi63 (03 Jun 2008 - 16:16)

Salut,

Déjà positionner tes blocs en absolute à l'aide de top (bottom) left (right) à la place des paddings, ça va surement t'aider un peu.
Voir la FAQ

Salut ghost,

mon bloc est centré avec margin: 8px auto 0px;
si je le met en absolute, il ne le sera plus

Arf!

 .footdiv {position:absolute; padding-top: 555px; padding-left: 288px;}

Non

 .footdiv {position:absolute; top: 555px; left: 288px;}

Woui

et Lire FAQ

Bon, j'ai lu la FAQ
et j'ai essayé avec top et left au lieu de padding-top et padding-left mais voila ce que ça donne : http://www.planete-sports.fr/ cela aligne mes éléments a partir du bord de la fenetre et non du bord de mon DIV, ça décale tout a gauche
Ya certainement quelque chose que j'oublie mais quoi?
Modifié par titi63 (03 Jun 2008 - 18:24)

Re,

Bah tu devrais relire...

a écrit :
Un élément positionné se place par rapport à son premier ancêtre positionné.

Ton dernier ancêtre positionné (par défaut) est html
Un petit positionnement en relative du bloc qui te sert de référent pour ton positionnement (id="all") devrait t'aider...

Au fait tiens encore un peu de lecture

Merci beaucoup ghost, c'était bien ça...super
et merci pour la lecture (j'ai modifié mon DOCTYPE)