[Problème] Mon code CSS n'est pas pris en compte

[bizerte77]

Bonjour,

j'ai une carte (image jpg) avec des effets hover quand on passe la souris à certains endroits.

J'ai travaillé mon code sur notepad++ et quand je test sur firefox ça fonctionne très bien.

Maintenant dans joomla, je crée un article où j'insère ma carte (image jpg) et mes différentes images (pour les hover) et j'ajoute le CSS (dans une feuille de style ou dans sourcerer c'est le même résultat). Mes images sont bien caché mais le hover ne fonctionne pas.

Je ne comprend pas d'où peut venir le problème parce qu’il marche très bien sans passer par joomla.


Voici mon code :

 <img src="plan.jpg"> 
                         
                     <div id="plan1">              
					    <span>
						    <img src="survol/seine.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan2">              
					    <span>
						    <img src="survol/atlantique.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan3">              
					    <span>
						    <img src="survol/mediterranee.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan4">              
					    <span>
						    <img src="survol/cine1.png" border="0">
					    </span> 
                     </div>
                         
                     <div id="plan5">              
					    <span>
						    <img src="survol/indo-pacifique.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan6">              
					    <span>
						    <img src="survol/expo-immersion.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan7">              
					    <span>
						    <img src="survol/calamar-geant.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan8">              
					    <span>
						    <img src="survol/calamar-geant.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan9">              
					    <span>
						    <img src="survol/recif-corallien.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan10">              
					    <span>
						    <img src="survol/biodiversite.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan11">              
					    <span>
						    <img src="survol/caraibe.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan12">              
					    <span>
						    <img src="survol/lounge.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan13">              
					    <span>
						    <img src="survol/espace.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan14">              
					    <span>
						    <img src="survol/cine2.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan15">              
					    <span>
						    <img src="survol/espace-jules.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan16">              
					    <span>
						    <img src="survol/paleontologie.png" border="0">
					    </span> 
                     </div>
					 
					 <div id="plan17">              
					    <span>
						    <img src="survol/bassin-caresses.png" border="0">
					    </span> 
                     </div>
					 
					  <div id="plan18">              
					    <span>
						    <img src="survol/point-vue.png" border="0">
					    </span> 
                     </div>
					 
					   <div id="plan19">              
					    <span>
						    <img src="survol/mur-vert.png" border="0">
					    </span> 
                     </div>
                     
                      <div id="plan20">              
					    <span>
						    <img src="survol/mur-vert.png" border="0">
					    </span> 
                     </div>
                     
                      <div id="plan21">              
					    <span>
						    <img src="survol/tunnel-requin.png" border="0">
					    </span> 
                     </div>
                     
                     <div id="plan22">              
					    <span>
						    <img src="survol/sol-interactif.png" border="0">
					    </span> 
                     </div>
                     
                     <div id="plan23">              
					    <span>
						    <img src="survol/theatre-enfant.png" border="0">
					    </span> 
                     </div>

et voici mon CSS :

#plan1{
position:absolute;
top:560px;
left:50px;
}

#plan2{
position:absolute;
top:350px;
left:50px;
}

#plan3{
position:absolute;
top:150px;
left:65px;
}

#plan4{
position:absolute;
top:1px;
left:210px;
}

#plan5{
position:absolute;
top:10px;
left:320px;
}

#plan6{
position:absolute;
top:70px;
left:470px;
}

#plan7{
position:absolute;
top:250px;
left:430px;
}

#plan8{
position:absolute;
top:270px;
left:430px;
}

#plan9{
position:absolute;
top:340px;
left:460px;
}

#plan10{
position:absolute;
top:420px;
left:380px;
}

#plan11{
position:absolute;
top:440px;
left:310px;
}

#plan12{
position:absolute;
top:520px;
left:370px;
}

#plan13{
position:absolute;
top:540px;
left:200px;
}

#plan14{
position:absolute;
top:340px;
left:280px;
}

#plan15{
position:absolute;
top:280px;
left:200px;
}

#plan16{
position:absolute;
top:200px;
left:240px;
}

#plan17{
position:absolute;
top:110px;
left:220px;
}

#plan18{
position:absolute;
top:180px;
left:260px;
}

#plan19{
position:absolute;
top:290px;
left:360px;
}

#plan20{
position:absolute;
top:320px;
left:350px;
}

#plan21{
position:absolute;
top:280px;
left:330px;
}

#plan22{
position:absolute;
top:200px;
left:270px;
}

#plan23{
position:absolute;
top:360px;
left:240px;
}


#plan1 span, #plan2 span, #plan3 span, #plan4 span, #plan5 span, #plan6 span, #plan7 span, #plan8 span, #plan9 span, #plan10 span, #plan11 span, #plan12 span, #plan13 span, #plan14 span, #plan15 span, #plan16 span, #plan17 span, #plan18 span, #plan19 span, #plan20 span, #plan21 span, #plan22 span, #plan23 span
{
visibility: hidden;
}

#plan1:hover span, #plan2:hover span, #plan3:hover span, #plan4:hover span, #plan5:hover span, #plan6:hover span, #plan7:hover span, #plan8:hover span, #plan9:hover span, #plan10:hover span, #plan11:hover span, #plan12:hover span, #plan13:hover span, #plan14:hover span, #plan15:hover span, #plan16:hover span, #plan17:hover span, #plan18:hover span, #plan19:hover span, #plan20:hover span, #plan21:hover span, #plan22:hover span, #plan23:hover span
{
visibility:visible;
}

Merci par avance pour votre aide,

Bonne journée

[cavo789]

Re : Mon code CSS n'est pas pris en compte

La meilleure façon de comprendre est d'utiliser Firebug (pour Firefox) et son inspecteur de code CSS. Il te dira si ton CSS est chargé et si c'est le cas, quel est le CSS qui s'applique à tel ou tel élément.