J'ai réalisé le fond de mon site et dorénavant je voudrais passé au remplissage, mais voilà lors de la mise en place de ma première image, la fonction lightbox ne fonctionne pas ou pas correctement, j'ai beau cherché dans tous les sens je ne vois ce qui bloque. J'ai réussi à le faire fonctionner, mais la procédure me parait fastidieuse, il suffit de refaire une page compléte et la par miracle cela fonctionne. problème c'est que j'ai déja tout réalisé, je me vois mal recommencer les 3/4 du site.
Si quelqu'un pouvait me dire quel est l'erreur que j'ai commise ca me serait d'un grand secours.
Par avance MERCI
Voici le lien du site (en construction) et un extrait du fichier, il s'agit d'une page du site => " Bricolage " => " Bain fluidisé ".
http://la.peche.ma.passion.free.fr/
le fichier:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>BainFluidise</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="xfterrible" content="HAPedit 3.1">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font-family: arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 76%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
}
p {
margin: 0 10px 10px;
}
a {
padding: 10px;
display: block;
color: #981793;
}
.titrechapitre {
color: #66cccc;
font-family: Balloon;
text-align: left;
padding-left: 100px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: inherit;
font-style: normal;
text-decoration: underline;
font-size: 1.4em;
line-height: 1.2em;
}
.soustitrechapitre {
text-align: left;
font-style: normal;
color: #232323;
font-family: Script-R691;
padding-bottom: 0px;
padding-left: 30px;
line-height: 1.2em;
font-size: 1.3em;
font-weight: normal;
text-decoration: none;
}
.menuprincipal {
border: 4px double black;
padding: 0px 0px 3px;
text-align: center;
text-decoration: none;
list-style-type: none;
margin-left: 0px;
margin-right: 0px;
visibility: visible;
display: block;
height: 30px;
margin-top: 0px;
position: static;
width: 792px;
}
.menuprincipal a {
border: 2px solid black;
margin: 8px 0px 0px 8px;
padding: 0px 0px 2px;
background-color: transparent;
bottom: 0px;
clear: none;
list-style-type: none;
top: 0px;
color: black;
text-decoration: none;
display: block;
float: left;
height: 14px;
right: 0px;
position: static;
line-height: 1em;
font-weight: bold;
text-align: center;
left: 0px;
font-family: Times New Roman;
font-size: 1.2em;
width: 144px;
}
.menuprincipal a:hover {
border-style: solid;
border-color: black;
border-width: 2px 2px 1px 1px;
list-style-type: none;
background-color: #cccccc;
display: block;
width: 144px;
}
.menuprincipal a:active {
border-color: black;
border-width: 1px 1px 2px 2px;
list-style-type: none;
display: block;
background-color: white;
width: 144px;
}
div#header h1 {
margin: 10pt 0 0;
padding: 0px 0px 0px 10px;
background-color: transparent;
background-repeat: no-repeat;
background-position: left center;
height: 100px;
bottom: 0px;
line-height: 0;
color: black;
background-image: url(../images/Image%20banniere/Banniere%20du%20forum.jpg);
}
div#container {
text-align: left;
padding-bottom: 0px;
margin-bottom: 0px;
bottom: 0px;
top: 0px;
padding-top: 0px;
margin-top: 0px;
}
div#content p {
line-height: 1.4;
color: white;
top: 0px;
padding-top: 0px;
margin-top: 0px;
}
div#navigation {
text-align: center;
background-color: transparent;
background-position: center center;
font-weight: bold;
text-transform: capitalize;
text-decoration: none;
font-size: 1em;
color: #cc9933;
font-family: Monotype Corsiva;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 2px;
background-repeat: repeat;
background-image: url(../images/Image%20Fond%20menu.JPG);
}
div#extra {
border-color: black;
border-width: 0px;
margin: 0px;
background-color: transparent;
background-repeat: no-repeat;
position: static;
padding-bottom: 0px;
top: 0px;
padding-top: 0px;
max-height: 120px;
width: 0px;
padding-right: 0px;
height: 70px;
background-position: center center;
background-image: url(../images/Image%20Bas%20de%20Page/image%20bas%20de%20page%20.jpg);
}
div#footer {
background: #333333 none repeat scroll 0% 50%;
top: 0px;
padding-bottom: 2px;
margin-bottom: 0px;
color: white;
padding-top: 2px;
margin-top: 2px;
}
div#footer p {
margin: 0;
padding: 5px 10px;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-family: Arial;
font-size: 0.9em;
top: 0px;
}
div#container {
margin: 0 auto;
width: 800px;
background-color: transparent;
bottom: 0px;
padding-bottom: 0px;
padding-top: 0px;
top: 0px;
}
div#content {
float: right;
width: 560px;
color: white;
background-color: #515151;
font-size: 1em;
line-height: 1em;
font-weight: normal;
font-family: Times New Roman;
top: 0px;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 2px;
}
div#navigation {
float: left;
text-align: center;
text-decoration: none;
width: 240px;
height: 400px;
max-height: 400px;
}
div#extra {
clear: both;
width: 800px;
margin-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
padding-top: 40px;
margin-bottom: 0px;
}
.ImgDroiteVerticale {
border: 4px ridge black;
margin: 5px 15px 15px;
float: right;
position: static;
width: 150px;
max-width: 150px;
height: 200px;
max-height: 200px;
display: block;
font-size: 0.6em;
line-height: 1em;
color: black;
font-family: times new roman;
}
.ImgGaucheVerticale {
border: 4px ridge black;
margin: 5px 10px 15px -5px;
float: left;
padding-top: 0px;
width: 150px;
max-width: 150px;
height: 200px;
max-height: 200px;
position: static;
visibility: visible;
font-family: times new roman;
font-size: 0.6em;
line-height: 1em;
color: black;
display: block;
}
.cadreOcreVerticaleGaucheBas {
font-family: arial;
color: black;
font-weight: normal;
font-style: normal;
text-decoration: none;
visibility: visible;
top: 0px;
padding-bottom: 0px;
padding-left: 4px;
font-size: 1.2em;
padding-top: 166px;
}
.cadreOcreVerticaleDroiteHaut {
color: black;
padding-bottom: 0px;
top: 0px;
margin-top: 0px;
text-decoration: none;
font-style: normal;
visibility: visible;
font-family: Arial;
font-weight: normal;
font-size: 1.2em;
padding-top: 4px;
padding-left: 74px;
}
.ImgDroiteHorizontal {
border: 4px ridge black;
margin: 5px 15px 15px;
float: right;
position: static;
width: 200px;
max-width: 200px;
height: 150px;
max-height: 150px;
display: block;
font-family: times new roman;
line-height: 1em;
font-size: 0.6em;
color: black;
}
.ImgGaucheHorizontal {
border: 4px ridge black;
margin: 5px 10px 15px -5px;
float: left;
position: static;
width: 200px;
max-width: 200px;
height: 150px;
max-height: 150px;
color: black;
font-family: Times New Roman;
line-height: 1em;
padding-top: 0px;
padding-left: 0px;
left: 0px;
right: 0px;
text-align: right;
font-size: 0.6em;
display: block;
}
.cadreOcreHorizontalDroiteHaut {
font-family: arial;
text-decoration: none;
font-weight: normal;
font-style: normal;
color: black;
padding-top: 4px;
margin-top: 0px;
font-size: 1.2em;
padding-left: 124px;
}
.cadreOcreHorizontalGaucheBas {
font-family: Arial;
color: black;
text-decoration: none;
font-weight: normal;
font-style: normal;
font-size: 1.2em;
padding-top: 128px;
padding-left: 4px;
}
</style>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<style type="text/css">
.menu {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.menu a {
border-style: solid;
border-color: black;
border-width: 1px 3px 3px 1px;
display: block;
text-align: center;
text-decoration: none;
bottom: 0px;
right: 0px;
padding-bottom: 3px;
padding-left: 0px;
clear: both;
background-color: transparent;
margin-top: 3px;
padding-top: 4px;
top: 3px;
position: relative;
font-family: Script-R691;
font-size: 1.3em;
line-height: 1.4em;
font-weight: normal;
font-style: normal;
color: white;
left: 22px;
width: 186px;
}
.menu a:hover {
text-align: center;
background-color: #999999;
color: white;
}
.menu a:active {
border-style: solid;
border-color: black;
border-width: 3px 1px 1px 3px;
text-align: center;
background-color: white;
color: black;
}
</style>
<meta name="xfterrible"
content="HTML Tidy for Windows (vers 18 June 2009), ">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<style type="text/css">
#menu ul {
margin: 0px;
padding: 0px;
text-align: center;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#menu li {
border: 3px groove #33ccff;
margin: 0px -100px 0px 142px;
padding: 0px 0px 20px;
list-style-type: none;
float: left;
position: static;
clear: none;
left: 0px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-family: Balloon;
font-style: normal;
font-size: 1.1em;
color: black;
background-color: transparent;
top: 0px;
width: 110px;
right: 0px;
bottom: 0px;
line-height: 0.4em;
height: 6px;
}
#menu a:visited {
font-weight: bold;
text-align: center;
color: black;
background-color: transparent;
}
#menu a {
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
color: black;
background-color: transparent;
height: 20px;
}
#menu a:hover {
text-align: center;
color: white;
background-color: #999999;
height: 6px;
}
</style>
<meta content="Xavier alias Terrible45" name="author">
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(182, 182, 182); background-image: url(../images/Image%20de%20fond%20ecran.jpg);"
alink="#000099" link="#000099" vlink="#990099">
<div id="container">
<div id="header">
<h1 style="height: 150px; width: 800px;"></h1>
</div>
<div class="menuprincipal" style="" ="">
<a style="" target="_self" href="../index.html">Accueil </a>
<a target="_self" href="MesBricolagesIntro.html">Mes
Bricolages</a>
<a target="_self"
href="../MesReportages/MesReportagesIntro.html">Mes
Reportages</a><a target="_self"
href="../MesPhotos/MesPhotosIntro.html">Mes
Photos</a><a target="_self"
href="../MesL.S.HomeMade/MesL.S.HomeMadeIntro.html">Mes
L.S.Home Made</a></div>
<div id="wrapper">
<div style="" id="content">
<div class="titrechapitre"><br>
- A - les produits -<br>
</div>
<div class="soustitrechapitre"><br>
<big>Donc pour la réalisation d'un bain
fluidisé il faut :<br>
<br>
- Tube PMMA Diam. 60<br>
- Colle spécifique PMMA ou
Cyanoacrylate <br>
- Contre plaqué de 22
ép.<br>
- 1 joint torique de diam.60 ou +<br>
- 1 Pompe d'aquarium + accessoires<br>
- filtre à pollen
de 60 µ <br>
<br>
<br>
</big> J'ai dans un premier temps, du chercher le
produit qui allait me faire
la construction de mes flacons. Pour cela j'ai utilisé un
tube de PMMA que j'ai découpé en
troncon de 2 tailles différentes:<br>
<br>
<a
href="file:///E:/Mon%20Site%20Web%20de%20p%EAche/MesBricolages/ImagesgrandesBricolages/BainFluidise/Bain%20Fluidis%E9%20008.jpg"
rel="lightbox" title="bain fluidisé"><img
style="border: 0px solid ; width: 150px; height: 200px;"
alt="boite"
src="file:///E:/Mon%20Site%20Web%20de%20p%EAche/MesBricolages/ImagesminiaturesBricolages/BainFluidise/Bain%20Fluidis%E9%20008.jpg"></a><br>
<big><br>
</big></div>
</div>
</div>
<div id="navigation"><br>
<big style="color: rgb(102, 102, 102);"><big><big><span
style="text-decoration: underline; font-weight: bold;">Mon
bain fluidisé</span></big></big></big><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="extra">
<br>
<br>
<ul id="menu" style="">
<li> <a href="../LIENS.html" style=""
target="_blank">Liens
Utiles</a></li>
<li> <a target="_blank" style=""
href="http://www.i-services.net/membres/combox/combox.php?uid=151954&sid=98158&id=3514&iframe=non">ME
CONTACTER </a></li>
<li><a target="_blank"
href="http://www.i-services.net/membres/livredor/livredor.php?uid=151954&sid=98158"
style="color: yellow;"> Livre
d'Or</a></li>
</ul>
<p><strong></strong></p>
<strong></strong></div>
<div id="footer">
<p style="text-align: right;">Site
Réalisé par Xavier alias Terrible45
</p>
</div>
</div>
</body>
</html>
