probleme mise en page galerie photos par getdown - page 1

bonjour,

mon site est bientot terminer mais malheureusement ma galerie me pose probleme. en effet sur IE elle marche tre bien tandis que sous Firefox il y a un ecarte tre important entre l'image afficher en grand et les images afficher en petit en dessous.
je ne comprends pas puisque tout a l'heure ca marchait

voici mon adresse : http://getdown.goldzoneweb.info/

voici mon code de la page index :

<?php
if (isset($_POST['password']) && ($_POST['password']) == "13janvier")
{
setcookie('authentification', $_POST['password']);
}
elseif (isset($_COOKIE['authentification']))
{
$_POST['password']=$_COOKIE['authentification'];
}
?>

<!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" lang="fr">

<head>
<title>Bienvenue sur le blog de G3tDoWn !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css"> @import url(design/css/styles.css) ; </style>

<script type="text/javascript">
ejs_code_nb = 0;
function ejs_code_clavier(keyStroke)
{
ejs_code_code = "getdown";
ejs_code_eventChooser = (window.Event) ? keyStroke.which : event.keyCode;
ejs_code_which = String.fromCharCode(ejs_code_eventChooser).toLowerCase();
if(ejs_code_code.charAt(ejs_code_nb) == ejs_code_which)
ejs_code_nb++;
else
ejs_code_nb=0;
if(ejs_code_nb == ejs_code_code.length)
{
// METTEZ ICI L'ACTION DE VOTRE CHOIX
document.getElementById('authentification').style.display='block';
ejs_code_nb = 0;
}
}
document.onkeypress = ejs_code_clavier;
</script>
</head>

<body>

<div id="body_div">

<?php

if (!isset($_POST['password']) OR ($_POST['password']) != "13janvier")
{
?>
<div id="authentification" style="display:none">
<form method="post" action="index.php"><p>Mot de passe : <input type="password" name="password" value=""/><input type="submit" value="Valider"/></p></form>
</div>
<?php
}

if (isset($_POST['password']) AND $_POST['password'] == "13janvier")
{
?>
<div id="menu_haut">
<ul>
<li><a href="index.php?page=accueil">Retour a l'accueil</a></li>
<li><a href="index.php?page=creer_page">Créer une page</a></li>
<li><a href="index.php?page=modif_page">Modifier une page</a></li>
<li><a href="index.php?page=rediger_news">Rediger une news</a></li>
<li><a href="index.php?page=liste_news">Liste des news</a></li>
<li><a href="index.php?page=liste_commentaires">Liste des commentaires</a></li>
</ul>
</div>
<?php
}
?>

<div id="col_gauche">
<?php
include ('fiche_perso.php');
?> </div>


<div id="col_droite">
<div class="cadres_droite">
<h3>Frequentation...</h3>
<?php
$monfichier = fopen('compteur/compteur.txt', 'r+');

$pages_vues = fgets($monfichier); // On lit la première ligne (nombre de pages vues)
$pages_vues++; // On augmente de 1 ce nombre de pages vues
fseek($monfichier, 0); // On remet le curseur au début du fichier
fputs($monfichier, $pages_vues); // On écrit le nouveau nombre de pages vues

fclose($monfichier);

echo '<p>Pages visitées : ' . $pages_vues . '</p>';
?>
</div>

<?php include('menu.php'); ?>

</div>

<?php
//AFFICHAGE DES NEWS

//connection a la BDD
include ('admin/config_db.php');
mysql_connect($home, $login, $password);
mysql_select_db($base);

if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
switch($page)
{
case 'accueil' : include('news.php'); break;
case 'liste_news' : include('admin/liste_news.php'); break;
case 'rediger_news' : include('admin/rediger_news.php'); break;
case 'commentaires' : include('admin/commentaires.php'); break;
case 'liste_commentaires' : include('admin/liste_commentaires.php'); break;
case 'modif_page' : include('admin/admin_page.php'); break;
case 'creer_page' : include('admin/admin_page.php'); break;
case 'galeries' : include('galeries/galeries.php'); break;
case 'contact/form' : include ('contact/form.htm'); break;
case 'contact/formmail' : include ('contact/formmail.php'); break;
}

//deconnection de la BDD
mysql_close();

include ('pied_de_page.htm');
?>

</div>

</body>

</html>

celui de ma page galerie incluse a l'interieur de l'index :

<div class="global">
<?php
if (isset($_GET['album']))
echo '<h2>'.$_GET['album'].'</h2>';
{
if (isset($_GET['image']))
{
$image = $_GET['image'];
$nomimage = preg_replace('`(.+)\..*`', '$1', $image);
}

?><div id="photos"><?php
if (isset ($image))
{
echo ' <h2>'.$nomimage.'</h2>
<img src="galeries/photos/' . $_GET['album'] . '/' . $_GET['image'] . '" alt="'.$nomimage.'" title="'.$nomimage.'" />';
}
?></div><?php

$dir = 'galeries/photos/'.$_GET['album'].'/*.{JPG,JPEG,GIF,PNG,jpg,jpeg,gif,png}';
$files = glob($dir,GLOB_BRACE);

?><div id="miniatures_pel"><?php
foreach($files as $image)
{

$image = preg_replace('`galeries/photos/'.$_GET['album'].'/(.+)`','$1',$image);
$nomimage = preg_replace('`(.+)\..*`', '$1', $image);

echo '<div class="miniatures"><a href="index.php?page=galeries&album='. $_GET['album'] .'&image='.$image.'"><img src="galeries/photos/'. $_GET['album'] .'/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></a><br/>'.$nomimage.'</div>';
}
?></div><?php
}
?>
</div>

et voici mon css :

body {
padding : 0;
margin : 15px 0 15px;
}

#body_div {
font-family : trebuchet ms, verdana, sans sherif ;
font-size : 0.7em ;
width : 950px ;
margin : 0 auto ;
padding : 0 ;
}

h1 {
font-size : medium ;
text-align : center ;
padding : 0 ;
margin : 0 170px 10px ;
text-align : center ;
background : url(../images/haut.png) ;
border-bottom : 1px solid #5885e1 ;
}

h2 {
font-size : small;
padding : 0 ;
margin : 0;
padding-left : 10px;
text-align : center ;
background : url(../images/haut.png) ;
border-bottom : 1px solid #5885e1 ;
}

h3 {
font-size : x-small;
padding : 0 ;
padding-left : 10px;
margin : 0 ;
text-align : left ;
background : url(../images/haut.png) ;
border-bottom : 1px solid #5885e1 ;
}

ul, li {
margin : 0 10px ;
padding : 0 ;
list-style-type: none;
}

/*En-tete*/
#header {
width : 100% ;
text-align : center ;
margin : 10px auto ;
}

#header img {
width : 100% ;
height : 180px ;
}

/* Menu de navigation rapide en haut */
#menu_haut {
text-align : right ;
margin : 0 0 15px ;
padding : 0 ;
background : url(../images/haut.png) ;
border : 1px solid #5885e1 ;
height : 1.5em ;
}

#menu_haut li {
display : inline ;
margin : 0 ;
padding : 0 20px ;
border-left-width : 1px ;
border-left-style : solid ;
border-left-color : grey ;
}

#menu_haut a {
text-decoration : none ;
color : #000 ;
}

/*Colonne de gauche contenant le menu, le compteur...*/
#col_gauche {
float : left ;
width : 160px;
padding : 0 ;
margin : 0 ;
}

/*Presentation des cadres contenus dans la colonne de gauche.*/
.menu_gauche {
padding : 0 ;
margin : 0 ;
background : #f4f8fd ;
border : 1px solid #5885e1 ;
margin : 0 0 15px 0 ;
width : 100%;
}

.menu_gauche h3 {
margin: 0 0 3px ;
}

.menu_gauche dt {
border-bottom-width : 1px ;
border-bottom-style : solid ;
border-bottom-color : grey ;
padding : 5px 10px ;
}

.menu_gauche dd {
padding : 2px 10px ;
}

.menu_gauche a {
color : #000 ;
text-decoration : none ;
}

.menu_gauche img {
width : 150px;
padding : 5px;
margin : auto;
text-align : center ;
}

/*Colonne de droite contenant l'espace membre, la musique...*/
#col_droite {
float : right ;
width : 130px;
padding : 0 ;
margin : 0 ;
}

#col_droite a {
text-decoration : none ;
color : #000 ;
}

#col_droite p {
text-align : center ;
}

/*Presentation des cadres contenus dans la colonne de droite*/
.cadres_droite {
border : 1px solid #5885e1 ;
margin : 0 0 15px ;
padding : 0 0 2px ;
background : #f4f8fd ;
}

.cadres_droite span {
font-weight : bold ;
}

.cadres_droite li, ul, p {
margin : 0 2px ;
}

/*Formulaires*/
form {
padding : 0 ;
text-align : center ;
margin : 10px auto ;
}

form input {
margin : 0;
}

.global {
margin : 0 160px 15px 190px !important;
margin : 0 155px 15px 185px ;
border : 1px solid #5885e1 ;
padding : 0 ;
width : 600px;
}

.global li {
list-style-type: square;
list-style-position : inside;
margin : 15px;
}

.global th, td {
margin : 0 ;
padding : 5px 15px ;
}

.global p {
margin : 10px ;
}

.global span {
text-decoration : underline ;
}

.global h2 {
margin : 0 0 10px ;
}

.global a {
color : #000;
}

/*Pied de page*/
#pied_de_page {
clear : both ;
text-align : center ;
padding : 5px ;
margin-top : 20px ;
border-top : 2px solid #5885e1 ;
}

#pied_de_page img {
border : none ;
padding : 0 ;
margin : 5px;
height : 30px ;
}

#photos {
text-align: center;
height : auto !important;
height : 455px;
margin : 0 ;
padding : 0;
}

#photos img {
max-width : 580px;
height : 440px;
border : 1px solid #5885e1 ;
margin : 0 auto 15px;
}

#photos h2 {
background : none ;
border : none ;
}

#miniatures_pel {
display : block;
overflow : auto;
clear : both;
height : 125px;
padding : 0;
margin : 0;
}

.miniatures {
float : left;
text-align: center;
padding : 0;
margin : 0;
}

.miniatures img {
height: 100px;
width : 100px;
padding : 0;
margin : 0 5px;
border : 1px solid #5885e1 ;
}

.center {
text-align : center;
}

merci de votre aide !

getdown

16 septembre 2006 à 0:16:19