Liste d'images de taille différente

**tontonks** · 05/01/2013, 16h08

Bonjour à tous,

je souhaite afficher une liste / grille d'images de taille différentes.
Je souhaite rester dans une optique de "responsive design" afin de coller aux différentes résolutions possibles.

J'ai actuellement une liste comme ceci :

Code html :

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
<ul>
 
 
<li><img src="./images/LogoAcres.png" /></li>
<li><img src="images/LogoLesSaveursDeFrance.png" /></li>
<li><img src="images/LogoRenversant.bmp" /></li>
<li><img src="images/LogoChapelle.png" /></li>
<li><img src="images/LogoDebrancheenbranche.png" /></li>
<li><img src="images/LogoDreamsports.png" /></li>
<li><img src="images/LogoVandevelde.png" /></li>
<li><img src="images/LogoPater.png" /></li>
<li><img src="images/LogoRoland.png" /></li>
<li><img src="images/LogoClinivet.png" /></li>
<li><img src="images/LogoGaspard.png" /></li>
<li><img src="images/LogoMSDPose.png" /></li>
<li><img src="images/LogoArtmetal.png" /></li>
<li><img src="images/LogoLescuisinesavivre.png" /></li>
<li><img src="images/LogoCapmedical.png" /></li>
<li><img src="images/LogoVitrotech.png" /></li>
 
</ul>

et le css correspondant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
ul
{
	display:block;
	list-style: none;
}
li
{
text-align:center;
display:block;
float:left;
margin-top: 2em;
margin-right:2em;
}

mais le résultat ne me satisfait pas

Uploaded with ImageShack.us

quelqu'un a une idée à me suggérer pour éviter ce décalage ?

merci d'avance

**NoSmoking** · 05/01/2013, 19h13

Bonjour,

quelqu'un a une idée à me suggérer pour éviter ce décalage ?

il faudrait en dire plus ce décalage, j'ai du mal à voir le soucis

Peut être qu'un vertical-align bien senti mais bon....

**tontonks** · 06/01/2013, 11h49

Disons que je m'attendais à un retour à la ligne plutôt qu'à une espèce de superposition des images sur le côté gauche.
Le logo "Gaetan van de Velde", pourquoi ne s'affiche t'il pas à gauche ?

**malgache** · 06/01/2013, 13h31

Il faut définir un height par défaut à ton li qui doit prendre la valeur de la hauteur de ta plus grande image.
Ton image orange se place juste après la plus grande image de ta première ligne et ca te crée un décalage pour la suite

**Muchos** · 06/01/2013, 22h52

@all: en testant le code lié au problème, je ne constate pas du tout le même rendu.
Néanmoins, une solution a base de float me semble laborieuse. Ne serait-ce pas mieux avec display:inline-block? Ex:

Code html :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Images alignées</title>
	<style type="text/css">
ul {
        padding: 0;
        text-align: center;
}
li {
        display: inline-block;
        margin: 2em;
        vertical-align: middle;
}
/* Modifier toutes images impaires */
li:nth-child(odd) img { width: 75%; height: 75%; }
        </style>
</head>
<body>
	<ul>
		<li><img alt="dvp.com" src="http://www.developpez.net/template/images/logo.png" /></li>
		<li><img alt="dvp.com" src="http://www.developpez.net/template/images/logo.png" /></li>
		<li><img alt="dvp.com" src="http://www.developpez.net/template/images/logo.png" /></li>
		<li><img alt="dvp.com" src="http://www.developpez.net/template/images/logo.png" /></li>
		<li><img alt="dvp.com" src="http://www.developpez.net/template/images/logo.png" /></li>
		<li><img alt="dvp.com" src="http://www.developpez.net/template/images/logo.png" /></li>
	</ul>
</body>
</html>

**tontonks** · 07/01/2013, 19h23

Super, ça donne très bien.
C'est ce que je recherchais.

Merci !

Liste d'images de taille différente [CSS 3]

CSS

Discussions similaires

Partager

Partager