Page d'accueil image incompatible avec firefox Bouton_activePage d'accueil image incompatible avec firefox Bouton_hoverPage d'accueil image incompatible avec firefox Fb-hoverPage d'accueil image incompatible avec firefox Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Page d'accueil image incompatible avec firefox EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Page d'accueil image incompatible avec firefox EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Page d'accueil image incompatible avec firefox EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Page d'accueil image incompatible avec firefox EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Page d'accueil image incompatible avec firefox EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Page d'accueil image incompatible avec firefox EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Page d'accueil image incompatible avec firefox EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Page d'accueil image incompatible avec firefox EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -48%
Philips Hue Pack Decouverte 2024 : lightstrip 3M + ...
Voir le deal
119 €

Partagez
 

Page d'accueil image incompatible avec firefox

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://iliketomanip.tumblr.com/
* november.
* november.
{ Membre }
{ Membre }

Féminin Messages : 12



Page d'accueil image incompatible avec firefox Empty
Bonjour ! I love you 


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 Page d'accueil image incompatible avec firefox 2077966078  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 Page d'accueil image incompatible avec firefox 577704309 
MessageSujet: Page d'accueil image incompatible avec firefox   Page d'accueil image incompatible avec firefox EmptyMer 27 Nov 2013, 05:36
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Page d'accueil image incompatible avec firefox Empty
J'utilise presque jamais le mapping, donc je pourrai ptet pas vraiment t'aider. Mais bon, je vais tenter Razz, tu t'es servis d'un tuto ? Si oui, est ce que tu peux m'envoyer le lien ^^ ?
MessageSujet: Re: Page d'accueil image incompatible avec firefox   Page d'accueil image incompatible avec firefox EmptyMer 27 Nov 2013, 16:00
Revenir en haut Aller en bas
http://iliketomanip.tumblr.com/
* november.
* november.
{ Membre }
{ Membre }

Féminin Messages : 12



Page d'accueil image incompatible avec firefox Empty
Merci tout de même d'essayer Page d'accueil image incompatible avec firefox 577704309 
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 I love you
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 Very Happy
MessageSujet: Re: Page d'accueil image incompatible avec firefox   Page d'accueil image incompatible avec firefox EmptyMer 27 Nov 2013, 16:08
Revenir en haut Aller en bas
Contenu sponsorisé




Page d'accueil image incompatible avec firefox Empty
MessageSujet: Re: Page d'accueil image incompatible avec firefox   Page d'accueil image incompatible avec firefox Empty
Revenir en haut Aller en bas
 

Page d'accueil image incompatible avec firefox

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Page d'acueil en image avec CSS
» Image sur Page d'accueil
» onglet à droite du contenue (page daccueil)
» Problème avec Firefox
» Problème de position avec Firefox

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit