Version complète: sur le forum Webmaster Hub : Positionner plusieurs images au milimètre sur une page
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
titi63
lundi 2 juin 2008 à 13:02
Bonjour

J'ai plusieurs images a positionner sur une page
ca fonctionne avec ie mais ca ne marche qu'a moitiée 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
CODE
<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>


CODE
.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 }
Ifmy
lundi 2 juin 2008 à 14:36
Bonjour,

ce n'est pas avec des padding mais avec left et right qu'on positionnement des éléments en absolute. smile.gif
titi63
mardi 3 juin 2008 à 15:18
Bonjour Ifmy

J'ai changé mes padding-left en left mais la distance n'est plus calculée du bord de mon DIV mais du bord de la page donc ça marche pô. huh.gif
captain_torche
mardi 3 juin 2008 à 15:21
Essaye d'appliquer "position: relative;" sur l'élément parent.
titi63
mercredi 4 juin 2008 à 10:36
Yep captain_torche! C'était ça...
merci beaucoup!
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.