Credits

Gaming images in backgrounds are trademarks of their respective holders.
Museo Sans font by Jos Buivenga (exljbris) : http://www.exljbris.nl

Forum PAO LaLogotheque.com: Je galère avec le css dune lightbox - Forum PAO LaLogotheque.com

Aller au contenu

Hide message Show message

Bienvenue sur le Forum d'entraide à l'infographie de Lalogotheque.com !!!





Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Je galère avec le css dune lightbox

#1 L'utilisateur est hors-ligne   phizys 

  • Logoteur de Papier
  • Groupe : Newbies
  • Messages : 7
  • Inscrit(e) : 11-juillet 11

Posté 27 octobre 2011 - 09:06

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.

Mon lien

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 :tongue:

#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<!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]

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;}

0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)



Enter your sign in name and password


Sign in options
  Or sign in with these services