Alignement de div pour une galerie horizontale en CSS/JS

**will89** · 23/05/2008, 10h05

Bonjour tout le monde, j'ai un souci avec une galerie javascript (enfin vous inquiétez pas je suis dans la bonne rubrique). En fait mon problème vient de l'alignement de mes blocs div dans le conteneur qui se déplace grâce au javascript.

Bref, l'exemple sera plus clair que mes explications alors c'est par là : test_msr

Voilà et à titre informatif c'est censé ressembler à ça : exemple avec une frame mais il faut que j'enlève cette frame qui empêche tout référencement des articles.

Merci d'avance

**Er3van** · 23/05/2008, 10h27

Faut voir comment tu positionne ça aussi...

A mon avis le plus simple serait un positionnement en floattant, voire en absolu, mais ça dépend de ton conteneur.

Un bout de CSS avec les parties HTML associées ?

**frog43** · 23/05/2008, 10h43

En "float" certain navigateur (IE 6 pour ne pas le citer) n'affichera pas les images comme il faut ... Je pense qu'il faudrait préférer le positionnement absolue ...

**will89** · 23/05/2008, 11h07

Bon j'ai fini par y arriver, en utliisant un float: left; qui marche très bien sous tous les navigateurs !!! Je vous mets le lien, c'est toujours par là et le code CSS correspondant (pour la galerie uniquement pour le reste c'est dans un autre fichier):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
/* CSS Document */
#galleryContainer {
	height: 406px;	/* Height of the images + 2 */
	position: relative;
	overflow: hidden;
 
	/* CSS HACK */
	height: 408px;	/* IE 5.x - Added 2 pixels for border left and right */
	height/* */: /**/406px;	/* Other browsers */
	height: /**/406px;
}
 
#arrow_left {
	position: absolute;
	left: 0px;
	z-index: 10;
	cursor: pointer;
}
 
#arrow_right {
	position: absolute;
	right: 0px;
	z-index: 10;
	cursor: pointer;
}
 
#theImages {
	position: absolute;
	height: 404px;
	left: 38px;
	width: 3150px;
}
 
#theImages #slideEnd {
	float: left;
}
 
#theImages img {
	float: left;
	/*filter: alpha(opacity=50);*/
	/*opacity: 0.5;*/
}
 
#theImages .imageCaption {
	display: none;
}
 
.conteneurArticle {
  float: left;
  height: 406px;
  width: 210px;
  font-family: Tahoma;
	font-size: 11px;
	text-align: center;
}
 
.conteneurImage {
  width: 210px;
  height: 315px;
}
 
.conteneurImage img {
  width: 210px;
  height: 315px;
}
 
.conteneurModel {
  width: 210px;
  height: 37px;
  line-height: 37px;
  vertical-align: middle;
  background-image: url(images/background_bloc/fond_nom_vetement.gif);
  background-repeat: repeat-x;
	color: #F6F6F6;
}
 
.conteneurModel a:link, .conteneurModel a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF
}
 
.conteneurModel a:hover {
  text-decoration: underline;
}
 
.conteneurPrix {
  width: 210px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  background-color: #9B9B9B;
	color: #F6F6F6;
}
 
.conteneurPrix a:link, .conteneurPrix a:visited {
  font-weight: bold;
  text-decoration: underline;
  color: #5A5A5A
}
 
.conteneurPrix a:hover {
  color: #333333;
}
 
.conteneurMark {
  width: 210px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  background-color: #9B9B9B;
	color: #F6F6F6;
}
 
.conteneurMark a:link, .conteneurMark a:visited {
  text-decoration: underline;
  color: #5A5A5A
}
 
.conteneurMark a:hover {
  color: #333333;
}

Et maitenant le HTML que voici, enfin c'est plutôt le PHP qui génère mon HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<?php
require 'connect_MSR.php';
 
//  Gnération de la galerie d'image de la page
$tab_img = array (32,34,35,37,38,39,45,46,47,50,51,54,55,58,59);
 
$galerie = '';
foreach ($tab_img as $img)
{
    $prix_img        = $img + $img + $img;
    $galerie .= '<div class="conteneurArticle" id="a'.$img.'">';
    $galerie .= '<div class="conteneurImage" id="i'.$img.'"><a href="./marques.php" title="Test '.$img.'"><img src="img-collection/100'.$img.'-01-b.jpg" alt="Test '.$img.'" /></a></div>';
    $galerie .= '<div class="conteneurModel" id="mo'.$img.'"><a href="./marques.php" title="Test '.$img.'">Test '.$img.'</a></div>';
    $galerie .= '<div class="conteneurPrix" id="p'.$img.'"><a href="./marques.php" title="Test '.$img.'">'.$prix_img.' &euro;</a></div>';
    $galerie .= '<div class="conteneurMark" id="ma'.$img.'"><a href="./marques.php" title="Test '.$img.'">Maje</a></div>';
    $galerie .= '</div>';
}
?>
 
<!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="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title>MONSHOWROOM.COM - Vente en ligne de prêt-à-porter, accessoires et bijoux pour femme</title>
    <link href="./msr_style.css" rel="stylesheet" type="text/css" />
    <link href="./msr_slideshow.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="./msr_style_ie_correctifs.css" />
    <![endif]-->
    <!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="./msr_style_ie6_correctifs.css" />
    <![endif]-->
    <script type="text/javascript" src="js/image-slideshow.js"></script>
    <script type="text/javascript" src="./ieupdate.js"></script>
  </head>
 
  <body>
    <div id="bloc_site">
      <div id="bord_gauche"></div>
      <div id="bloc_contenu">
        <div id="bloc_top"><?php include "_top.php" ?></div>
        <div id="bloc_galerie">
          <div id="titre_galerie">
            <table width="890"><tr>
              <td id="g_left"><a href="./marques.php">Nouvelle collection</a> &gt; <a href="./marques.php">Maje</a> &gt; <a href="./marques.php">Robes</a> &gt; Rose</td>
              <td id="g_center"><h1>Maje</h1></td>
              <td id="g_right">
                <table><tr>
                  <td><a href="./marques.php">30 par page</a></td>
                  <td><img src="./images/element_bloc/fleche_pagi_grise-g.gif" alt="&lt;&lt;" /></td>
                  <td><select name="page" id="page">
                        <option value="0">page 01/05</option>
                        <option value="1">page 02/05</option>
                        <option value="2">page 03/05</option>
                        <option value="3">page 04/05</option>
                        <option value="4">page 05/05</option>
                      </select></td>
                  <td><a href="./marques.php"><img src="./images/element_bloc/fleche_pagi_rose-d.gif" alt="&gt;&gt;" /></a></td>
                </tr></table>
              </td>
            </tr></table>
          </div>
          <div id="menu_galerie">
            <div id="galerie_mg"></div>
            <div id="galerie_md"></div>
            <div id="galerie_mm">
              <ul>
                <li><img src="./images/element_bloc/critere_recherche.png" alt="Votre recherche" /></li>
                <li><a href="./marques.php"><img src="./images/element_bloc/bouton_marque.png" alt="Marque" /></a></li>
                <li><a href="./marques.php"><img src="./images/element_bloc/bouton_categorie.png" alt="Catégorie" /></a></li>
                <li><a href="./marques.php"><img src="./images/element_bloc/bouton_couleur.png" alt="Couleur" /></a></li>
                <li><a href="./marques.php"><img src="./images/element_bloc/bouton_prix.png" alt="Prix" /></a></li>
                <li><a href="./marques.php"><img src="./images/element_bloc/bouton_trier.png" alt="Options de tri" /></a></li>
                <li><a href="./marques.php"><img src="./images/element_bloc/bouton_recherche_avancee.png" alt="Recherche avancée" /></a></li>
              </ul>
            </div>
          </div>
          <div id="contenu_galerie">
            	<div id="galleryContainer">
            		<div id="arrow_left"><img src="./images/element_bloc/fleche_defilement_gauche.jpg" alt="Vers la gauche" /></div>
            		<div id="arrow_right"><img src="./images/element_bloc/fleche_defilement_droit.jpg" alt="Vers la droite" /></div>
            		<div id="theImages">
          				<?php echo $galerie ?>
          				<div id="slideEnd"></div>
            		</div>
            	</div>
          </div>
        </div>
        <div id="bloc_bottom"><?php include "_bottom.php" ?></div>
      </div>
      <div id="bord_droit"><?php include "_drapeau.php" ?></div>
    </div>
  </body>
</html>

Voilà il me reste un dernier problème au niveau de la barre de scrolling horizontale qu'il faut que je mette en dessous de la galerie ????

**frog43** · 23/05/2008, 11h22

Je viens d'aller voir, c'est nickel ...
Je comprend pas pourquoi tes float marche alors que sur un de mes sites il n'était pas compris par IE 6, j'avais du faire une erreur quelques part ....

Bonne continuation !

**will89** · 23/05/2008, 11h35

Merci du compliment...

Et ma fierté pour le coup, le site est valide XHTML 1.0 Strict et CSS 2.1. C'est la première fois que j'y arrive

Allez je m'y remets et a bientôt pour le prochain problème...

Alignement de div pour une galerie horizontale en CSS/JS

Positionnement en CSS

Discussions similaires

Partager

Partager