Discussion :

[Nikoalas]

Bonjour,

Je suis tout content, j'arrive à mettre mes miniatures photos dans un div et ça fait joli mais bon, ce n'est pas encore ça. Quand la miniature est plus petite que le div, ça me laisse voir le fond, ce ne serait pas bien grave si j'arrivais à centrer l'image mais, s'il est facile de procéder au centrage horizontal, je n'arrive pas à centre la photo verticalement (pour les cas où elle est plus large que haute). Voici le code css que j'ai écrit pour le div en question :

Code :

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

1
2
3
4
5
6
7
#gallery pic
{
	float: left;
	height: 200px;
	width: 200px;
	border: 1px solid black;
}

J'ai trouvé quelques exemples avec la position "absolute" mais ce n'est pas bon pour centrer verticalement à l'intérieur d'un div, si vous pouviez me venir en aide afin d'avoir une présentation plus correcte, je vous en serai reconnaissant.

Nicolas.

[onirisme]

Bonjour, je ne sais pas si ça fonctionne sous IE mais c'est bon sous firefox

Dans la page HTML :

Code :

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

1
2
3
4
 
<div id="imgBlock"><!--Déclaration d'une div qui contient l'image-->
        <img id="img" src="img/stylesheet.png" /><!--Déclaration de l'ID de l'image.-->
        </div>

Ensuite, la partie CSS :

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
 
#imgBlock{
    height :200px ;/*Hauteur et largeur de la div*/
    width : 200px ;
    background-color : #CC3300 ;/*Juste pour vérifier*/
 
    }
 
#img{    
    position: relative;/*Position relative à la div "imgBlock"*/
     left: 50%; /*Centrage horizontal*/
     top: 50%;
     width: 128px;/*Taille de l'image. Facultatif mais utile pour avoir des images
                   de la même taille*/
     height: 128px;
     margin-top: -64px; /* moitié de la hauteur */
     margin-left: -64px; /* moitié de la largeur */
 
     }

Résultat :
Voilà...
Steve

[Maxoo]

Mais je sais pas si Nikoalas à des images à tailles fixes ...

[Nikoalas]

Mais je sais pas si Nikoalas à des images à tailles fixes ...

Touché ! Les images ne sont pas en taille fixe, elles sont redimensionnées pour faire au maximum 200px sur la longueur mais la longueur peut être verticale (ce qui n'est pas un problème puisque le centrage horizontal fonctionne) mais la longueur peut aussi être horizontale là, mon image va se placer en haut du div laissant un espace blanc en dessous et c'est assez peu harmonieux.

Merci tout de même pour l'idée... et si y en a d'autres, je suis preneur.

[onirisme]

Dans ce cas essaye d'utiliser :
display: table-cell;

Exemple qui marche chez moi sous FF :
CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.contener {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 300px;
    height: 300px;
    background-color : #CC3300 ;
    margin-right : 0px;
}

HTML

Code :

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

1
2
 
<div class="contener"><img src="pomme.jpg" alt="Image2"></div>

Le résultat : http://onirisme.free.fr/dvp/imageCentree/
A priori je ne vois pas d'autre solution si ce n'est d'utiliser directement des tableaux...
Steve

[Nikoalas]

Merci, le résultat semble super, c'est exactement ce que je cherchais à faire sauf que, sauf que chez moi ça ne donne pas le même résultat du fait que j'utilise un "float: left;" pour caser mes div sur la gauche...

Je précise que je n'ai pas trouvé l'utilité du margin-right: 0px; donc je l'ai supprimé, ai-je eu tort de le faire ? Je l'ai fait parce que je ne voyais pas de différence.

Je vais essayer de trouver mais toute aide est la bienvenue.

Je mets les deux blocs CSS que je fais :

Code CSS :

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
#gallery
{
	height: 606px;
	width: 606px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	border: 2px solid black;
	padding: 5px;
}
 
#gallery pic
{
	float: left;
        width: 200px;
        height: 200px;
}
 
.center
{
	display: table-cell;
        vertical-align: middle;
	text-align: center;
        width: 200px;
        height: 200px;
	border: 1px solid black;
}

Code HTML :

Code :

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

1
2
3
4
5
6
<div id="gallery">
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
</div>

Le problème n'en est pas un quand le nombre de photo est inférieur à 4 mais dès qu'il atteint quatre, on voit le problème. Avant je mettais mes photos dans les "<pic></pic>" ce qui faisait que je pouvais avoir 9 photos bien disposées mais pas centrée dans le div... et maintenant qu'elles sont centrées, je ne sais pas comment les mettre à l'intérieur du <pic>.

En espérant avoir été clair,
Nicolas.

[onirisme]

Bonjour et bon début de semaine...

Il faut que tu ajoutes deux paramètres dans ton css :
float : left ; Qui va permettre l'alignement horizontal et vertical
margin : valpx ; Facultatif pour un espacement entre les cadres

Pour un alignement en 4 x Xphotos voici le code

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="gallery">
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
</div>

CSS :

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
 
#gallery{
	height: 820px;
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	border: 2px solid black;
	padding: 5px;
}
 
 
.center{
	display: table-cell;
        vertical-align: middle;
	text-align: center;
        width: 200px;
        height: 200px;
	border: 1px solid black;
	float: left;/*alignement + retour à la ligne*/
	margin : 1px;/*Espacement des "table-cell"*/
}

Tu corrigeras de toi même les valeurs de #gallery et .center. Tu avez trouvé de toi même il fallait juste utiliser ton float de #gallery pic dans dans ton .center

le code épuré...

Code :

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

1
2
3
4
5
6
7
8
9
 
<img class="center" src="cuba2.jpg">
<img class="center" src="cuba.jpg">
<img class="center" src="cuba2.jpg">
<img class="center" src="cuba.jpg">
<img class="center" src="cuba2.jpg">
<img class="center" src="cuba.jpg">
<img class="center" src="cuba2.jpg">
<img class="center" src="cuba.jpg">

Tu auras le même résultat

Steve

[Nikoalas]

Bonjour, merci pour l'aide mais je suis embêtant et il y a toujours un problème, alors j'expose les choses que j'ai tenté :

Code HTML :

Code :

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

1
2
<img class="center" src="cuba2.jpg">
<div class="center"><img src="cuba.jpg"></div>

Dans le premier cas où la classe "center" est encapsulée dans l'image, l'image se déforme pour prendre les dimensions 200px par 200px.


Dans le deuxième cas, quand je fais le <div class="center"> j'ai deux résultats différents en fonction de ce que je mets dans le CSS.

Tentative 1 sans le float :

Code :

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

1
2
3
4
5
6
7
8
9
.center{
	display: table-cell;
        vertical-align: middle;
	text-align: center;
        width: 200px;
        height: 200px;
	border: 1px solid black;
	margin : 1px;
}

Tout se passe correctement si j'ai moins de trois images (la taille d'une rangée) mais si je dépasse, logiquement, il y a un problème, il faut donc utiliser le float.

Tentative 2 avec le float :

Code :

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

1
2
3
4
5
6
7
8
9
10
.center{
	display: table-cell;
        vertical-align: middle;
	text-align: center;
        width: 200px;
        height: 200px;
	border: 1px solid black;
	float: left;
	margin : 1px;
}

Rien à redire au niveau de l'alignement des images, c'est au niveau du centrage que ça bloque, si le centrage horizontal se fait bien, le centrage vertical ne se fait plus et j'en reviens à mon point de départ...

Si tu avais une autre idée onirisme, je t'avoue que je t'en serai très reconnaissant. Je ne suis pas expérimenté en CSS et du coup, je n'ai aucune idée de comment faire (dans le pire des cas, ça peut rester comme ça vu que c'est pour mon site perso mais bon...).

[onirisme]

Bonjour,

Il me faudrait le code source de ta page.
Y a t'il d'autres elements. Combien as tu de miniatures? Quelle est la taille du corps de ton document?

Sur quel navigateur travail tu, IE ou FF ou autre ?

Je vois ça dans la matinée.

[Maxoo]

Il est clair qu'il faut que tu te poses cette question : je destine cette page à quel navigateur ?

SI Firefox : c'est possible facilement,
SI IE : c'est moins facile
SI les deux : c'est encore moins facile.

[Nikoalas]

Dans l'idéal, j'aimerais que ça soit visible sous les deux explorateurs mais si ce n'est visible que sous Firefox, tant pis pour les autres ! J'utilise Firefox et je ne suis pas fan de IE... donc je me fiche de IE mais il faut juste que ça soit regardable même si c'est moche...

Le code source de ma page ? Je ne vois pas ce qu'il faut de plus, avec le CSS (gallery + center) on a les deux parties qui m'intéressent et les images sont en fait des miniatures que j'ai remplacé temporairement par des 2 images pour les tests (les deux images etant des rectangles avec leur coté le plus grand à 200px, une est "verticale" et l'autre est "horizontale").

J'ai beaucoup de miniatures mais j'utilise une pagination qui me permet de me limiter à 9 miniatures par page. La taille du corps est de 100%. Il y a deux autres éléments dans la page avec un logo et un menu mais ils sont "au-dessus" et n'influence pas la galerie.

Si tu veux vraiment le code source de toute la page, je le mets ici dès que je l'ai à disposition.

[onirisme]

Compliqué

Pour moi le plus simple, c'est que tu le fasses sous forme de tableau, tu n'auras aucun problèmes normalement : LIEN

CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.contener {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background-color : #CC3300 ;
 
}
#content {
    width : 750px ;
    margin : auto ;
}

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
 
<div id="content">
    <table>
    <tr>
    <td><div class="contener"><img src="img/pic1.jpg" alt="Image1"/></div></td>
    <td><div class="contener"><img src="img/pic2.jpg" alt="Image1"/></div></td>
    <td><div class="contener"><img src="img/pic3.jpg" alt="Image1"/></div></td>
    </tr>
    <tr>
    <td><div class="contener"><img src="img/pic4.jpg" alt="Image1"/></div></td>
    <td><div class="contener"><img src="img/pic5.jpg" alt="Image1"/></div></td>
    <td><div class="contener"><img src="img/pic6.jpg" alt="Image1"/></div></td>
    <tr>
    <td><div class="contener"><img src="img/pic1.jpg" alt="Image1"/></div></td>
    <td><div class="contener"><img src="img/pic2.jpg" alt="Image1"/></div></td>
    <td><div class="contener"><img src="img/pic3.jpg" alt="Image1"/></div></td>
    </tr>
    </table>
    </div>

Le float: left enlève toute la mise en page lié à l'attribut display:table-cell.
Donc, les tableaux, c'est bien

[Bisûnûrs]

@onirisme : Dans ce cas-là tu peux enlever tous tes div dans les td et tu mets

Code :

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

vertical-align: middle;

aux td.

[onirisme]

Je sais mais je désespère pas de trouver une autre solution alors je laisse les div pour éviter de les retaper +tard.

[Bisûnûrs]

Dans ce cas-là on peut faire comme ça :

Code html :

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

1
2
3
<div class="truc">
   <img src="url" />
</div>

Code :

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

1
2
3
4
.truc{
   padding:50px 0;
   text-align:center;
}

[onirisme]

Malheureusement non. Les vignettes n'ont pas toutes la même taille
Elles sont disposées dans des div de 200*200 et ça ne fonctionne donc pas.
Alignement vertical+horizontal

[Nikoalas]

Tu avais déjà mentionné les tableaux et je ne savais pas comment faire, j'ai vu le résultat, c'est exactement ce que je veux faire MAIS... je suis un peu embêté par les balises <tr></tr>. Je pense que c'est vraiment très simple en faisant deux boucles "for" avec trois itérations à chaque fois plutôt que de faire une boucle for avec 9 itérations mais j'attends de pouvoir l'essayer faire (ce week end) avant de marquer résolu.

ps : les boucles for, c'est juste par rapport à ma façon d'appeler les 9 images en php... et c'était à "cause" de cette structure que j'avais voulu faire les div comme ça.

[onirisme]

J'avais même pas fait attention à ça, j'avais omis que ta gallerie était générée avec php.

Il faut donc générer ta gallerie sous forme de tableau. c'est beucoup plus simple

Exemple : (juste pour expliquer les <tr>)

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
 
$nbcol = 3 ; /*nb de colonnes max */
$nbligne = 3 ; /*nb de lignes max*/
 
/*********TON CODE QUI GENERE TA GALERIE************/
-............................
-............................
 if ($nbpics != 0) { 
    echo '<table>'; 
    for ($i=0; $i<$nbpics; $i++){ 
       if($i%$nbcol==0) echo '<tr>'; /*Si il y a une miniature on cré le <tr> */
 
     echo '<td><a href="pics/' , $tableau[$i] , '"><img src="mini/' , $tableau[$i] , '" alt="Image" /></a></td>'; 
     if($i%$nbcol==($nbcol-1)) echo '</tr>'; /*Si on atteint le nb de colonne on cré le </tr>*/
   } 
   echo '</table>';  
}

Code à personaliser et completer pour créer les pages suivantes

Donc, les tableaux c'est bien.