Jump to content
Sign in to follow this  
titi63

Positionner plusieurs images au milimètre sur une page

Rate this topic

Recommended Posts

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

<span class="footdiv"><a class="foot" href="#"><img  alt="Stages Football" src="images/transparent.gif" width="100" height="100" /></a>    Stages Football</span>
<span class="tenndiv"><a class="tenn" href="#"><img alt="Stages Tennis" src="images/transparent.gif" width="100" height="100" /></a>     Stages Tennis</span>
<span class="dancdiv"><a class="danc" href="#"><img alt="Stages Danse" src="images/transparent.gif" width="100" height="100" /></a>     Stages Danse</span>
<span class="evasdiv"><a class="evas" href="#"><img alt="Stages Multisports évasion" src="images/transparent.gif" width="100" height="100" /></a>    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>      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>   Terre et aventure</span>
<span class="biatdiv"><a class="biat" href="#"><img alt="Stages Biathlon" src="images/transparent.gif" width="100" height="100" /></a>     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 }

Share this post


Link to post
Share on other sites

Bonjour,

ce n'est pas avec des padding mais avec left et right qu'on positionnement des éléments en absolute. :)

Edited by Ifmy

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

Yep captain_torche! C'était ça...

merci beaucoup!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...