 * november. 
{ Membre }
 Messages : 12
 | Bonjour !  Depuis hier, je suis en train de m'entraîner à faire une page d'accueil pour mon forum et j'étais plutôt fière du résultat jusqu'à ce que j'ouvre Firefox pour voir si le résultat était le même qu'avec Chrome ... Et bien non, d'où le problème  J'aimerais que le rendu de la page d'accueil sur Firefox soit le même que sur Chrome, avec les liens cliquables et si possible les infobulles. Il s'agit d'une page d'accueil avec une image en background, j'ai utilisé le mappage pour rendre les liens cliquables et incrusté du texte (notamment le contexte) et trois images. Comme le texte et les images n'ont aucun souci, je suppose que le problème vient du mappage ou de l'incrustation de l'image. Comme je suis débutante, j'ai besoin d'aide s'il vous plait. Voici la partie du CSS relative à la page d'accueil ; - Code:
-
.MessAccueil {
position:relative; /* On fixe la div comme 'point de repère' */
background-image: url("http://i.imgur.com/58mTxap.png");
width:850px;
height:400px;
}
.ImgAccueil {
/* tout ce que t'as mis dans l'attribut "style" de l'image */
}
.BoiteAccueil1 {
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:317px;
top : 170px;
width:230px;
height:170px;
text-align:justify;
}
.BoiteAccueil2 {
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:95px;
top : 30px;
width:100px;
height:35px;
}
.BoiteAccueil3 {
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:700px;
top : 50px;
width:50px;
height:50px;
}
.BoiteAccueil4 {
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:750px;
top : 70px;
width:50px;
height:50px;
}
div.infobulle {
position: relative; /* on définit le bloc comme élément de référence */
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}
div.infobulle > div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}
/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div{
display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */
/* on positionne notre infobulle par rapport au bloc conteneur */
position: absolute;
top: 100px; /* 5px par rapport au haut du bloc .infobulle */
left: 15px;
/* 15 px par rapport à la gauche du bloc .infobulle */
width:150px;
/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px; /* marges internes par rapport aux bords */
/* bordures de votre infobulle*/
border-right: 3px solid #838fb2;
border-left: 3px solid #838fb2;
}
div.infobulle2 {
position: relative;
cursor:pointer;
}
div.infobulle2 > div{
display: none;
}
div.infobulle2:hover {
background: none;
z-index: 500;
}
div.infobulle2:hover > div{
display: block;
position: absolute;
top: 350px;
left: 700px;
width:150px;
background: #ebebeb;
color: black;
padding: 3px;
border-right: 3px solid #838fb2;
border-left: 3px solid #838fb2;
}
div.infobulle3 {
position: relative;
cursor:pointer;
}
div.infobulle3 > div{
display: none;
}
div.infobulle3:hover {
background: none;
z-index: 500;
}
div.infobulle3:hover > div{
display: block;
position: absolute;
top: 100px;
left: 700px;
width:150px;
background: #ebebeb;
color: black;
padding: 3px;
border-right: 3px solid #838fb2;
border-left: 3px solid #838fb2;
} Le code de la page d'accueil ; - Code:
-
<div class="MessAccueil"><map id="imgmap20131126172544" name="imgmap20131126172544"><div class="BoiteAccueil1"><marquee direction="up" scrollamount="1" scrolldelay="0" height="150px"><b><div align="justify">LA GROSSE POMME</b>, un fruit qu'on aimerait tous croquer, mais si on ne parlait pas de ce fruit si juteux, mais d'une des plus grandes villes des États-Unis ? New York, la ville qui ne dort jamais ou encore la ville lumière. Cet endroit qui nous fait rêver, qui nous fait croire que tout est possible et si c'était vrai ? À New York, tout est possible. Devenir une actrice ou encore être le meilleur élève de son domaine & à l'université. On rêve tous et cette ville nous fait rappeler de jour en jour que tout est possible. Saurons-nous découvrir notre rêve et le décrocher ? On se donne rendez-vous dans dix ans dans le centre de cette grosse pomme.</div></marquee></div><div class="BoiteAccueil2"><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=20392"><img src="http://img.root-top.com/topsite/obsession27/banner.gif"></a></div><div class="BoiteAccueil3"><div class="infobulle3"><a href="http://www.nysomv2.net/u345"><img src="http://i.imgur.com/jqTJgrN.png" style="width:50px;border-radius:90px";></a><div> <b>Olympe A. Ràmon Torrens</b><br><i>patoune ∞ patricia</i></div></div></div><div class="BoiteAccueil4"><div class="infobulle3"><a href="http://www.nysomv2.net/u542"><img src="http://i.imgur.com/bMu94eQ.png" style="width:50px;border-radius:90px;"></a><div> <b>C. Freya Dawson</b><br><i>cosima ∞ fantine</i></div></div></div><AREA id=La1 alt="topsite" shape="rect" coords="324,165,539,347" target="_blank" href=""><area shape="rect" alt="" title="topsite" coords="90,28,197,62" href="" target="" /> <AREA id=La1 alt="contexte" shape="rect" coords="224,108,266,121" target="_blank" href="http://www.nysomv2.net/t6-l-histoire-de-new-york"> <area shape="rect" alt="règlement" title="" coords="275,109,326,121" href="http://www.nysomv2.net/t9-le-reglement" target="" /> <area shape="rect" alt="bottin" title="" coords="335,109,362,119" href="http://www.nysomv2.net/t2121-bottin-des-celebrites" target="" /><area shape="rect" alt="scénarios" title="" coords="372,108,421,118" href="http://www.nysomv2.net/f10-les-habitants-attendus" target="" /><area shape="rect" alt="annonce" title="" coords="433,110,481,120" href="http://www.nysomv2.net/f5-les-annonces" target="" /><area shape="rect" alt="parrainage" title="" coords="492,111,541,120" href="http://www.nysomv2.net/f4-le-point-ecoute" target="" /><area shape="rect" alt="invités" title="" coords="553,109,584,120" href="http://www.nysomv2.net/f7-la-parole-des-invites" target="" /><area shape="rect" alt="partenariat" title="" coords="594,110,646,119" href="http://www.nysomv2.net/f8-le-partenariat" target="" /><area shape="rect" alt="top01" title="pueri fabula" coords="616,164,630,204" href="http://pueri-fabula.forumactif.org/" target="" /><area shape="rect" alt="top02" title="adopteunvoisin" coords="648,170,663,205" href="http://adopteunvoisin.forumactif.org/" target="" /><area shape="rect" alt="top03" title="" coords="685,171,698,204" href="" target="" /><area shape="rect" alt="top4" title="" coords="718,172,732,206" href="" target="" /><area shape="rect" alt="top5" title="" coords="749,174,763,205" href="" target="" /><area shape="rect" alt="top06" title="" coords="786,172,798,206" href="" target="" /><area shape="rect" alt="top07" title="" coords="619,219,632,251" href="" target="" /><area shape="rect" alt="top08" title="" coords="651,220,664,254" href="" target="" /><area shape="rect" alt="top09" title="" coords="685,219,699,253" href="" target="" /><area shape="rect" alt="top10" title="" coords="720,223,730,254" href="" target="" /><area shape="rect" alt="top11" title="" coords="753,218,764,255" href="" target="" /><area shape="rect" alt="top12" title="" coords="787,221,801,250" href="" target="" /><div class="infobulle"><area shape="rect" alt="rowena" title="" coords="118,95,167,135" href="http://www.nysomv2.net/u519" target="" /><div> <b>Rowenä C. Da Russo</b><br><i>sweet.lips ∞ christelle</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle"><area shape="rect" alt="ethan" title="" coords="60,156,104,198" href="http://www.nysomv2.net/u518" target="" /><div> <b>A.J. Ethan Monreau</b><br><i>.sweety ∞ maryane</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle"><area shape="rect" alt="rain" title="" coords="124,156,167,203" href="http://www.nysomv2.net/u419" target="" /><div> <b>Rain-Ivy Levinson</b><br><i>warrior princess ∞ maya</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle"><area shape="rect" alt="jude" title="" coords="186,155,228,203" href="http://www.nysomv2.net/u64" target="" /><div> <b>M. Jude Wildreen</b><br><i>*november. ∞ marie</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle"><area shape="rect" alt="pryma" title="" coords="54,225,100,273" href="http://www.nysomv2.net/u410" target="" /><div> <b>Pryma-Coraïl Clavel</b><br><i>drop dead ∞ lisa</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle"><area shape="rect" alt="kiara" title="" coords="123,230,168,271" href="http://www.nysomv2.net/u524" target="" /><div> <b>E. Kiara Wildreen</b><br><i>bluebell ∞ sarah</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle"><area shape="rect" alt="pandora" title="" coords="190,224,233,269" href="http://www.nysomv2.net/u110" target="" /><div> <b>Pandora-Zaïre G. Casley</b><br><i>happiness ∞ léna</i><br><font style="color:orange">PRESENCE REDUITE</font></div></div><div class="infobulle"><area shape="rect" alt="deidre" title="" coords="124,290,168,337" href="http://www.nysomv2.net/u223" target="" /><div> <b>Deidre-Luz C. Marlow</b><br><i>erased people ∞ marine</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle2"><area shape="rect" alt="milan" title="" coords="629,286,653,328" href="http://www.nysomv2.net/u347" target="" /><div> <b>N. Milan Anderson</b><br><i>getget ∞ gaëtane</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle2"><area shape="rect" alt="nala" title="" coords="666,292,685,329" href="http://www.nysomv2.net/u533" target="" /><div> <b>Nala-Isae R. Calbough</b><br><i>floutchyhot ∞ léa</i><br><font style="color:orange">PRESENCE REDUITE</font></div></div><div class="infobulle2"><area shape="rect" alt="iris" title="" coords="696,288,719,325" href="http://www.nysomv2.net/u243" target="" /><div> <b>Iris-Juliet E. Donovan</b><br><i>unchained melody ∞ lisa</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle2"><area shape="rect" alt="charly" title="" coords="729,287,753,328" href="http://www.nysomv2.net/u312" target="" /><div> <b>A. Charly O'Connor</b><br><i>jess ∞ jessica</i><br><font style="color:green">PRESENTE</font></div></div><div class="infobulle2"><area shape="rect" alt="kalypso" title="" coords="761,288,786,328" href="http://www.nysomv2.net/u287" target="" /><div> <b>T.P Kalypso Hell</b><br><i>p'titbou ∞ aurore</i><br><font style="color:green">PRESENTE</font></div></div> </map><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --> <img width="850px" height="400px" border="0" usemap="#imgmap20131126172544" src="http://i.imgur.com/58mTxap.png"></div> <center><size=9>forum optimisé pour Google Chrome.</size></center> Et enfin le forum en question ; http://november-test.superforum.fr/forum Il y a peut-être un conflit avec une div, ou je ne sais pas. Il y a aussi l'infobulle3 qui ne fonctionne pas, mais je ne sais pas si ça a un rapport avec le problème. J'ai pas cherché à savoir pour le moment d'où venait le beug car je pensais pas que c'était primordial, mais je préfère prévenir quand même. Merci d'avance à la ou les personnes qui m'aideront et bonne journée  | | |
|
Nihil 
{ Modérateur }
Messages : 1216
| J'utilise presque jamais le mapping, donc je pourrai ptet pas vraiment t'aider. Mais bon, je vais tenter  , tu t'es servis d'un tuto ? Si oui, est ce que tu peux m'envoyer le lien ^^ ? | | |
|
* november.
{ Membre }
Messages : 12
| Merci tout de même d'essayer Je n'ai pas vraiment utilisé de tuto, j'ai regardé quelques sujets sur le forum d'entraide Bazzart et après j'ai bidouillé quoi. Je me suis attardée sur ce post ; - Citation :
- Bonsoir,
Au lieu de télécharger un logiciel, il y a un site qui fait ça tout seul, pas besoin d'installer quoi que ce soit : http://www.maschek.hu/imagemap/imgmap =]
Suffit de choisir son image depuis son ordinateur ou de l'héberger et de coller le lien, de cliquer sur "accept" et quand elle apparait dans le bas, de cliquer sur le petit plus vert et de sélectionner ses zones. Quand c'est terminé, cliquez sur "HTML" et voilà le code. Il faudra juste penser à ajouter le lien de l'image (le truc en violet dans la citation), le code ne le donne pas :
- Code:
-
<map id="NOMDELAMAP" name="XXX"> <area shape="rect" alt="" title="" coords="" href="" target=""> <area shape="rect" alt="" title="" coords="" href="" target=""> </map> <img width="Xpx" height="Xpx" border="0" usemap="#NOMDELAMAP" src="LIEN DE L'IMAGE"> J'ai donc utilisé le site et le code fourni pour le mappage Après, pour mon CSS, je me suis inspirée d'un sujet de CSS actif, à savoir celui-là http://www.css-actif.com/t11262-creer-une-pa-cliquable-et-interactif-en-meme-temps?highlight=cliquable C'est à peu près tout en ce qui concerne le mappage. Merci d'avance  | | |
|
Lun 03 Juin 2024, 17:20 par 
