Posez votre question Signaler

Problème LightBox

Justine89 - Dernière réponse le 19 oct. 2010 à 18:37
Bonjour,
J'ai installer une lightbox sur mon site à cette adresse :
http://www.kinouche.com/news.htm
elle fonctionne parfaitement sous safari, mais avec IE cela pose problème car elle necessite une scrollbar horizontale et l'image n'est pas centrée par rapport à la fenetre....
Voici ma css :
body
{
    background-color:#000000;
	font-size: 12px;
	color: #FFFFFF;
	font-family: arial; 
 	text-indent: 15px;
	list-style-type: circle;
	margin: 0 ; 
	padding: 0 ; 
}

#b
{ 
      color: #960049;
}

#i
{
      color: #3d3a3a;
}

#haut 
{
  margin: 0 auto;
  text-align: center;
}

#conteneur
{
	width:1026px;
	margin: 0 auto ;
        padding: 10px 0px;
        text-align: center;
}

#boutonhaut 
{
        margin-top: 20px;
        text-align: center;
}

#boutonhaut a {
        margin: 0px 5px;
}

#boutonhaut a img{
        border: none;
}

#gauche {
        height:297px;
        width:221px;
        margin-top: 10px;
        margin-left:0px;
        background-image:url(gauche.jpg);
        float: left;
}

#droit {
        height:300px;
        width:222px;
        margin-top: 10px;
        background-image:url(droite.jpg);
        float: right;
}
#centre {

        height: 295px;
        width: 577px;
        margin-top: 10px;
        overflow: auto;
        background-image:url(contenu.jpg);
}

#boutonbas {
        height: 71px;
        margin-top: 10px;
        text-align: center;
}

#boutonbas a {
        margin: 0px 5px;
}

#boutonbas a img{
        border: none;
}

a:link {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}

a:visited {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}

a:hover {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}


#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

#lightbox img {
height:auto;
margin:0 0 0 -15px;
padding:0;
width:auto;
}



Merci d'avance de vos réponse et très bonne journée à vous =)
Lire la suite 

Problème LightBox »

3 réponses
Réponse
+0
moins plus
Personne pour m'aider ? =)
Ajouter un commentaire
Réponse
+0
moins plus
mm problème ça marche sous safari mais dans fire fox la fenêtre apparaît tout en bas a gauche, obligé de scroler pour voir l'image....
Ajouter un commentaire
Réponse
+0
moins plus
et bien il fallait mettre le css directement dans le style du blog pour que ça marche
Ajouter un commentaire
Ce document intitulé « Problème LightBox » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook