Problème de placement en javascript

kilik2049 -  
M@dien Messages postés 437 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour tout le monde. J'ai fait une petite galerie en JS, mais tout ne se passe pas comme je le veux :p
J'ai en effet a afficher 8 miniatures de photos, par groupe de 4, et lorsque l'on clique sur l'une, s'affiche l'image en taille réelle.
Ma première rangée de miniatures affiche bien les 4 premières, mais sur la seconde, je n'ai que la 8èeme, au bout à sa place, et els images 5 6 7 sur une troisième rangée au dessous.

Voici les deux 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="Nom Prenom">   
    <meta name="keywords" content=""/>   
    <meta name="Description" content="Le site de Jean-Pierre Souchu, photographe au Mans"/>   
    <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) à 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="https://www.paypalobjects.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 correspondant:   

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



(Informations personnelles supprimées, Modération CCM)
Merci d'avance!

1 réponse

Réponse 1 / 1
M@dien Messages postés 437 Date d'inscription   Statut Membre Dernière intervention   74
 
Bonjour,

Je ne vois pas de problème à première vue, comme je n'avais pas d'image j'ai figé la taille des images de la galerie_mini, et ça c'est bien affiché, sur firefox 3.5.2, IE8 et opera9.64.

quelles sont les tailles des images que tu utilises pour les thumbs?
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Les meilleurs places bercy / accor hotel arena
sisi -
baladur13 -

8 réponses
Placement PARIS BERCY
virgin76 -
Thordendall -

1 réponse
arobase disparu du clavier
internic2 -
Zenkiaw -

50 réponses
Place de concert numéroté, peut on aller dans la fosse ?
chinois59490 -
Radinoz -

8 réponses