Bonjour à tous, je rencontre un problème sur ma page web; j'ai créer 2 cadres, l'un à coté de l'autre, je les ai espacé avec du margin, j'ai appliquer un effet hover sur le premier, cet effet fait déplacer le cadre de 1 ou 2 px sur la droite et du coup mon autre cadre se déplace lui aussi, sauriez-vous la propriété à attribuer à mes cadres pour que le second cadre ne bouge pas à l'application de l'effet du premier?
J'ai déjà essayé du z-index au cas ou mais ça n'a pas marché...
Serait-ce une propriété du second cadre pour qu'il reste fixe une fois les marges attribuées? mais je ne sais pas si ça existe...
Merci pour vos futures réponses.
5 réponses
Bonjour, pourrais-tu nous montrer un bout de code stp.
Par expérience, je dirait que tu met une bordure sur le 1er bloc au moment du hover ce qui occasionne le déplacement du 2nd bloc.
La solution est d'appliquer une bordure sur le 1er bloc sans event.
Tu as deux blocs comme ceci :
<div> </div><div> </div>Et tu leur attributs une bordure :
div { border: 1px solid transparent; }Et au moment du hover tu as juste à changer la couleur de la bordure :
div:hover { border-color: red; }Et exemple concret : http://jsfiddle.net/sx796/
En fait, ça dépend du contexte : si tes blocs se trouvent dans le corps d'un site qui, de toute façon, a une taille minimale, place le deuxième bloc en position: absolute. Ainsi, il ne sera plus affecté par le bloc de gauche.
En revanche cette solution n'est, je pense, pas la meilleure à mon avis, je ne suis pas un "pro" en CSS... ;)
Merci pour ta réponse, je vais essayer que tu m'as dis, je te passe quand même un bout de code comme tu me le demande au cas ou^^
html:
<div id="cadre1"><img src="theme/cadreselec2.png">
</div>
<div id="cadre2"><img src="theme/cadreselec2.png">
</div>
CSS:
cadre1{width:342px;
height:227px;
z-index:1;
display:block;
margin-left:60px;
margin-top:50px;
float:left;
position:relative;
border: 0.5px solid rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 10px 0px #656565;
-webkit-box-shadow: 1px 1px 10px 0px #656565;
-o-box-shadow: 1px 1px 10px 0px #656565;
box-shadow: 1px 1px 10px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10);
}
border: 1px solid rgba(0,0,0,0.2);
}
width:342px;
height:227px;
z-index:2;
display:block;
margin-left:60px;
margin-top:50px;
float:left;
position:relative;
border: 0.5px solid rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 10px 0px #656565;
-webkit-box-shadow: 1px 1px 10px 0px #656565;
-o-box-shadow: 1px 1px 10px 0px #656565;
box-shadow: 1px 1px 10px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10);
}
border: 1px solid rgba(0,0,0,0.2);
}
Je viens d'essayer ta méthode, elle marche bien, ça fait à peu prés l'effet que je veux, je te remercie, juste un truc quand je met le border transparent en 2px dans mon cadre qui est à fond blanc, je vois le border en gris très clair dans mon cadre, si je met l'épaisseur en 0.5 px je ne le vois plus mais du coup mon effet hover non plus, le border étant trop fin pour qu'on puisse voir la couleur...
mais donc une méthode permettant de "fixer" un élément après lui avoir attribuer un margin et padding ca n'existe pas? je dis ça car ça m'intéresse grandement, je posterai un autre sujet prés avoir validé ma réponse ici^^
merci pour ta réponse zyber, grâce à toi j'ai résolu mon problème, j'avais un menu sur la gauche en accordéon, et dessous une image, dés que le menu se déplié l'image descendait avec lui, grâce à cette position absolue et du z-index, mon menu se déplie sur mon image maintenant^^
c'était gênant car quand mon image descendait, avec les marges, elle faisait aussi descendre mon footer, bien que esthétiquement je ne trouve pas ça déguelasse, je pense pas que ça fasse spécialement "pro"nan? du coup j'ai mis ma photo en position absolute et mon footer!