Discussion :

[FixSan]

Bonjour,

Sur cette page, à l'endroit intitulé "Escapages", on peut voir des images de couvertures de livres, placées côte à côte, 2 par 2. Ces images se trouvent dans un conteneur <li>. Le code HTML est donc le suivant :

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
<div id="carousel-escapages">
	<ul>
		<li>
			<ul>
				<li class="date">vendredi 25 mai 2012</li>
				<li class="niveau">CP/CE1</li>
				<li class="cover">
					<a class="black-links left" href="http://url_billet_1">
						<img src="url_image_1">
					</a>
					<a class="black-links left" href="http://url_billet_2">
						<img src="url_image_2">
					</a>
				</li>
			</ul>
		</li>
		<li>
			<ul>
				<li class="date">vendredi 01 juin 2012</li>
				<li class="niveau">petite section/moyenne section</li>
				<li class="cover">
					<a class="black-links left" href="http://url_billet_3">
						<img src="url_image_3">
					</a>
					<a class="black-links left" href="http://url_billet_4">
						<img src="url_image_4">
					</a>
				</li>
			</ul>
		</li>
		etc...
	</ul>
</div>

Le code CSS correspondant est :

Code :

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

1
2
3
4
5
6
7
8
9
10
#carousel-escapages li { width: 410px; float: left; list-style: none; margin: 0; padding: 0; }
	#carousel-escapages ul li ul li { float: none; text-align: center; padding: 8px 0; }
	#carousel-escapages ul li.jcarousel-item-last ul li { margin-left: 1px; border-left: 1px solid #FFF; }
	#carousel-escapages ul li.jcarousel-item-first ul li { border-left: 0; }
	#carousel-escapages li.date { font-weight: bold; text-transform: uppercase; font-size: 1.1em; background-color: #FFF; }
	#carousel-escapages li.niveau { border-bottom: 1px solid #FFF; }
	#carousel-escapages li.cover { overflow: hidden; display: block; clear: both; }
	#carousel-escapages li.cover a { float: left; }
	#carousel-escapages li.cover img { margin: 0; }
	#carousel-escapages li.cover a.left img { margin-right: 20px; }

Je souhaiterais que mes deux images se trouvent centrées par rapport à la colonne dans laquelle elles se trouvent (donc par rapport à leur conteneur), mais je n'y parviens pas.

Quelqu'un peut-il m'aider à parvenir à ce résultat ? Merci d'avance !

[FixSan]

C'est en partie résolu...

Pour ne pas multiplier les listes inutilement, j'ai modifié la structure :

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
<div id="carousel-escapages">
	<ul>
		<li>
			<div class="date">vendredi 25 mai 2012</li>
			<div class="niveau">CP/CE1</li>
			<div class="cover">
				<a class="black-links first" href="http://url_billet_1">
					<img src="url_image_1">
				</a>
				<a class="black-links" href="http://url_billet_2">
					<img src="url_image_2">
				</a>
			</div>
		</li>
		<li>
			<div class="date">vendredi 01 juin 2012</li>
			<div class="niveau">petite section/moyenne section</li>
			<div class="cover">
				<a class="black-links first" href="http://url_billet_3">
					<img src="url_image_3">
				</a>
				<a class="black-links" href="http://url_billet_4">
					<img src="url_image_4">
				</a>
			</div>
		</li>
		etc...
	</ul>
</div>

Le code CSS correspondant est donc désormais le suivant :

Code :

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

1
2
3
4
5
6
7
#carousel-escapages li { width: 410px; list-style: none; margin: 0; padding: 0; }
	#carousel-escapages ul li div { float: none; text-align: center; padding: 8px 0; }
	#carousel-escapages div.date { font-weight: bold; text-transform: uppercase; font-size: 1.1em; background-color: #FFF; }
	#carousel-escapages div.niveau { border-bottom: 1px solid #FFF; }
	#carousel-escapages div.cover a { text-decoration: none; }
		#carousel-escapages div.cover a.first { margin-right: 20px; }
	#carousel-escapages div.cover img { margin: 0; }

Il reste néanmoins un problème : si les images sont désactivées, le texte alternatif ("alt" des images) est tout simplement illisible. En effet, au lieu d'occuper exactement la place de l'image, il se met "en ligne", de sorte que les textes alternatifs des différentes images se chevauchent...

Ne faudrait-il pas un "display: block" sur les images ? Cela résout le problème, mais alors les images passent naturellement les unes SOUS les autres, du coup il faudrait un "float: left" sur la première... Et je retombe dans mon problème du message numéro 1...

Merci de votre aide !

[Invité]

Bonjour,
display: inline-block; devrait résoudre ce problème.

[FixSan]

Bonsoir,

J'ai ajouté un display: inline-block; sur #carousel-escapages div.cover img... mais, étrangement, cela décale les textes alternatifs les uns par rapport aux autres lorsque les images sont désactivées (c'est toujours visible ici)...

[FixSan]

Il fallait simplement un vertical-align: top; sur les images.

Bon week-end à tous !