problème de placement d'une galerie par kilik2049 - page 1

Salut les zéros! J'ai un petit souci concernant une galerie en javascript. A savoir que ce n'est pas mon code, mais quelqu'un qui me l'a fait, car je ne maitrise pas le JS.
En fait, le script affiche les miniatures des photos, et lorsque l'on clique sur la photo, l'image s'affiche en taille réelle. Jusque là tout va bien. Mais c'est dans le placement des miniatures qu'il y a un problème. Normalement, les miniatures s'affichent 3x3, mais je voulais les mettrent 4x4, ayant 8 photos. La première rangée de 4 s'affiche bien, mais après, ça bug.
La miniature 5 s'affiche à la place de la miniature 8, et les miniatures 5 6 et 7 s'affichent sur une 3ème rangée. J'ai fait un screen pour plus de clarté.

Voici maintenant les codes:

Le JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Diaph-Images, la photographie on-line</title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	   	   <meta name="author" content="">
	   <meta name="keywords" content=""/>
	   <meta name="Description" content=""/>
	   <meta name="robots" content="index"/>
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
	   <link rel="icon" type="image/png" href="favicon.ico" />
       <style type="text/css">
        form, .pages
        {
            text-align:center;
        }
 a
{
	color:white
	}
        </style>
        <script language="JavaScript1.2"> 
function l_image(a,txt) { 
document.images["photo"].src=a;
document.getElementById("titre_photo").innerHTML=txt;
} 
</script>

    </head>
    <body>
 <?php
 include("banniere.jpg");
 ?>
 <?php
 include("menu.php");
 ?>
 <p align="center">
Acheter le lot de 96 cartes (12x8) &agrave; 96 euros.
<form name="_xclick" target="paypal" action="" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="lot de cartes de condoléances">
<input type="hidden" name="amount" value="80">
<input type="image" src="http://www.paypal.com/fr_XC/i/btn/sc-but-01.gif" border="0" name="submit" alt="Effectuez vos paiements via PayPal : une solution rapide, gratuite et sécurisée">
<input type="hidden" name="add" value="1">
</form></p>
 <div id="corps">
<div id="galerie">
	<ul id="galerie_mini">
	<li><a href="#" onclick="l_image('images/CONDOLEANCES001.jpg','Carte 1')" title="Carte 1">
	<img src="thumbs/CONDOLEANCES001.jpg" border="0" style="margin: 5px"></a></li>
	<li><a href="#" onclick="l_image('images/CONDOLEANCES002.jpg','Carte 2')" title="Carte 2">
	<img src="thumbs/CONDOLEANCES002.jpg" border="0" style="margin: 5px"></a></li>
	<li><a href="#" onclick="l_image('images/CONDOLEANCES003.jpg','Carte 3')" title="Carte 3">
	<img src="thumbs/CONDOLEANCES003.jpg" border="0" style="margin: 5px"></a></li>
    <li><a href="#" onclick="l_image('images/CONDOLEANCES004.jpg','Carte 4')" title="Carte 4">
	<img src="thumbs/CONDOLEANCES004.jpg" border="0" style="margin: 5px"></a></li>
	<li><a href="#" onclick="l_image('images/CONDOLEANCES005.jpg','Carte 5')" title="Carte 5">
	<img src="thumbs/CONDOLEANCES005.jpg" border="0" style="margin: 5px"></a></li>
	<li><a href="#" onclick="l_image('images/CONDOLEANCES006.jpg','Carte 6')" title="Carte 6">
	<img src="thumbs/CONDOLEANCES006.jpg" border="0" style="margin: 5px"></a></li>
	<li><a href="#" onclick="l_image('images/CONDOLEANCES007.jpg','Carte 7')" title="Carte 7">
	<img src="thumbs/CONDOLEANCES007.jpg" border="0" style="margin: 5px"></a></li>
	<li><a href="#" onclick="l_image('images/CONDOLEANCES008.jpg','Carte 8')" title="Carte 8">
	<img src="thumbs/CONDOLEANCES008.jpg" border="0" style="margin: 5px" /></a></li>
	</ul>

	
	<dl id="photo">
		
		<div id="titre_photo" style="font: italic 2.5em/1.5em Georgia, serif ; 	color: #dcb ;">Cliquez sur les miniatures pour les afficher</div>
		<dd><img id="big_pict"  name="photo" /></dd>
	</dl>
</div>
</div>
 <?php
 include("pied_de_page.php");
 ?> 
 </body>
</html>

le CSS

/*design galerie */

div#galerie
{
	position: relative;
    left: 25%;
	width: 420px ;
	padding: 10px ;
	margin: 15px 3px ;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}

dl#photo dd
{
	margin: 0 ;
	position: relative;
right: 50%;
}

Merci d'avance les zéros (et les moins zéros

)

EDIT: Bon, en enlevant le padding de ul#galerie_mini, les miniatures reviennent en 3x3, je pense que j'approche et que le problème vient du CSS et pas du JS. Si un gentil modo passe par là, pourrait-il déplacer le sujet?

problème de placement d'une galerie

problème de placement d'une galerie

Supprimer

Modérer

Signaler le message aux modérateurs