Accueil
Créer un forumConflit de priorités
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Conflit de priorités
par Xude Lun 13 Mai 2013 - 11:56
Bonjour !
Tout d'abord j'espère ne pas me tromper de forum, en effet mon problème concerne à la fois le codage et l'apparence.
Voilà mon problème (mineur, mais embêtant). Comme le titre ne l'indique pas, je rencontre une sorte de conflit entre deux codes, l'un qui touche la barre de navigation, l'autre des images coulissantes. Explication en images :
https://2img.net/r/ihimg/photo/my-images/600/priorit1.png/
Les éléments important ici sont : la barre de navigation qui est positionnée en haut du forum et qui défile avec lui, et le cadre noir qui en fait est une image qui coulisse au survol, révélant un texte. Sur cette image, il n'y a aucun problème, mais...
https://2img.net/r/ihimg/photo/my-images/607/priorit2.png/
Patatra ! La barre de navigation passe derrière l'image ! Ce n'est pas mortel, mais assez inesthétique et irritant.
Voici la portion du CSS correspondante :
Et l'adresse du forum, pour mieux vous rendre compte par vous même : http://facture-de-pizza.forumactif.org/
Ce que je voudrais, c'est faire en sorte que la barre de navigation survole ces images coulissantes ^^
Merci de votre aide ! =)
Tout d'abord j'espère ne pas me tromper de forum, en effet mon problème concerne à la fois le codage et l'apparence.
Voilà mon problème (mineur, mais embêtant). Comme le titre ne l'indique pas, je rencontre une sorte de conflit entre deux codes, l'un qui touche la barre de navigation, l'autre des images coulissantes. Explication en images :
https://2img.net/r/ihimg/photo/my-images/600/priorit1.png/
Les éléments important ici sont : la barre de navigation qui est positionnée en haut du forum et qui défile avec lui, et le cadre noir qui en fait est une image qui coulisse au survol, révélant un texte. Sur cette image, il n'y a aucun problème, mais...
https://2img.net/r/ihimg/photo/my-images/607/priorit2.png/
Patatra ! La barre de navigation passe derrière l'image ! Ce n'est pas mortel, mais assez inesthétique et irritant.
Voici la portion du CSS correspondante :
- Spoiler:
- /*coulisse haut vers bas */
.translate {
height:100px;
width:620px;
background: #EFEFEF;
overflow: hidden;
position:relative;
}
.translate img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
top:0px;
}
.translate:hover img {
-moz-transform: translate(0px, 100px);/*XX=largeur de ton image pour un déplacement horizontal; YY=hauteur de l'image pour déplacement vertical*/
-webkit-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
transform: translate(0px, 100px);
}
.translate p {
padding:5px;
margin:0px;
text-align:justify;
}
/*coulisse bas vers haut */
.bidule {
height:100px;
width:620px;
background: #EFEFEF;
overflow: hidden;
position:relative;
}
.bidule img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
top:0px;
}
.bidule:hover img {
-moz-transform: translate(0px, -100px);/*XX=largeur de ton image pour un déplacement horizontal; YY=hauteur de l'image pour déplacement vertical*/
-webkit-transform: translate(0px, -100px);
-o-transform: translate(0px, -100px);
-ms-transform: translate(0px, -100px);
transform: translate(0px, -100px);
}
.bidule p {
padding:5px;
margin:0px;
text-align:justify;
}
/*coulisse gauche vers droite */
.gothique {
height:100px;
width:620px;
background: #EFEFEF;
overflow: hidden;
position:relative;
}
.gothique img {
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
position:absolute;
top:0px;
}
.gothique:hover img {
-moz-transform: translate(620px, 0px);/*XX=largeur de ton image pour un déplacement horizontal; YY=hauteur de l'image pour déplacement vertical*/
-webkit-transform: translate(620px, 0px);
-o-transform: translate(620px, 0px);
-ms-transform: translate(620px, 0px);
transform: translate(620px, 0px);
}
.gothique p {
padding:5px;
margin:0px;
text-align:justify;
}
/*coulisse droite vers gauche */
.burgonde {
height:100px;
width:620px;
background: #EFEFEF;
overflow: hidden;
position:relative;
}
.burgonde img {
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
position:absolute;
top:0px;
}
.burgonde:hover img {
-moz-transform: translate(-620px, 0px);/*XX=largeur de ton image pour un déplacement horizontal; YY=hauteur de l'image pour déplacement vertical*/
-webkit-transform: translate(-620px, 0px);
-o-transform: translate(-620px, 0px);
-ms-transform: translate(-620px, 0px);
transform: translate(-620px, 0px);
}
.burgonde p {
padding:5px;
margin:0px;
text-align:justify;
}
/* barre de navigation */
.navig {
position: absolute;
top: 0px;
width: 100%;
background-color: #FFFFFF;
position: fixed;}
.mainmenu[href="/faq"]{display:none;}
.mainmenu[href="/calendar"]{display:none;}
body{
background-position: top center;
}
Et l'adresse du forum, pour mieux vous rendre compte par vous même : http://facture-de-pizza.forumactif.org/
Ce que je voudrais, c'est faire en sorte que la barre de navigation survole ces images coulissantes ^^
Merci de votre aide ! =)
Dernière édition par Xude le Lun 13 Mai 2013 - 17:06, édité 1 fois
Xude- Nouveau membre
- Messages : 14
Inscrit(e) le : 18/12/2012 -
Re: Conflit de priorités
par Gorgebvsh Lun 13 Mai 2013 - 12:38
Bonjour, il faut utiliser la propriété CSS "z-index" et lui donner la valeur la plus haute possible, exemple avec z-index:999;
Cordialement.
- Code:
.navig{z-index:999;}
Cordialement.
Gorgebvsh- **
- Messages : 74
Inscrit(e) le : 12/12/2011 -
Re: Conflit de priorités
par Xude Lun 13 Mai 2013 - 17:06
Bonjour !
Un double merci, autant pour la rapidité de la réponse que pour sa pertinence !
Sujet résolu =)
Un double merci, autant pour la rapidité de la réponse que pour sa pertinence !
Sujet résolu =)
Xude- Nouveau membre
- Messages : 14
Inscrit(e) le : 18/12/2012 -
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum