Sujet Précédent Sujet Suivant

Problème d'affichage lightbox

phizys Messages postés 5 Date d'inscription vendredi 21 octobre 2011 Statut Membre Dernière intervention 2 novembre 2011 - 27 oct. 2011 à 10:28
phizys Messages postés 5 Date d'inscription vendredi 21 octobre 2011 Statut Membre Dernière intervention 2 novembre 2011 - 2 nov. 2011 à 15:15
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

Réponse 1 / 2
cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
2 nov. 2011 à 13:08
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.
0
Réponse 2 / 2
phizys Messages postés 5 Date d'inscription vendredi 21 octobre 2011 Statut Membre Dernière intervention 2 novembre 2011
2 nov. 2011 à 15:15
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.
0

Discussions similaires

gestion d’une pharmacie
donndaryl -
NHenry -

1 réponse
Un Container qui ne s'affiche pas !!??
azerty_qwerty -
azerty_qwerty -

1 réponse
affichage d'un container dans un autre en fct du menu
bmikl59 -
bmikl59 -

2 réponses
affichage de caractere dans une grille
anzelus -
anzelus -

2 réponses
webview2 pb d affichage en exportent le projet
FRED92G -
FRED92G -

11 réponses
Rejoignez-nous