Bonjour,
J'ai un petit soucis CSS. Je suis en-train de travaillé sur la présentation de produits d'une page web. en bas de ma page il y a une série d'images représentant les compléments au produit principal présenté. J'ai fais en sorte que lorsque l'on survole ces image, une boîte apparaisse et ainsi on voit la description du produit complémentaire.
Sous iE7 tout va bien, mais sous FF le texte descriptif déborde de la boîte et de plus se place sous l'image au lieu d'à côté.
voici la page
Le code html se rapportant aux compléments:
et mon CSS complements:
J'ai essayé de corrigé ça avec un clear:both ou right... pas de changement.
Avec un width appliqué au texte, correspondant à largeur de ma boîte, pas de changement non plus au niveau de FF, mais sous iE le texte se place sous l'image.
Et je ne sais plus quoi encore...
Si quelqu'un peu m'aider sur ce coup là... ça serait vraiment très apprécié!
J'ai un petit soucis CSS. Je suis en-train de travaillé sur la présentation de produits d'une page web. en bas de ma page il y a une série d'images représentant les compléments au produit principal présenté. J'ai fais en sorte que lorsque l'on survole ces image, une boîte apparaisse et ainsi on voit la description du produit complémentaire.
Sous iE7 tout va bien, mais sous FF le texte descriptif déborde de la boîte et de plus se place sous l'image au lieu d'à côté.
voici la page
Le code html se rapportant aux compléments:
<ul class="niv1">
<li><img src="../SiteImages/photosProduits/LIT-C-8.png" width="94" height="70" alt="LIT-C-8" />
<dl>
<dt><img src="../SiteImages/photosProduits/LIT-C-8.png" width="133" height="100" alt="LIT-C-8" /></dt>
<dd><h4>LIT-C-8</h4><p>Pile rechargeable au lithium avec chargeur AC.<br />
Compatible avec les caméras SPYPOINT FL-A et PRO-X.</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/SP-12V.png" width="88" height="70" alt="SP-12V" />
<dl>
<dt><img src="../SiteImages/photosProduits/SP-12V.png" width="125" height="100" alt="SP-12V" /></dt>
<dd><h4>SP-12V</h4><p>Panneau solaire avec fixation en aluminium. Peut charger la pile lithium directement dans les caméras IR-B et IR-C. Permet aussi de recharger toutes les piles 12V.</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/LIT-09.png" width="118" height="70" alt="LIT-09" />
<dl>
<dt><img src="../SiteImages/photosProduits/LIT-09.png" width="167" height="100" alt="LIT-09" /></dt>
<dd><h4>LIT-09</h4><p>Pile rechargeable au lithium supplémentaire pour les caméras SPYPOINT FL-A et PRO-X.</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/KIt-12V.png" width="115" height="70" alt="KIT-12V" />
<dl>
<dt><img src="../SiteImages/photosProduits/KIt-12V.png" width="163" height="100" alt="KIT-12V" /></dt>
<dd><h4>KIT-12V</h4><p>Pile rechargeable de 12V 7.0Ah et chargeur AC avec boîtier en plastique ABS résistant à l'eau et câble d'alimentation de 12 pieds.</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/BATT-12V.png" width="126" height="70" alt="BATT-12V" />
<dl>
<dt><img src="../SiteImages/photosProduits/BATT-12V.png" width="178" height="100" alt="BATT-12V" /></dt>
<dd><h4>BATT-12V</h4><p>Pile rechargeable de 12V 7.0Ah et chargeur AC</p></dd>
</dl>
</li><br />
<li><img src="../SiteImages/photosProduits/CB-12ft.png" width="74" height="70" alt="CB-12ft" />
<dl>
<dt><img src="../SiteImages/photosProduits/CB-12ft.png" width="105" height="100" alt="CB-12ft" /></dt>
<dd><h4>CB-12ft</h4><p>Câble d'alimentation avec pince crocodiles pour connecter une pile 12V.<br />
Longueur de 12 pieds</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/CL-6ft.png" width="63" height="70" alt="CL-6ft" />
<dl>
<dt><img src="../SiteImages/photosProduits/CL-6ft.png" width="90" height="100" alt="CL-6ft" /></dt>
<dd><h4>CB-6ft</h4><p>Câble cadenas de 6 pieds</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/SD-2GB.png" width="53" height="70" alt="SD-2GB" />
<dl>
<dt><img src="../SiteImages/photosProduits/SD-2GB.png" width="76" height="100" alt="SD-2GB" /></dt>
<dd><h4>SD-2GB</h4><p>Carte mémoire de 2GB<br />
Haute vitesse 166x</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/RD25-1.png" width="75" height="70" alt="RD25-1" />
<dl>
<dt><img src="../SiteImages/photosProduits/RD25-1.png" width="106" height="100" alt="RD25-1" /></dt>
<dd><h4>RD25-1</h4><p>Lecteur de carte USB 25 en 1. Compatible avec tous les types de carrtes mémoires (SD, CF, MS, MMC, MS, XD...)</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/PV-2,4.png" width="117" height="70" alt="PV-2,4" />
<dl>
<dt><img src="../SiteImages/photosProduits/PV-2,4.png" width="165" height="100" alt="PV-2,4" /></dt>
<dd><h4>PV-2,4</h4><p>Lecteur de photo avec écran de 2'' pour carte SD. MP3, MP4, radio, enregistreur numérique. Mémoire interne de 1GB.<br />
Écouteurs, câble USB, pile rechargeable au lithium et chargeur inclus.</p></dd>
</dl>
</li>
<li><img src="../SiteImages/photosProduits/PV-9.png" width="101" height="70" alt="PV-9" />
<dl>
<dt><img src="../SiteImages/photosProduits/PV-9.png" width="143" height="100" alt="PV-9" /></dt>
<dd><h4>PV-9</h4>
<p>Lecteur de photo et vidéo avec écran de 2.5".<br />
Câble RCA pour connecter directement aux caméras inclus.</p></dd>
</dl>
</li>
</ul>
et mon CSS complements:
#complements ul{
padding:0;
margin:0;
cursor:pointer;
display:block;
}
#complements li{
display:block;
float:left;
list-style: none;
margin-right: 20px;
margin-bottom: 20px;
}
#complements dl{
visibility:hidden;
display:block;
position:absolute;
left: 50%;
margin-left: -200px;
margin-top: -150px;
margin-top: -250px!important; /*FireFox*/
height: auto;
width: 400px;
padding: 10px;
background-color: #FF9900;
border: 1px solid #000;
}
#complements dt{
display:block;
float:left;
margin: 0px 10px 10px 0px;
}
#complements dd{
display: block;
font-family: Verdana, Geneva, sans-serif;
font-size: small;
color: #000;
text-decoration: none;
text-align: left;
margin: 0;
float: left;
}
#complements dd h4{
display: block;
font-weight: bold;
text-transform: capitalize;
margin: 0px 0px 5px 0px;
}
#complements ul.niv1 li:hover dl{
visibility:visible;
}
J'ai essayé de corrigé ça avec un clear:both ou right... pas de changement.
Avec un width appliqué au texte, correspondant à largeur de ma boîte, pas de changement non plus au niveau de FF, mais sous iE le texte se place sous l'image.
Et je ne sais plus quoi encore...
Si quelqu'un peu m'aider sur ce coup là... ça serait vraiment très apprécié!