Conflit de priorités

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Conflit de priorités

Message par Xude le 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 :

http://imageshack.us/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...

http://imageshack.us/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

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Conflit de priorités

Message par Gorgebvsh le 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;
Code:
.navig{z-index:999;}
une recherche sur google avec comme mot clés "z-index & CSS" devrait vous en apprendre d'avantages

Cordialement.

Gorgebvsh
**

Messages : 74
Inscrit(e) le : 12/12/2011

http://www.resistance-squad.com/#powered%20by%20forumactif%2Ecom
Gorgebvsh a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Conflit de priorités

Message par Xude le 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 =)

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum