Bonjour à tous,
J'ai installé sur une page test une lightbox, ou plus précisément une shadowbox, qui est plus simple et plus légère.
Mon problème c'est que les miniatures qui appellent la shadowbox sont à l'extérieur de ma page.
Jetez un coup d’½il sur mon site. Vous verrez un cadre blanc que j'ai mis pour délimiter ma page et ainsi mieux se rendre compte que les images sont à l'extérieur.
Pire les images "poussent" ma page vers le bas.
http://goo.gl/TZCcs
Ma manière d'opérer ?
Avec notepad++.
Je colle les liens utiles dans mon head de la page recevant la shadowbox.
Je complète les URL des liens pointant vers mes images dans le css de la shadowbox.
Je mets tout sur le serveur.
Mon problème, je pense, c'est que le css de la shadowbox ne tient pas compte du css de ma page.
D'ailleurs, le css de la shadowbox n'a aucun paramètre de mise en page : par défaut les images se placeront en haut à gauche.
Je vous joints le css de la shadowbox, le code html de ma page et son css.
J'espère que des calés en code pourront me venir en aide. Merci d'avance à eux
Code HTML :
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#ffffff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(images/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:18px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(images/close.png);}
#sb-nav-next{background-image:url(images/next.png);}
#sb-nav-previous{background-image:url(images/previous.png);}
#sb-nav-play{background-image:url(images/play.png);}
#sb-nav-pause{background-image:url(images/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
Code HTML :
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<script type="text/javascript" src="./lmpres80.js"></script><noscript><br></noscript>
<body style="margin-Left:0px;margin-Top:0px;margin-Bottom:0px;margin-Right:0px;" onresize=PosPage(2,2,1.000000,1.000000); bgcolor="#000000" >
<a href="images/image-1.jpg" rel="shadowbox[images]" title="affiche"><img src="images/image-1.jpg" width="167" height="250" alt="image-1.jpg" /></a>
<a href="images/grand.jpg" rel="shadowbox[images]" title="affiche"><img src="images/grand.jpg" width="167" height="250" alt="grand.jpg" /></a>
<a href="images/Flyer concert.jpg" rel="shadowbox[images]" title="Flyer concert"><img src="images/Flyer concert.jpg" width="167" height="250" alt="Flyer concert.jpg" /></a>
<a href="images/Trucage Photoshop.jpg" rel="shadowbox[images]" title="Trucage Photoshop"><img src="images/Trucage Photoshop.jpg" width="250" height="187" alt="Trucage Photoshop.jpg" /></a>
<DIV id=lmwcbackpanel2 align='center'>
<DIV id=lmwcbackpanel style="position:relative;width:760px;height:1000px;">
<DIV id=lmwcbackpanelinner style="visibility:visible;overflow:hidden;position:absolute;left:0px;top:0px;width:760px;height:1000px;clip:rect(0px,760px,1000px,0px);">
<DIV id=Page class="cPage">
<a name=ANCHOR_Page></a><IMG alt="" id=LMImagePage src="./lmimginv.gif" class="cLMImagePage">
</DIV>
<DIV id=Box1 class="cBox1">
<a name=ANCHOR_Box1></a>
<IMG alt="" id=LMImageBox1 src="./images/index_Box1.jpg" class="cLMImageBox1"></DIV>
<script type="text/javascript" src="./index.js"></script>
<noscript><br></noscript>
</DIV>
</DIV>
</DIV>
</body>
</html>
Code HTML :
h1,h2,h3,h4,h5,h6,p {margin: 0px;padding: 0px;}
.cLinkHidden {position:absolute; visibility:hidden; left:0px; top:0px; width:0px; height:0px; overflow:hidden;}
.cPage {visibility:visible;overflow:hidden;position:absolute;z-index:1;left:0px;top:0px;}
.cLMImagePage {width:760px;height:1000px;border:0px;}
.cBox1 {visibility:visible;overflow:hidden;position:absolute;z-index:2;left:1px;top:2px;}
.cLMImageBox1 {width:758px;height:997px;border:0px;}