Sujets similaires

Dernière édition par Morphin le Jeu 05 Sep 2013, 16:33, édité 1 fois

Bien le bonjour !
Alors, alors... Je suis actuellement en pleine création de design de forum pour un ami, et je me retrouve face à un problème pour le moins curieux.
Expliquons-nous : l'une des premières choses que j'ai modifiées sur ce forum est le template overall-header, afin de fixer la barre de navigation. Jusqu'ici, tout va bien, je me suis contentée de déplacer le code concernant ladite barre et de le placé au dessus du code de la bannière. Puis, après diverses modifications, je me suis attaquée à la page d'accueil, sur laquelle j'ai placé des images dotées d'une opacité progressive. A première vue, pas de quoi s'emballer.
Mais - il faut bien qu'il y ai un "mais" - une fois ma PA terminée, j'ai constaté un certain bug en faisant défiler le forum : lorsque la barre de navigation et les images à opacité progressive se croisent, ces dernières passent au dessus de la barre !
Comme ceci :

Spoiler:

Lien du forum : http://close-up-rpg.forumactif.org/
Version : phpBB2
Navigateur : Firefox, doté des dernières mises-à-jour.
Statut sur le forum : Fondatrice.

CSS de l'opacité progressive :

Code:: .opacity {
opacity:0.5;
-webkit-transition: opacity 1s ease-in-out;/*chrome*/
-moz-transition: opacity 1s ease-in-out;/*mozilla*/
transition: opacity 1s ease-in-out;/*autre navigateur*/
}

.opacity:hover {
opacity: 1;
}

CSS de la barre de navigation :

Code:: .navig {
position: absolute;
top: 0px;
width: 100%;
border-bottom: 2px #858585 solid;
background-color: #ffffff;
position:fixed;
margin: 0px;
}

Voilà, voilà, si jamais il y a une âme charitable passant par ici qui pense avoir une petite idée de ce qu'il convient de faire, je suis preneuse !
Si le problème n'était qu’esthétique, je ne vous aurais probablement pas embêté, mais ça interfère également avec le fait de cliquer sur les liens, alors...
A votre bon cœur, messieurs-dames ♥

Hop hop, le problème vient simplement du "z-index" ^^

En gros, tu vois sur Photoshop ou Gimp il y a plusieurs calques. Le calques le plus haut passe au dessus ^^.

En CSS, c'est le z-index qui règle ça (je te laisse chercher un peu plus sur Google pour avoir une vraie explication bien faite Very Happy

).
C'est la première fois que je vois un problème comme ça xD. Je ne connais pas vraiment la raison pour laquelle ça bug... C'est le opacity qui fait ça, mais alors pourquoi... Aucune idée xD. Enfin bon, le z-index peut régler ça

Code:: .navig {
position: absolute;
top: 0px;
width: 100%;
border-bottom: 2px #858585 solid;
background-color: #ffffff;
position:fixed;
margin: 0px;
z-index: 1; /* règle le problème de la barre de nav et de la PA */
}

Normalement ça devrait mieux marcher ^^

Nickel, ça fonctionne ♥
Je retiendrais l'astuce du "z-index", ça me resservira très certainement !

Merci beaucoup ! =D

Problème résolu o/

Interférence opacité progressive/barre de navigation. [résolu]

Interférence opacité progressive/barre de navigation. [résolu]

Sujets similaires

Sujets similaires

Partenaires Or