Ma lightbox passe sous le menu

Résolu/Fermé

cocodu67... Messages postés 3162 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 20 novembre 2024 - 28 juin 2013 à 20:09
cocodu67... Messages postés 3162 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 20 novembre 2024 - 28 juin 2013 à 22:02

Bonsoir,

Je viens de mettre en place ma nouvelle lightbox. A part quelques petits réglages de placement à faire, il reste encore un gros bug que mes faibles connaissances en CSS ne suffisent pas à corriger : lors de l'ouverture de la lightbox après clique sur une image, celle-ci passe sous le menu.
Vous pouvez le voir ici : http://www.fan-de-mixmaster.legtux.org/html.html

Je vous ais même hébergé le fichier html et tout ce qu'il faut afin que vous puissiez tester en local si vous le voulez bien : http://dl.free.fr/getfile.pl?file=/YlxN5Fd4
Je vous ais également mis tous le code ici : https://cssdeck.com/labs/hgkdgzod mais bien sûr il n'y a pas les images sur cssdeck.
PS : Dans le fichier CSS, le code de la lightbox est tout en bas et celui du menu juste au dessus.

J'ai essayé de modifier la valeur de quelques "position" dans le CSS mais ça n'a servit à rien à part détraquer l'affichage de mon menu. J'ai bien sûr annulé toutes les modifications.

Cette fois je ne pourrais pas trouver tout seul, cela fait 2 heures que je cherche en modifiant à chaque fois un peu mais ça n'a aucun effet.

Merci beaucoup de me sortir du pétrin.

A voir également:

Ma lightbox passe sous le menu
Menu déroulant excel - Guide
Comment trouver le mot de passe wifi sur son téléphone - Guide
Mot de passe administrateur - Guide
Windows 11 menu démarrer classique - Guide
Identifiant et mot de passe - Guide

1 réponse

Réponse 1 / 1

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
28 juin 2013 à 20:16

Bonjour,

le z-index du menu est a 999 dans le css (étrange de mettre un z-index sur un menu comme ça mais passons)

il faut ajouter la ligne :

z-index: 10000;

sur le css de la lightbox
et la même chose pour le filtre avec une valeur entre 1000 et 10000...

cocodu67... Messages postés 3162 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 20 novembre 2024 145
28 juin 2013 à 20:32

et la même chose pour le filtre avec une valeur entre 1000 et 10000...

Il est où le filtre ?

Désolé mais je suis pas très fort en CSS surtout qu'on a pas encore fait ça en cours, le peu que je sais c'est en faisant des essais avec mon menu et ma lightbox.

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
28 juin 2013 à 21:39

le selecteur c'est #shadowing

cocodu67... Messages postés 3162 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 20 novembre 2024 145
Modifié par cocodu67... le 28/06/2013 à 22:08

/*Début lightbox*/


#shadowing
{
 display: none;
 position: fixed;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background-color: #CCA;
 z-index:10000;
 opacity:0.6;
 filter: alpha(opacity=50);
}

#box 
{ 
 display: none;
 position: fixed;
 top: -1%;
 left: 20%;
 width: auto; 
 height:auto;
 max-width:auto !important; 
 max-height:auto !important;
 max-width:806px; 
 max-height:650px;
 padding: 0;
 margin:0; 
 border: 2px solid black;
 background-color: white;
 z-index:10000;
 background-color: #8E8E8E;
}


#boxcontent
{ 
 left:0;
 right:0;
 bottom:0;
 margin:0; 
 padding: 8px;
 overflow: auto;
 width:100%;
 height:100%;
z-index: 10000;
}

#boxtitle
{ 
 left:0%;
 width:100%;
 height:20px;
 padding:0;
 margin:0;
 color:black;
 text-align:center;
z-index: 10000;
}

 #screenshots
 {
  
 text-align: center;
    
 }

/*Fin lightbox*/

La lightbox passe encore sous le menu.
Edit :
J'ai laissé le CSS de la lightbox exactement comme je l'ai marqué dans ce message et j'ai remplacé le z-index: 999 par z-index: 1 dans mon CSS.
En même temps j'ai enfin compris à quoi sert z-index :)

En faite au départ le javascript, le CSS et la syntaxe HTML pour afficher les screenshots je les ai pas fait moi même.

J'ai juste modifié le HTML et JavaScript afin de pouvoir mettre un texte au choix sous chaque image car à la base c'était le chemin vers l'image qui se mettait et avoir un truc du genre screens/image20.jpg marqué sous une image c'était vraiment moche.

Discussions similaires

Mot de passe administrateur Freebox : où le trouver ?

Arnaque sur le site Passe ton billet

ma mere a oublié son mot de passe