28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
je rencontre un petit souci sous ie7,
en effet, j'insère des images dans mon contenu de cette manière :
- html

<div id="choix_fond">
 <img class="img1" src="/Icons/img/vide.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img2" src="/Icons/img/vert.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img3" src="/Icons/img/bleu.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img4" src="/Icons/img/marron.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img5" src="/Icons/img/blanc.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
</div>


-css


.img1, .img2, .img3, .img4, .img5 {float:left;border-color:#ccc;height:256px;width:66px;margin-top:-3px;padding:2px}


j'ai même tenté la manip' suivante, mais rien ne change :


<div id="choix_fond">
 <img class="img1" height="256" width="66" src="/Icons/img/vide.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img2" height="256" width="66" src="/Icons/img/vert.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img3" height="256" width="66" src="/Icons/img/bleu.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img4" height="256" width="66" src="/Icons/img/marron.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img class="img5" height="256" width="66" src="/Icons/img/blanc.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
</div>


auriez vous une suggestion ?

merci d'avance
Modifié par Guim (13 Oct 2008 - 10:52)
Bonjour Guim,

Les dimensions des images placées dans le code html sont obligatoires, la manip tentée est donc correcte Smiley cligne
Ensuite concernant le code css et html :
Puisque les propriétés css sont identiques pour toutes le images contenues dans ton identifiant choix_fond :
#choix_fond img {
float:left;border-color:#ccc;height:256px;width:66px;margin-top:-3px;padding:2px
}

remplacera avantageusement :
.img1, .img2, .img3, .img4, .img5 {float:left;border-color:#ccc;height:256px;width:66px;margin-top:-3px;padding:2px}

Les classes du code html peuvent donc être supprimées :
<div id="choix_fond">
 <img  src="/Icons/img/vide.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img  src="/Icons/img/vert.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img  src="/Icons/img/bleu.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img  src="/Icons/img/marron.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
 <img  src="/Icons/img/blanc.gif" alt="" title="" dojoType="mymodule.imageReflect" reflectHeight="20" reflectStart="0.3"/>
</div>


Pour ton problème de dimensions différentes sous IE7, j'avoue qu'il est assez difficile de te répondre efficacement sans avoir une page de test en ligne (pour avoir accès aux images), sans visualiser ce que tu tentes de faire avec ces images (les dimensions des images sont-elles celles avec le reflet ou sans ?)
Un "display:block;" pourrait peut-être résoudre ce soucis, mais il n'y a aucune certitude sur ce point Smiley ohwell

A toi de jouer donc Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (13 Oct 2008 - 15:55)
Bonjour Sylvain,
merci pour ton intérêt.

en fait, j'ai résolu le problème... sans le résoudre.
je m'explique : le contenu en question, que je préparais, est appelé en include dans un autre contenu, préparé par d'autres.
pour faire court, il se trouve qu'il y avait un conflit entre les img des 2 contenus.
j'aurais pu effectuer la vérification avant, c'est évident, surtout qu'il y avait plusieurs manières d'y remédier sans trop se décarcasser... mais je n'y avais pas pensé... tout simplement

à part ça, j'ai tout de même suivit ton conseil en l'ajustant : au lieu d'avoir img1 2 3 4 5... j'ai réduit à img1 & img2 (avec un margin left en +)

pour info, les mesures ne prenaient pas en compte les reflets.

Merci encore,
je ne ferai plus la même bourde à l'avenir Smiley confused