Coder une PA image

par popoliline Dim 13 Sep 2015 - 12:03

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui, début du codage de la PA
Lien du forum : http://fluffy-minion.forumactif.com/

Description du problème

Bonjour à tous,

Encore moi. Toujours à reprendre le codage après un autre codeur, toujours bloqué sur des petits trucs que je n'avais encore jamais réalisé avec du css. Je dois coder une PA image.

Mettre le texte au bon endroit, faire en sorte que tout soit harmonieux et non décalé, en reprenant le code d'une autre. Compliquée car j'ai du mal à savoir comment définir les zone où le texte doit être positionné. Comment connaitre les valeurs à mettre dans top et left. Je fonctionnais avec des aréa shape avant mais là je pattoge. La carte en grisé doit au passage de la souris faire apparaître des images, là aussi mystère.

Code:: <div class="en_tete"> <table> <tbody> <tr> <td> <div style="width:450px; height:35px;opacity:; position :relative; left:290px; top:10px;"> <div style="height:37px; width:120px; background-color:#;opacity:;"> <a href="http://www.yesyou-can.com/t19481-reglement"><img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="height:37px; width:120px;" /></a> </div> </div> </td> <td> <div style="width:74px; height:35px;opacity:; position :relative; left:-25px; top:10px;"> <div style="height:30px; width:74px; background-color:#;opacity:;"> <a href="http://www.yesyou-can.com/t19462-bottin-des-avatars"><img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="height:37px; width:74px;" /></a> </div> </div> </td> <td> <div style="width:85px; height:37px;opacity:; position :relative; left:-20px; top:10px;"> <div style="height:30px; width:85px; background-color:#;opacity:;"> <a href="http://www.yesyou-can.com/f175-invites-par-ici"><img style="height:37px; width:85px;" src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" /></a> </div> </div> </td> <td> <div style="width:113px; height:40px;opacity:; position :relative; left:-13px; top:10px;"> <div style="height:30px; width:113px; background-color:#;opacity:;"> <a href="http://www.yesyou-can.com/f123-scenarii"><img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="height:37px; width:113px;" /></a> </div> </div> </td> </tr> </tbody> </table> <table> <tbody> <tr> <td> <div style="position:relative;width:250px;background-color:#;opacity:;height:160px;top:63px;left:12px;"> <div style="width:230px;background-color:#;opacity:;height:150px;padding:5px;overflow:auto;margin-top:0px; line-height: 100%; font-family:arial; font-size:13px; letter-spacing:0px; line-height:12px;"> <strong>New York</strong>, j’y suis enfin, je cligne plusieurs fois des yeux. Je me pince, non, ce n’est plus un rêve, voilà, moi <em>{USER&#8288;NAME}</em> je suis à présent dans cette foule mouvante, dans cette ville qui ne semble jamais dormir, dans cette ville composée de quartiers si distinct les uns des autres, dans une ville où personne ne se ressemble et où, malgré la masse, je me sens chez moi… <a href="http://www.yesyou-can.com/t17233-contexte">more</a> </div> </div> <div style="background-color:#;opacity:;width:280px;height:80px;padding:5px;position:relative;left: 40px;top: 138px;"> <center> <a href="http://www.new-york-city-life.com/" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png" /></a><a href="http://www.pub-rpg-design.com/" target="_blank"> <img style="width: 23px;" src="http://i.imgur.com/i9q0CXT.png" /></a> <a href="http://www.berkeley-u.com/" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png" /></a> <a href="http://theisland.forumakers.com" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/i9q0CXT.png" /></a> <a href="http://bazzart.up-your.com/forum.htm" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png" /></a> <a href="http://goldheart.1talk.net/forum" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/i9q0CXT.png" /></a><a href="http://royal-ps.lebonforum.com/" target="_blank"> <img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png" /></a> <form method="POST" name="lolipop" style="left: 10px;"> <select size="1" style="FONT-SIZE: 10px;width:100px; BACKGROUND:#EEE4E7;COLOR:#613428 border:#EEE4E7 solid 1px; FONT-FAMILY: helvetica" name="wxlmenu"><option value="http://www.yesyou-can.com">LES TIP-TOP</option><option value="http://retro.bb-fr.com/">À l'ancienne</option><option value="http://www.always-love.com/">Always Love</option><option value="http://www.apple-spring.com/">Apple Spring</option><option value="http://www.aroundthelie.com/">Around The Lie</option><option value="http://be-u-miami.forumactif.com/">Be U Miami</option><option value="http://bulletproof.forumactif.org/">Bulletproof</option> <option value="http://cityofangel.forumactif.org/">City Of Angels</option><option value="http://coldcoffee.forumactif.org/">cold coffee</option><option value="http://concept-rpg.conceptforum.net/">Concept RPG</option><option value="http://cut-the-rope.forumactif.org/">Cut the rope</option><option value="http://entrance-icons.livejournal.com/">Entrance icons</option><option value="http://epicode.bbactif.com/">Epicode</option><option value="http://feelsliketonight.forumactif.com/">Feels Like Tonight</option><option value="http://fysydney.forumactif.org/">Fuck Yeah Sydney</option><option value="gorgeousdesigns.fr/">Gorgeous Designs</option><option value="http://help-in-design.1fr1.net/">Help in design</option><option value="http://london-calling.forumactif.org/">London Calling</option><option value="http://morning-coffee.forumactif.com/">Morning Coffee</option><option value="http://www.new-yorkers.net/">New Yorkers</option><option value="http://nitwittedly-yours.forumactif.org">Nitwittedly Yours</option><option value="http://ny-thedarkside.forumactif.org/forum.htm">NY- The Dark Side</option><option value="http://www.ohmyseries.org/">oh my series</option><option value="http://southport.forum-canada.com">Southport</option><option value="http://staytherefreakup.forumactif.com/">Stay there freak up</option><option value="http://thelyinggame.forum-canada.com">The Lying Game</option><option value="http://cougartown.forumgratuit.eu/">You're about forty</option><option value="http://yourdesigndiary.weebly.com/">Your Design Diary</option> <option value="http://www.your-family-tree.net/ ">Your Family Tree</option><option value="http://take-your-chance.forumactif.org/">Take Your Chance</option><option value="http://www.waterfordrpg.com">Waterford RPG</option><option value="http://such-is-life.forumactif.org/">such is life</option></select> <input value="Go" target="_blank" onclick="location = document.lolipop.wxlmenu.options [document.lolipop.wxlmenu.selectedIndex].value;" style="FONT-SIZE: 10px; BACKGROUND:#EEE4E7;COLOR:#613428; border:#EEE4E7 solid 1px; FONT-FAMILY: verdana" type="button" /> <br /> </form> </center> </div> </td> <td> <div style="background-color:#;opacity:;width:285px;height:190px;padding:5px;position:relative;left: 95px;top: 70px;"> <div style="width:400px;background-color:#;opacity:;height:300px;padding:5px;overflow:auto;margin-top:0px;"> <div class="systab"> <div class="selected"> <span> <img src="http://i.imgur.com/i9q0CXT.png" style="width: 23px;" /></span> <div class="pseudostaff"> Astaria S. de Salignac </div> <div class="rangstaff"> Administratrice sans coeur </div> <img src="http://i.imgur.com/HeBto46.gif" /> <div class="dcstaff"> DC : Ebba - Noam - Islay - Mahalia - Liam & Téo <br /> <a href="http://www.yesyou-can.com/u3600">Profil</a> <a href="http://www.yesyou-can.com/privmsg?mode=post&u=3600">Boite mp</a> </div> </div> <div> <span><img src="http://i.imgur.com/zLun0Zk.png" style="width: 23px;" /></span> <div class="pseudostaff"> G. Hae-Jin Won </div> <div class="rangstaff"> Codeur psychopathe </div> <img src="http://i.imgur.com/CPBa7yx.gif" /> <div class="dcstaff"> DC : Nastazià - Renji & Timéo <br /> <a href="http://www.yesyou-can.com/u2855">Profil</a> <a href="http://www.yesyou-can.com/privmsg?mode=post&u=2855">Boite mp</a> </div> </div> <div> <span><img src="http://i.imgur.com/i9q0CXT.png" style="width: 23px;" /></span> <div class="pseudostaff"> Kaya Jasmine Maddox </div> <div class="rangstaff"> Administratrice bisounours </div> <img src="http://i.imgur.com/uLEbPmX.gif" /> <div class="dcstaff"> DC :Mary-Jane - Meika - Dmitri <br /> Poppy & Jayme<br /> <a href="http://www.yesyou-can.com/u1838">Profil</a> <a href="http://www.yesyou-can.com/privmsg?mode=post&u=1838">Boite mp</a> </div> </div> <div> <span><img src="http://i.imgur.com/zLun0Zk.png" style="width: 23px;" /></span> <div class="pseudostaff"> Blake Coolidge </div> <div class="rangstaff"> Modératrice attachiante </div> <img src="http://i.imgur.com/kgQOWcp.gif" /> <div class="dcstaff"> DC : Aucun <br /> <a href="http://www.yesyou-can.com/u3781">Profil</a> <a href="http://www.yesyou-can.com/privmsg?mode=post&u=3781">Boite mp</a> </div> </div> <div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> <br /><br />

Code:: /* PA */ .en_tete{ position:relative; width:750px; height:568px; background-image:url('http://i.imgur.com/mPt95CH.png'); } /*ONGLET STAFF PA*/ .forumline_pa .row1 {background-color: transparent;} /* .systab .tab => les onglet */ .systab .tab { padding: 2px 10px; margin-left: 30px; color: #000; font-family: 'Exo', sans-serif; border: 1px solid #; cursor: pointer; } /* .systab .tab:hover => les onglets survolés */ .systab .tab:hover { color: #000000; border-color: #; font-family: 'Exo', sans-serif; } /* .systab .tab.selected => les onglets sélectionnés */ .systab .tab.selected{ color: #000000; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { margin-top: -10px; margin-left: -5px; margin-bottom: 1px; width: 340px; height: 180px; text-align: center; color: #000; background: #; border: 1px solid #; padding: 1px;} /*ecriture titre staff*/ .pseudostaff{ font-family: 'Yellowtail', cursive; font-size: 25px; letter-spacing:-1px; } .dcstaff{ font-family: 'Exo', sans-serif; font-size: 11px; letter-spacing:0px;} .rangstaff{ font-family: 'Expletus Sans', cursive; color:#F9F3F2; font-size:16px; letter-spacing:-1px; font-style: ;} /* style des onglets si ils sont à gauche ou à droite */ .systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px; } /* flottement des conteneurs si les onglets sont à gauche où à droite */ .systab.s_float .tabs,.systab.s_float .contents { float: left; } /*listing partenaire*/ .ville {font-family: pathway gothic one;font-size: 28px;color: #FFC864;text-align: center; text-transform: uppercase;margin-bottom: 10px;} .quartier{font-family: 'Exo', sans-serif; color:#272727; letter-spacing:-1px; font-size: 15px; text-transform: uppercase; padding-top: 10px; text-align:; } .quartier1 { position:relative; width:150px; height:150px; border:2px solid #F6DDB5; margin-left: 30px; margin-top: 0px; -moz-border-radius:200px; border-radius:200px; } .quartier1 img { position: relative; left: 0px; word-wrap: break-word; -webkit-transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; -webkit-filter: grayscale(0); } .quartierfond { position: absolute; top: 7px; left: 7px; width: 135px; height: 135px; -moz-border-radius:200px; border-radius:200px; background: rgba(255,255,255,0.85); box-shadow: 0px 0px 8px rgba(0,0,0,0.2); color: rgba(0,0,0,0.8); -webkit-transform: rotate(270deg) scale(0); -moz-transform: rotate(270deg) scale(0); transform: rotate(270deg) scale(0); opacity: 0; -webkit-transition: 0.6s all ease-in-out; -moz-transition: 0.6s all ease-in-out; transition: 0.6s all ease-in-out; } .quartierinfo {position: absolute; top: 0px; left: 0px; font-family: source sans pro; font-size: 11px; margin-top: 25px; line-height: 100% ; text-align : center; word-wrap: break-word; color : black; text-transform: lowercase; letter-spacing: 0px; height:70px; width :125px; overflow:auto;} .quartierinfo span { background: ; padding: 0px; display: inline-block; word-wrap: break-word; font-size: 9px; letter-spacing:0px; margin-bottom: 0px; box-shadow: 0px 0px 0px rgba(0,0,0,0.1); } .quartier1:hover .quartierfond { -webkit-transform: rotate(0deg) scale(1); -moz-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; } .quartier1:hover img { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); } .normalname, .unreg { display: none!important; } /*présentation du staff*/ .picstaff{ width: 430px; height: 180px; background: white; color: #737373; overflow: auto; font: 11px georgia; text-align: justify; padding: 10px; opacity: 0; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out; -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; } .picstaff:hover { opacity: .9; } .picstaff::-webkit-scrollbar { width: 5px; } .picstaff::-webkit-scrollbar-track { background-color: #eee; } .picstaff::-webkit-scrollbar-thumb { background-color: #2A7690; } /* FIN PAGE ACCUEIL */

Code:: http://i.imgur.com/kO4Ds2J.png bronx http://i.imgur.com/cJEwULp.png brooklyn http://i.imgur.com/zN3HMJg.png manhattan http://i.imgur.com/K5CI3YW.png queens http://i.imgur.com/DKaxrYn.png staten island

Il faut aussi définir le cadre pour les News que nous n'avons pas encore choisit!

Quelqu'un pourrait-il m'aider et surtout m'expliquer ?

Merci par avance,

Pauline

par Feuilla' Dim 13 Sep 2015 - 12:27

Bonjour,
voilà qui devrait aider :

résolu

https://forum.forumactif.com/t333620-image-comme-page-d-accueil
résolu

https://forum.forumactif.com/t327023-mettre-une-image-sur-sa-page-d-accueil-comment-faire

Bonne journée !

par popoliline Dim 13 Sep 2015 - 14:04

Merci de ton aide mais ça je sais le faire, c'est de coder l'image en elle-même le véritable problème Wink

Néanmoins merci d'avoir essayé de m'aider !

par popoliline Lun 14 Sep 2015 - 18:13

par popoliline Mar 15 Sep 2015 - 19:53

Un petit UP ?

par popoliline Mer 16 Sep 2015 - 23:24

par popoliline Jeu 17 Sep 2015 - 20:16

par popoliline Ven 18 Sep 2015 - 20:47

HELP PLEASE !

par popoliline Sam 19 Sep 2015 - 1:40

Résolu

par Scoubifitz Sam 19 Sep 2015 - 3:55

Bonjour,

l'aide est facile , les explications plus difficiles ...

Pour le placement des cases , c'est le même principe que les shape areas d'une map ...
La case (div) sera en position absolue , dans une autre case plus grande en position relative .
Cette case sera donc placée en top et left , par rapport au point d'origine de la grande case (en haut et à gauche).
Il faudra encore donner une taille à cette case (hauteur et largeur) .

Pour la carte ,j'ai aussi créé une case , et j'ai intégré un fond qui contient toutes les images à survoler .

Coder une PA image QjqbdjS

Suivant l'endroit survolé , le fond se place automatiquement à l'endroit demandé.

çà fonctionne comme un sprite (voir : http://www.pompage.net/traduction/sprites et le résultat)

La case "news" est rajoutée et il faudra remplir les liens de la map :

<div class="news"></div>

<div class="map">
<a id="manhat" href="#"></a>
<a id="staten" href="#"></a>
<a id="queens" href="#"></a>
<a id="brook" href="#"></a>
<a id="bronx" href="#"></a>
</div>

Pour enlever le bord noir à la case "news" , supprimez cette ligne :

/* case news */

.en_tete .news{
width:213px;
height:130px;
position:absolute;
left: 38px;
top: 318px;
overflow:auto;
z-index:1;
border:1px solid; /* ligne a supprimer */
}

Voici le code HTML pour la page d'accueil :

Code:: <div class="en_tete"> <div class="contexte"> <strong>New York</strong>, j’y suis enfin, je cligne plusieurs fois des yeux. Je me pince, non, ce n’est plus un rêve, voilà, moi <em>{USER&#8288;NAME}</em> je suis à présent dans cette foule mouvante, dans cette ville qui ne semble jamais dormir, dans cette ville composée de quartiers si distinct les uns des autres, dans une ville où personne ne se ressemble et où, malgré la masse, je me sens chez moi… <a href="http://www.yesyou-can.com/t17233-contexte">more</a> </div> <div class="partner"> <a href="http://www.new-york-city-life.com/" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png"/></a><a href="http://www.pub-rpg-design.com/" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/i9q0CXT.png"/></a><a href="http://www.berkeley-u.com/" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png"/></a><a href="http://theisland.forumakers.com" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/i9q0CXT.png"/></a><a href="http://bazzart.up-your.com/forum.htm" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png"/></a><a href="http://goldheart.1talk.net/forum" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/i9q0CXT.png"/></a><a href="http://royal-ps.lebonforum.com/" target="_blank"><img style="width: 23px;" src="http://i.imgur.com/zLun0Zk.png"/></a> <form method="POST" name="lolipop" style="left: 10px;"> <select size="1" style="FONT-SIZE: 10px;width:100px; BACKGROUND:#EEE4E7;COLOR:#613428 border:#EEE4E7 solid 1px; FONT-FAMILY: helvetica" name="wxlmenu"> <option value="http://www.yesyou-can.com">LES TIP-TOP</option> <option value="http://retro.bb-fr.com/">À l'ancienne</option> <option value="http://www.always-love.com/">Always Love</option> <option value="http://www.apple-spring.com/">Apple Spring</option> <option value="http://www.aroundthelie.com/">Around The Lie</option> <option value="http://be-u-miami.forumactif.com/">Be U Miami</option> <option value="http://bulletproof.forumactif.org/">Bulletproof</option> <option value="http://cityofangel.forumactif.org/">City Of Angels</option> <option value="http://coldcoffee.forumactif.org/">cold coffee</option> <option value="http://concept-rpg.conceptforum.net/">Concept RPG</option> <option value="http://cut-the-rope.forumactif.org/">Cut the rope</option> <option value="http://entrance-icons.livejournal.com/">Entrance icons</option> <option value="http://epicode.bbactif.com/">Epicode</option> <option value="http://feelsliketonight.forumactif.com/">Feels Like Tonight</option> <option value="http://fysydney.forumactif.org/">Fuck Yeah Sydney</option> <option value="gorgeousdesigns.fr/">Gorgeous Designs</option> <option value="http://help-in-design.1fr1.net/">Help in design</option> <option value="http://london-calling.forumactif.org/">London Calling</option> <option value="http://morning-coffee.forumactif.com/">Morning Coffee</option> <option value="http://www.new-yorkers.net/">New Yorkers</option> <option value="http://nitwittedly-yours.forumactif.org">Nitwittedly Yours</option> <option value="http://ny-thedarkside.forumactif.org/forum.htm">NY- The Dark Side</option> <option value="http://www.ohmyseries.org/">oh my series</option> <option value="http://southport.forum-canada.com">Southport</option> <option value="http://staytherefreakup.forumactif.com/">Stay there freak up</option> <option value="http://thelyinggame.forum-canada.com">The Lying Game</option> <option value="http://cougartown.forumgratuit.eu/">You're about forty</option> <option value="http://yourdesigndiary.weebly.com/">Your Design Diary</option> <option value="http://www.your-family-tree.net/ ">Your Family Tree</option> <option value="http://take-your-chance.forumactif.org/">Take Your Chance</option> <option value="http://www.waterfordrpg.com">Waterford RPG</option> <option value="http://such-is-life.forumactif.org/">such is life</option> </select> <input value="Go" target="_blank" onclick="location = document.lolipop.wxlmenu.options [document.lolipop.wxlmenu.selectedIndex].value;" style="FONT-SIZE: 10px; BACKGROUND:#EEE4E7;COLOR:#613428; border:#EEE4E7 solid 1px; FONT-FAMILY: verdana" type="button"/><br/> </form> </div> <div class="staff"> <div class="systab"> <div class="selected"> <span><img src="http://i.imgur.com/i9q0CXT.png" style="width: 23px;"/></span> <div class="pseudostaff"> Astaria S. de Salignac </div> <div class="rangstaff"> Administratrice sans coeur </div> <img src="http://i.imgur.com/HeBto46.gif"/> <div class="dcstaff"> DC : Ebba - Noam - Islay - Mahalia - Liam & Téo <br/><a href="http://www.yesyou-can.com/u3600">Profil</a><a href="http://www.yesyou-can.com/privmsg?mode=post&u=3600">Boite mp</a> </div> </div> <div> <span><img src="http://i.imgur.com/zLun0Zk.png" style="width: 23px;"/></span> <div class="pseudostaff"> G. Hae-Jin Won </div> <div class="rangstaff"> Codeur psychopathe </div> <img src="http://i.imgur.com/CPBa7yx.gif"/> <div class="dcstaff"> DC : Nastazià - Renji & Timéo <br/><a href="http://www.yesyou-can.com/u2855">Profil</a><a href="http://www.yesyou-can.com/privmsg?mode=post&u=2855">Boite mp</a> </div> </div> <div> <span><img src="http://i.imgur.com/i9q0CXT.png" style="width: 23px;"/></span> <div class="pseudostaff"> Kaya Jasmine Maddox </div> <div class="rangstaff"> Administratrice bisounours </div> <img src="http://i.imgur.com/uLEbPmX.gif"/> <div class="dcstaff"> DC :Mary-Jane - Meika - Dmitri <br/> Poppy & Jayme<br/><a href="http://www.yesyou-can.com/u1838">Profil</a><a href="http://www.yesyou-can.com/privmsg?mode=post&u=1838">Boite mp</a> </div> </div> <div> <span><img src="http://i.imgur.com/zLun0Zk.png" style="width: 23px;"/></span> <div class="pseudostaff"> Blake Coolidge </div> <div class="rangstaff"> Modératrice attachiante </div> <img src="http://i.imgur.com/kgQOWcp.gif"/> <div class="dcstaff"> DC : Aucun <br/><a href="http://www.yesyou-can.com/u3781">Profil</a><a href="http://www.yesyou-can.com/privmsg?mode=post&u=3781">Boite mp</a> </div> </div> </div> </div> <div class="news"></div> <div class="map"> <a id="manhat" href="#"></a> <a id="staten" href="#"></a> <a id="queens" href="#"></a> <a id="brook" href="#"></a> <a id="bronx" href="#"></a> </div> <div class="lien_du_bas"> <a href="http://www.yesyou-can.com/t19481-reglement" style="width:120px;"></a> <a href="http://www.yesyou-can.com/t19462-bottin-des-avatars" style=" width:150px;"></a> <a href="http://www.yesyou-can.com/f175-invites-par-ici" style="width:130px;"></a> <a href="http://www.yesyou-can.com/f123-scenarii" style="width:150px;"></a> </div> </div>

Et le CSS qui remplace entièrement le votre :

Code:: /* PA */ /* image de fond */ .en_tete{ position:relative; width:750px; height:568px; background-image:url('http://i.imgur.com/mPt95CH.png'); margin:auto; overflow:hidden; } /* case contexte */ .en_tete .contexte{ position:absolute; width:232px; height:153px; top:123px; left:50px; padding:5px; overflow:auto; font-family:arial; font-size:13px; letter-spacing:0px; line-height:12px; text-align:justify; } /* case partenaire */ .en_tete .partner{ width:230px; height:70px; position:absolute; left: 365px; top: 208px; text-align:center; } /* case news */ .en_tete .news{ width:213px; height:130px; position:absolute; left: 38px; top: 318px; overflow:auto; z-index:1; border:1px solid; /* ligne a supprimer */ } /* case map */ /* fait avec une image coulissante */ .en_tete .map{ width:235px; height:235px; background:url(http://imgur.com/qjqbdjS.png) left; position:absolute; left: 242px; top: 293px; padding:0; overflow:hidden } .map a {display: block; position:absolute;border-radius:50%;} #staten {left: 0px; top: 147px; width: 88px; height: 88px;} #queens {left: 122px; top: 67px; width: 112px; height: 137px;} #brook {left: 88px; top: 99px; width: 82px; height: 95px;} #bronx {left: 133px; top: 4px; width: 74px; height: 74px;} #manhat {left: 74px; top: 24px; width: 86px; height: 98px;} #staten:hover,#queens:hover,#brook:hover,#bronx:hover,#manhat:hover { background: url(http://imgur.com/qjqbdjS.png) no-repeat; border-radius:0px;} #staten:hover {background-position:-235px -147px;} #queens:hover {background-position:-357px -67px;} #brook:hover {background-position:-558px -99px;} #bronx:hover {background-position:-603px -4px;} #manhat:hover {background-position:-779px -24px;} /* case staff */ .en_tete .staff{ width:230px; height:280px; padding:5px; position:absolute; left: 480px; top: 290px; overflow:auto; } /*ONGLET STAFF PA*/ /* .systab .tab => les onglet */ .systab .tab { padding: 2px 10px; margin-left: 10px; color: #000; font-family: 'Exo', sans-serif; cursor: pointer; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { width: 220px; height: 180px; text-align: center; color: #000; } /*ecriture titre staff*/ .pseudostaff{ font-family: 'Yellowtail', cursive; font-size: 25px; letter-spacing:-1px; } .dcstaff{ font-family: 'Exo', sans-serif; font-size: 11px; letter-spacing:0px; } .rangstaff{ font-family: 'Expletus Sans', cursive; color:#F9F3F2; font-size:16px; letter-spacing:-1px; } /* style des onglets si ils sont à gauche ou à droite */ .systab.s_float .tab,.systab.s_float .tab { display: block; } /* flottement des conteneurs si les onglets sont à gauche où à droite */ .systab.s_float .tabs,.systab.s_float .contents { float: left; } /* case du bas */ .lien_du_bas{ position :absolute; left:70px; top:538px; } .lien_du_bas a{ display:inline-block; height:30px; } /* FIN PAGE ACCUEIL */