28122 sujets

CSS et mise en forme, CSS3

Problème d'affichage d'une galerie d'image [Résolu]

Bonjour
J'ai trouvé une code me permettant d'afficher une galerie d'image.
Ci-joint le lien :
http://www.cssplay.co.uk/menu/lightbox2.html#portrait1

Je l'ai modifié pour n'afficher qu'une seule rubrique et non trois comme dans l'exemple.
Ci-dessous le code de la galerie d'image modifié :

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at  http://www.cssplay.co.uk/menu/lightbox2.html
 
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}

/* slides styling */

.photo {width:585px; text-align:left; position:relative;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:585px; height:auto; position:relative;}

.photo ul.topic li {display:block; width:585px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:585px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul 
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(lbox/close.gif) no-repeat right top; width:479px; padding:30px 33px; border:20px solid #aaa;}

.photo ul.topic li a:hover ul li, 
.photo ul.topic li:hover ul li 
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li a:hover ul li a, 
.photo ul.topic li:hover ul li a 
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li a:hover ul li a img, 
.photo ul.topic li:hover ul li a img 
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a img.large, 
.photo ul.topic li:hover ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

.photo ul.topic li a:hover ul li a:hover img.large, 
.photo ul.topic li:hover ul li a:hover img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}

.photo ul.topic li:hover ul li a:focus, 
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active 
{position:static;}

.photo ul.topic li:hover ul li a:focus img, 
.photo ul.topic li:hover ul li a:active img, 
.photo ul.topic li a:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0;}

.photo ul.topic li:hover ul li a:focus img.large, 
.photo ul.topic li:hover ul li a:active img.large, 
.photo ul.topic li a:hover ul li a:active img.large 
{position:absolute; left:15px; top:24px; width:500px; height:400px; padding:0; background:#000; border:4px solid #fff;}


</style>
</head>

<body>
<div class="photo">
<ul class="topic">
	<li>
	  <div align="center"><a class="set" href="#Portraits">Images
	    <!--[if gte IE 7]><!--></a><!--<![endif]-->
	    <!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
          <li><a href="#portrait1"><img src="lbox/portrait1a.jpg" alt="" title="" /><img class="large" src="lbox/portrait1.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait2"><img src="lbox/portrait2a.jpg" alt="" title="" /><img class="large" src="lbox/portrait2.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait3"><img src="lbox/portrait3a.jpg" alt="" title="" /><img class="large" src="lbox/portrait3.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
		  <li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
	    </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	  </div>
	</li>
  </ul>
<br class="clear" />
</div>
</body>
</html>


Pour le moment tout semble marcher il reste juste à insérer les photos.

Je souhaite insérer ce code dans une page de mon site internet, mais la galerie ne fonctionne plus je n'arrive plus à l'afficher.

Je joins la partie head puis le body d'une des pages de mon site (sans le code de la galerie pour soulager la lecture):

<html>
<head>
<title>Team R2P 4L Trophy 2009 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mm_spa.css" type="text/css" />
<style type="text/css">
<!--
.Style12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.Style13 {
	font-family: Arial, Helvetica, sans-serif;
	color: #981F1B;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<head>
<style type="text/css">
<!--
body {
	background-color: #9a322e;
	margin-left: auto;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	background-image: url(/Images/Fond%20site.gif);
	background-repeat: repeat-x;
}
body,td,th {
	font-family: Papyrus;
	font-size: 16px;
}
.Style1 {
	color: #FFFFFF;
	font-weight: bold;
}
.Style5 {
	color: #3E3E3E;
	font-weight: bold;
}
.Style8 {color: #3E3E3E; font-weight: bold; font-size: 12px; }
.Style9 {color: #3E3E3E}
.Style11 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
}
.Style14 {color: #981F1B}
-->
</style>
</p>

<body onLoad="MM_preloadImages('/Images/Textes/Accueil noir.gif','/Images/Textes/4L Trophy noir.gif','/Images/Textes/Team R2P noir.gif','/Images/Textes/Devenez noir.gif','/Images/Textes/Preparatifs noir.gif','/Images/Textes/Le Blog noir.gif','/Images/Textes/Extras noir.gif','/Images/Textes/Contact noir.gif','/Images/Textes/plus noir.gif')">
<table width="799" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#C1D9E6">
  
  <tr bgcolor="#E5CBB0">
    <td height="205" colspan="4" background="/Images/Fond site.gif" bgcolor="#981F1B" bgco lor="#e5cbb0"><img src="/Images/bandeau 800x200 bis.gif" width="800" height="205" longdesc="/Images/bandeau 800x200 bis.gif"></td>
  </tr>
  <tr bgcolor="#E5CBB0">
    <td height="8" colspan="4" bgcolor="#971C18" bgco lor="#e5cbb0"><img src="/Images/Fond menu 1.gif" width="800" height="8" align="top" longdesc="/Images/Fond menu 1.gif"></td>
  </tr>
  
  <tr bgcolor="#E5CBB0">
    <td height="43" colspan="4" background="/Images/Fond menu Preparatifs.gif" bgcolor="#680704" bgco lor="#e5cbb0"><a href="/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Accueil','','/Images/Textes/Accueil noir.gif',1)"><img src="/Images/Textes/Accueil gris.gif" name="Accueil" width="57" height="16" hspace="16" vspace="4" border="0"></a><a href="/4L Trophy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('4L Trophy','','/Images/Textes/4L Trophy noir.gif',1)"><img src="/Images/Textes/4L Trophy gris.gif" name="4L Trophy" width="87" height="20" hspace="8" border="0"></a><a href="/Team R2P.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Team R2P','','/Images/Textes/Team R2P noir.gif',1)"><img src="/Images/Textes/Team R2P gris.gif" name="Team R2P" width="84" height="16" hspace="8" vspace="4" border="0"></a><a href="/Devenez Partenaire.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Devenez Partenaire','','/Images/Textes/Devenez noir.gif',1)"><img src="/Images/Textes/Devenez gris.gif" name="Devenez Partenaire" width="148" height="16" hspace="8" vspace="4" border="0"></a><a href="/Preparatifs.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Preparatifs','','/Images/Textes/Preparatifs noir.gif',1)"><img src="/Images/Textes/Preparatif blanc.gif" name="Preparatifs" width="83" height="20" hspace="8" vspace="1" border="0"></a><a href="http://teamr2p.canalblog.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Le Blog','','/Images/Textes/Le Blog noir.gif',1)"><img src="/Images/Textes/Le blog gris.gif" name="Le Blog" width="67" height="18" hspace="8" vspace="3" border="0"></a><a href="/Extras.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Extras','','/Images/Textes/Extras noir.gif',1)"><img src="/Images/Textes/Extras gris.gif" name="Extras" width="52" height="15" hspace="8" vspace="5" border="0"></a><a href="/Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','/Images/Textes/Contact noir.gif',1)"><img src="/Images/Textes/Contact gris.gif" name="Contact" width="66" height="16" hspace="8" vspace="5" border="0"></a></td>
  </tr>
  <tr bgcolor="#E5CBB0">
    <td height="28" colspan="4" background="/Images/Fond menu 3 chassis.gif" bgcolor="#680704" bgco lor="#e5cbb0"><span class="Style11">&nbsp;&nbsp;&nbsp;&nbsp;<a href="/Preparatifs.html"><img src="/Images/Textes/General blanc.gif" border="0" width="55" height="13" vspace="4" align="absmiddle" longdesc="/Images/Textes/General blanc.gif"></a> &nbsp; &nbsp;<a href="/Preparatifs Chassis.html"><img src="/Images/Textes/Chassis blanc.gif" border="0" width="57" height="13" vspace="4" align="absmiddle" longdesc="/Images/Textes/Chassis blanc.gif"></a> &nbsp;&nbsp; <a href="/Preparatifs Liaison au sol.html"><img src="/Images/Textes/Liaison blanc.gif" border="0" width="98" height="13" vspace="4" align="absmiddle" longdesc="/Images/Textes/Liaison blanc.gif"></a> &nbsp; &nbsp;<a href="/Preparatifs Moteur.html"><img src="/Images/Textes/Moteur blanc.gif" border="0" width="159" height="13" vspace="4" align="absmiddle" longdesc="/Images/Textes/Moteur blanc.gif"></a> &nbsp;  &nbsp;<a href="/Preparatifs Caisse.html"><img src="/Images/Textes/Caisse blanc.gif" border="0" width="50" height="13" vspace="4" align="absmiddle" longdesc="/Images/Textes/Caisse blanc.gif"></a></span></td>
  </tr>
  
  <tr bgcolor="#FF9900">
    <td colspan="4" bgcolor="E5CBB0"></td>
  <tr>
    <th width="5" rowspan="2" valign="top" bgcolor="#c1d9e6" id="navborder2"><br /></th>
<td width="592" height="325" valign="top" bgcolor="#c1d9e6"><table border="0" cellspacing="0" cellpadding="0" width="585">
    <tr>
            <td width="585" background="/Images/En tete zone texte.gif" class="pageName">&nbsp;</td>
        </tr>
          <tr>
            <td bgcolor="#bdbdbd" class="pageName"><span class="Style5">&nbsp;&nbsp;<img src="/Images/Textes/Chassis gris 16.gif" width="61" height="16" vspace="4" align="absmiddle" longdesc="/Images/Textes/Chassis gris 16.gif"></span></td>
      </tr>
          <tr>
            <td height="25" bgcolor="c1d9e6" class="bodyText"><p align="justify" class="Style12"><br>
              Cette élément essentiel de la voiture a été entièrement revu. En effet, la rouille et les contraintes du désert, nécessite de renforcer la chassis de la 4L.</p>
            <p align="justify" class="Style12">Les points d'encrages ont été rigidifié, et des équerres ont été réalisées afin d'améliorer la soliditée de l'ensemble.</p>
            <p align="justify" class="Style12">Toutes les soudures ont été reprises, une fois de plus dans une optique de rigidité.</p>
            <p align="justify" class="Style12">Les longerons d'origine ont été supprimé. De nouveaux longerons réalisé sur mesure ont été installé. Ils devront faire face aux multiples chocs que rencontrera la 4L sur sa route.</p>
            <p align="justify" class="Style12">Nous tenons à remercier notre partenaire technique, Arnould Serrurerie, sans qui toutes ces améliorations n'auraient put voir le jour.</p></td>
          </tr>
          <tr>
            <td height="25" background="/Images/Ligne gris  fond bleu clair.gif" bgcolor="c1d9e6" class="bodyText">&nbsp;</td>
          </tr>
          <tr>
            <td height="25" bgcolor="c1d9e6" class="bodyText">
          [#]  [#red] [i]/le partie body de la galerie s'insert ici/[/i][/#]
            </td>
        </tr>
        </table>
      <p>&nbsp; </p>
       
      <p>&nbsp;</p>
      <p><br />
        &nbsp;<br />
      </p></td>
    <td width="5" valign="top" bgcolor="#98201D"><img src="/Images/contour texte 1.gif" width="5" height="25" longdesc="/Images/contour texte 1.gif"></td>
    <td width="201" valign="top" bgcolor="#981F1B"><img src="/Images/contour texte 2.gif" width="200" height="25" longdesc="/Images/contour texte 2.gif"><br />
<table border="0" cellspacing="0" cellpadding="0" width="200" bgcolor="#FFFFCC">
          <tr>
            <td height="35" colspan="3" align="center" background="/Images/Fond Sponsors.gif" bgcolor="#981F1B" class="columnHeader"><img src="/Images/Textes/Sponsors blanc.gif" width="118" height="22" longdesc="/Images/Textes/Sponsors blanc.gif"><br /></td>
        </tr>
          <tr>
            <td width="200" height="75" bgcolor="#e1e1e1"><script type="text/javascript">
AC_AX_RunContent( 'width','200','height','160','src','http://www.kizoa.fr/i-Contact/sflex.swf?fmode=5&did=137452&kc=5901491','type','application/x-shockwave-flash','wmode','transparent','movie','http://www.kizoa.fr/i-Contact/sflex.swf?fmode=5&did=137452&kc=5901491' ); //end AC code
</script><object width="200" height="160"><param name="movie" value="http://www.kizoa.fr/i-Contact/sflex.swf?fmode=5&did=137452&kc=5901491"></param><param name="wmode" value="transparent"></param><embed src="http://www.kizoa.fr/i-Contact/sflex.swf?fmode=5&did=137452&kc=5901491" type="application/x-shockwave-flash" wmode="transparent" width="200" height="160"></embed></object></td>
        </tr>
          <tr>
            <td height="25" background="/Images/Pied Sponsors.gif" bgcolor="#981F1B"><div align="right"><span class="Style8"><a href="/Nos Sponsors.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Nos Sponsors','','/Images/Textes/plus noir.gif',1)"><img src="/Images/Textes/Plus gris.gif" name="Nos Sponsors" width="26" height="16" border="0" align="absbottom"></a>&nbsp; </span></div></td>
        </tr>
          <tr>
            <td height="10" td bgcolor="#981F1B">&nbsp;</td>
          </tr>
          <tr>
            <td height="35" background="/Images/Fond Sponsors.gif" bgcolor="#981F1B"><div align="center" class="Style1"><img src="/Images/Textes/News blanc.gif" width="45" height="17" longdesc="/Images/Textes/News blanc.gif"></div></td>
          </tr>
          <tr>
            <td height="80" bgcolor="#E1E1E1">&nbsp;</td>
        </tr>
          <tr>
            <td height="25" background="/Images/Pied Sponsors.gif" bgcolor="#981F1B"><div align="right"><span class="Style8"><a href="http://teamr2p.canalblog.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('News','','/Images/Textes/plus noir.gif',1)"><img src="/Images/Textes/Plus gris.gif" name="News" width="26" height="16" border="0" align="absbottom"></a>&nbsp; </span></div></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#98201D"><div align="center"><img src="/Images/Fond sup pied page.gif" width="795" height="25" longdesc="/Images/Fond sup pied page.gif"></div></td>
  </tr>
  
  <tr>
    <td height="124" td colspan="4" valign="top" bgcolor="#c1d9e6" id="navborder"><p align="center">&nbsp;</p>
    <p><img src="/Images/desert pied de page bis.gif" width="800" height="124" longdesc="/Images/desert pied de page bis.gif"></p></td>
  </tr>
</table>
<p align="center"><span class="Style9">Copyright "Team R2P" 2008 tous droits   réservés</span></p>
<p>&nbsp;</p>
</body>



Désolé pour la lourdeur de mon message et mes maladresses pour la mise en forme je n'ai pas l'habitude de votre forum je suis nouveau.
Merci d'avance
Pierre[/i][/i][/i][/i][/i][/i]
Modifié par Calagan (17 Jul 2008 - 13:02)
Hello Pierre et bienvenue Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
Bonsoir
En reprenant l'ancienne version de mon site j'ai put remarquer qu'il manquait ceci au debut de mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Tout simplement
A Bientot
Sujet clos
Aller à