Problème d'affichage lightbox

Signaler
Messages postés
5
Date d'inscription
vendredi 21 octobre 2011
Statut
Membre
Dernière intervention
2 novembre 2011
-
Messages postés
5
Date d'inscription
vendredi 21 octobre 2011
Statut
Membre
Dernière intervention
2 novembre 2011
-
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

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


<!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>
</noscript>


[images/image-1.jpg ]
[images/grand.jpg ]
[images/Flyer concert.jpg ]
[images/Trucage Photoshop.jpg ]

















<script type="text/javascript" src="./index.js"></script>
<noscript>
</noscript>








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

2 réponses

Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Quelques remarques sur le code HTML de la page :
1 - La déclaration DOCTYPE est incomplète et erronée :
Il y a : <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
Il faut :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 - Il est recommandé de terminer les éléments vides <meta> et <link> par />
3 - Le script placé dans la section <head> ne sera pas exécuté :
Il y a :<head>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
Il faut


4 - Le script placé entre les section <head> et ne sera pas exécuté :
il faut :

<script type="text/javascript" src="./lmpres80.js"></script><noscript>
</noscript>

5 - Il est recommandé d'encadrer les attributs par des guillemets :
Il y a :
Il faut :
De plus, il est faut éviter d'entrer des attributs style avec une très longue liste de fonctions CSS. Il vaut mieux les placer dans un élément <style> externe ou interne dans la section <head>.
Si ces remarques peuvent t'aider!...
Bon courage.
Messages postés
5
Date d'inscription
vendredi 21 octobre 2011
Statut
Membre
Dernière intervention
2 novembre 2011

Merci jperre pour ton aide.
J'avais en effet constaté ces erreurs via le validateur de W3C.

Quoi qu'il en soit, mon message date un peu et depuis j'ai résolu mon problème.
La shadowbox s'affiche correctement, les vignettes sont bien à leur place, OUF !
Le site est en ligne. Mais il me reste encore des petites choses à faire dessus et aussi m'occuper de renseigner
des balises méta.

Si tu le souhaites, voici le lien pour le visiter.

URL Shortener

N'hésites pas à me faire part de tes éventuelles observations (bugs, ergonomie, mauvais goût(?),etc.)

A bientôt et encore merci à toi.