[résolu] Centrer deux images côte à côte dans leur conteneur <li>

Question

Pages :

Fix

18 May 2012 à 15:39

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 :

<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 :

#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 !
Modifié par Fix (19 May 2012 - 16:53)

Naemesis

18 May 2012 à 15:59

#carousel-escapages li.cover { text-align:center; }

Ne fonctionne pas ?

Fix

18 May 2012 à 16:04

Non, c'est sans aucun effet...

Gothor

18 May 2012 à 16:09

Bonjour,

Naemesis a écrit :

#carousel-escapages li.cover { text-align:center; }

et retirer le

#carousel-escapages li.cover a { float: left; }

peut-être ?

kustolovic

Modérateur

18 May 2012 à 16:14

Si si ça marche, lorsqu'on enlève les float: left placés à deux reprises sur les balises <a> (il y a aussi la classe "left" sur le premier lien), qui ne servent à rien sur des éléments inline, à part empêcher les alignements plus naturels…

Sinon, je remarque un cas aigu de ulite, qui consiste à utiliser des ul à tort et à travers pour structurer son document. Pour rappel ul est pour une liste non ordonnée d'éléments. Si on peut discuter de l'utilité pour une liste de livres limitée à deux éléments, ça reste une liste et l'utilité est acceptable.

Mais un livre n'est pas une liste. Date, niveau ou couverture ne sont, dans ce contexte, en aucun cas une liste.

Et tu viens d'inventer l'image de 120.66666666667px de largeur. Smiley cligne

Modifié par kustolovic (18 May 2012 - 16:16)

Naemesis

18 May 2012 à 16:15

Effectivement, ca fonctionne.

Jme disais bien que j'étais quand même pas mauvais au point de pas réussir à faire fonctionner un text-align:center
Modifié par Naemesis (18 May 2012 - 16:19)

Fix

18 May 2012 à 16:27

Ça fonctionne. L'ennui, c'est que si désormais on désactive les images, les textes des "alt" se superposent, et sont totalement illisibles. La taille des images est pourtant spécifiée "en dur" dans le code HTML : pourquoi le texte ne prend-il pas la "forme" des images, comme il le fait pour les autres images de ma page ?

Fix

18 May 2012 à 16:42

Je découvre les autres messages, que je n'avais pas vus : kustolovic, tu veux dire qu'une liste ne devrait contenir que des éléments de même nature ? C'est pour cela que, selon toi, "Date, niveau ou couverture ne sont, dans ce contexte, en aucun cas une liste" ?

Quel balisage proposerais-tu donc, qui me permettrait d'obtenir visuellement le même résultat ? Rajouter simplement des après la date et le niveau ? Ou autre chose ?

Merci pour tous ces avis ! Je sens bien que j'ai encore du travail Smiley cligne

PS : j'ai corrigé "l'image de 120.66666666667px de largeur".

kustolovic

Modérateur

18 May 2012 à 17:26

De simple divs font l'affaire. Ce qui te permet de pouvoir éventuellement les styler. De plus les classes sont assez explicatives de la nature du contenu (ce qui est un point positif^^).


<div id="carousel-escapages">
	<ul>
		<li>
			<h3>Mon super livre</h3>
			<div class="date">vendredi 25 mai 2012</div>
			<div class="niveau">CP/CE1</div>
			<div class="covers">
			  <a href="http://url_billet_1"><img src="url_image_1"></a>
			  <a href="http://url_billet_2"><img src="url_image_2"></a>
			</div>
		</li>
		
		etc.
	</ul>
</div>

Pour les alts, tu fais de l'hyperaccessibilité… tu en dis plus que ce qu'on voit sur les images. Genre sur une image ou moi je lis «la nuit des loups» le alt contient : «Guillaume, petit chevalier La nuit des loups-3 (de Didier Dufresne Illustrations de Didier Balicevic)» alors qu'il devrait contenir «la nuit des loups». Si ces informations supplémentaires sont nécessaires, alors il est domage qu'il faille désactiver les images pour pouvoir les lire!

Fix

18 May 2012 à 18:11

Voilà, j'ai repris ta structure, et j'ai stylé en conséquence.

Pour ce qui est du contenu des "alt", il n'est pas de mon ressort. Je vais néanmoins évouer ce problème à la bibliothécaire, qui rédige les billets du blog.

Il reste néanmoins 2 problèmes :

1. Étrangement, un petit trait noir apparaît en bas à gauche de chaque couverture (sous Firefox 12). Je pensais que c'était le texte du "alt" qui "dépassait" du lien, mais même un #carousel-escapages * { overflow: hidden; } ne donne rien !!! Ce trait noir disparaît lorsqu'on survole la couverture précédente...

2. Il reste toujours le problème du texte alternatif qui, si les images sont désactivées, est totalement illisible. 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 !

Fix

18 May 2012 à 18:51

Le (1) est résolu : il manquait un #carousel-escapages div.cover a { text-decoration: none; }

Quant au (2), j'aurais bien besoin d'aide...

Gothor

18 May 2012 à 19:01

Peux-tu montrer le css que tu as fait pour la nouvelle structure que tu utilises ? Ca pourrait aider à résoudre le problème. (Non, je suis pas faignant !)
Modifié par Gothor (18 May 2012 - 19:01)

Fix

18 May 2012 à 19:13

Oups, au temps pour moi !

Voici le code CSS utilisé (la structure est celle indiquée dans le message de kustolovic ci-dessus) :

#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; }

Modifié par Fix (18 May 2012 - 19:14)

Hermann

18 May 2012 à 22:41

Fix a écrit :

2. Il reste toujours le problème du texte alternatif qui, si les images sont désactivées, est totalement illisible. 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...

Bonsoir,
quelle version de FF utilises tu? Sur FF11 les alt sont tout à fait accessibles (bien qu'ils se suivent comme les images sont rendues en en-ligne). Par contre tu dois laisser un espace ou un retour chariot entre les 2 liens. Pour obtenir un retour à la ligne du 2ème alt, il faut attribuer un display:inline-block au lien.
Mais il ne faut pas trop t'attarder sur le bon rendu du alt. C'est au concepteurs de navigateurs (via les UAAG (guidelines d''accessibilité pour les agents utilisateurs)) de proposer une option pour faire en sorte que les alt s'affichent en entier; sachant que par exemple Safari et Chrome n'affichent rien du tout et qu'Opera tronque le contenu du alt (bien qu'il les rende accessibles grâce à un mode accessibilité). IE l'affiche très bien.

Tu as plusieurs problèmes:
> la balisage n'est pas pertinent (liste inutile, div au lieu de p ou Hn ...)
> l'alt est incomplet dans ton exemple : tu dois toujours compléter dans le cas d'une image lien par l'action avec ce schéma (alternative textuel - action du lien), il faut reproduite le contenu du alt pour le title). Actuellement on est obligé de cliquer avant de savoir que le lien pointe vers une page qui permet de donner son avis. Le plus simple serait d'ajouter un bouton "Votre avis"...
Il y a bien sûr plusieurs manières de procéder.
D'autre part, si l'information présente sur la couverture doit être accessible sans avoir à cliquer sur l'image, tout le contenu nécessaire doit être accessible idéalement via une légende placée sous l'image ou alors via une info-bulle (title de l'image ou info-bulle dynamique) sachant que cette dernière méthode sera moins largement accessible.

HS: pour des raisons de performance de rendu, mieux vaut réduire le nbre de sélecteurs intermédiaires dans tes règles de style et supprimer l'élément doté d'une class/id :

> #carousel-escapages div.cover a.first
> #carousel-escapages .cover a.first (mieux)
> #carousel-escapages a.first (mieux)
> #carousel-escapages .first (encore mieux)
> .first (meilleure solution)
Modifié par Hermann (19 May 2012 - 01:41)

Fix

19 May 2012 à 07:23

Hermann a écrit :
Bonsoir,
quelle version de FF utilises tu? Sur FF11 les alt sont tout à fait accessibles (bien qu'ils se suivent comme les images sont rendues en en-ligne). Par contre tu dois laisser un espace ou un retour chariot entre les 2 liens. Pour obtenir un retour à la ligne du 2ème alt, il faut attribuer un display:inline-block au lien.

J'utilise Firefox 12. Par contre, si j'ajoute un entre mes 2 liens, comment faire en sorte que mes 2 images restent l'une à côté de l'autre ? D'autre part, le "display:inline-block;" ne devrait-il pas être plutôt sur l'image ? Cela résoudrait, il me semble, mon problème. Néanmoins, lorsque les images sont désactivées, les textes alternatifs sont décalés l'un par rapport à l'autre ! Je ne comprends pas pourquoi (c'est toujours visible sur la même page)...

Hermann a écrit :
Tu as plusieurs problèmes:
> la balisage n'est pas pertinent (liste inutile, div au lieu de p ou Hn ...)

Tu parles bien du balisage actuel ? J'ai pourtant repris celui proposé par kustolovic ci-dessus... La liste n'est pas inutile : elle me permet de faire fonctionner le carrousel (jCarousel ne fonctionne que sur des listes). Et puis un <li> pour chaque animation, ça me semble logique, non ? Devrais-je remplacer mes <div> internes par des ? Mais pourquoi ?

Hermann a écrit :
> l'alt est incomplet dans ton exemple : tu dois toujours compléter dans le cas d'une image lien par l'action avec ce schéma (alternative textuel - action du lien), il faut reproduite le contenu du alt pour le title). Actuellement on est obligé de cliquer avant de savoir que le lien pointe vers une page qui permet de donner son avis.

C'était une erreur... que tu m'a permis de corriger Smiley cligne

Le #comment était de trop.

Hermann a écrit :
D'autre part, si l'information présente sur la couverture doit être accessible sans avoir à cliquer sur l'image, tout le contenu nécessaire doit être accessible idéalement via une légende placée sous l'image ou alors via une info-bulle (title de l'image ou info-bulle dynamique) sachant que cette dernière méthode sera moins largement accessible.

Firefox m'affiche bien une info-bulle sur chaque livre. J'avais pris soin d'ajouter un title sur le lien. J'ai encore faux ? C'est sur l'image que j'aurais dû l'ajouter ?

Hermann a écrit :
HS: pour des raisons de performance de rendu, mieux vaut réduire le nbre de sélecteurs intermédiaires dans tes règles de style et supprimer l'élément doté d'une class/id :

Excellent conseil. Merci. Je m'en vais revoir ma feuille de style... Il y a du travail en perspective Smiley cligne

Modifié par Fix (19 May 2012 - 07:24)

Hermann

19 May 2012 à 09:47

Fix a écrit :

entre mes 2 liens, comment faire en sorte que mes 2 images restent l'une à côté de l'autre ?

En de rendant pas le br (en lui attribuant un display:none), celui-ci n'aura donc aucun effet si CSS activé mais permettra d'afficher les alt l'un sous l'autre si CSS est désactivé (avec le contenu linéarisé donc).
L'autre solution est d'imbriquer tes lien image dans un p.

Fix a écrit :

D'autre part, le "display:inline-block;" ne devrait-il pas être plutôt sur l'image ?

Oui pardon sur l'image je voulais dire.

Fix a écrit :
Néanmoins, lorsque les images sont désactivées, les textes alternatifs sont décalés l'un par rapport à l'autre ! Je ne comprends pas pourquoi (c'est toujours visible sur la même page)...

Pour aligner les images verticalement une fois désactivées, tu dois leur attribuer un vertical-align: top pour éviter que l'alignement se fasse sur la ligne de base du bloc de texte du alt (l'alignement par défaut étant baseline).

Fix a écrit :

Tu parles bien du balisage actuel ? J'ai pourtant repris celui proposé par kustolovic ci-dessus... La liste n'est pas inutile : elle me permet de faire fonctionner le carrousel (jCarousel ne fonctionne que sur des listes). Et puis un <li> pour chaque animation, ça me semble logique, non ? Devrais-je remplacer mes <div> internes par des ? Mais pourquoi ?

J'ai été un peu excessif, tu peux conserver le li (même si pour ma part je réserve les li aux contenus plus courts..
En revanche, les div sont seulement des divisions de grands bloc et ne permettent pas de caractériser son leur contenu.
Le VENDREDI 25 MAI 2012 devrait être un H3 et le CP/CE1 un h4 puisqu'ils introduisent un contenu.

Fix a écrit :

Firefox m'affiche bien une info-bulle sur chaque livre. J'avais pris soin d'ajouter un title sur le lien. J'ai encore faux ? C'est sur l'image que j'aurais dû l'ajouter ?

Le title sur l'image et sur le lien n'ont pas le même rôle, sur l'image un title sert de métadonnés
(pour ajouter une info manquante non présente autour de l'image quand celle-ci est affichée) alors que sur le lien il sert à apporter une info supplémentaire (non présente dans l'intitulé du lien) sur le contenu de la cible du lien.
Étant donné que le title n'est pas accessible en accès clavier sans passer par une bidouille,
il est préférable d'afficher les infos de la couverture dans une légende sous l'mage.

Fix a écrit :

Excellent conseil. Merci. Je m'en vais revoir ma feuille de style... Il y a du travail en perspective

Je te conseil de lire cet article : https://developer.mozilla.org/Fr/%C3%89criture_de_CSS_efficace
Modifié par Hermann (19 May 2012 - 09:50)

Fix

19 May 2012 à 10:33

Un très grand merci pour toute ton aide ! Je viens d'appliquer tout ça à ma page.

Pour ce qui est du br, je ne sais jamais si c'est (avec espace) ou (sans espace avant le "/").

Hermann a écrit :
il est préférable d'afficher les infos de la couverture dans une légende sous l'mage.

Y a-t-il une balise particulière prévue pour cela ? (Il me semblait avoir vu quelque chose dans les articles d'alsacreations... mais je me demande si ce n'était pas seulement pour HTML5). Ça ne me semble pas évident a priori : peut-être en ajoutant simplement les deux titres des livres l'un sous l'autre, sous les images ?

Une dernière chose : les miniatures (images des couvertures) sont en réalité plus grandes qu'elles n'apparaissent à l'écran. En effet, j'ai volontairement divisé leur taille par 1,5 en spécifiant un width et un height "en dur" dans le code HTML de l'image. Cela aura-t-il bien l'effet escompté sous TOUTS les navigateurs ? Ou faudrait-il spécifier aussi ces tailles en css ?
Modifié par Fix (19 May 2012 - 10:34)

Hermann

19 May 2012 à 11:03

Fix a écrit :

Pour ce qui est du br, je ne sais jamais si c'est (avec espace) ou (sans espace avant le "/").

Toujours ajouter un espace avant le slash quel que soit l'élément.

Fix a écrit :

Y a-t-il une balise particulière prévue pour cela ? (Il me semblait avoir vu quelque chose dans les articles d'alsacreations... mais je me demande si ce n'était pas seulement pour HTML5). Ça ne me semble pas évident a priori : peut-être en ajoutant simplement les deux titres des livres l'un sous l'autre, sous les images ?

Effectivement en HTML4 rien n'existe pour caractériser des légendes d'image (en HTML5 c'est figcaption). Non ce sont des titre au sens HTML mais de simples paragraphes ( donc) puisqu'ils n'introduisent rien.

Fix a écrit :

Une dernière chose : les miniatures (images des couvertures) sont en réalité plus grandes qu'elles n'apparaissent à l'écran. En effet, j'ai volontairement divisé leur taille par 1,5 en spécifiant un width et un height "en dur" dans le code HTML de l'image. Cela aura-t-il bien l'effet escompté sous TOUTS les navigateurs ? Ou faudrait-il spécifier aussi ces tailles en css ?

Non mais il faut éviter le redimensionnement en HTML, d'autant plus qu'ici le poids de l'image est plus lourd que ce qu'il devrait être. D'autre part il vaut mieux privilégier le format PNG8 que je JPEG pour ce type d'images.
Modifié par Hermann (19 May 2012 - 11:04)

kustolovic

Modérateur

19 May 2012 à 11:24

Hermann a écrit :
Non mais il faut éviter le redimensionnement en HTML, d'autant plus qu'ici le poids de l'image est plus lourd que ce qu'il devrait être. D'autre part il vaut mieux privilégier le format PNG8 que je JPEG pour ce type d'images.

Oui contre le redimensionnement surtout qu'il ne sert à rien ici. Par contre sur tes images, le png8 aura un meilleur résultat que sur la dernière, à vu de nez. Donc le jpeg va très bien aussi. À cette taille en tout cas les deux se valent, choisis en un et garde-le.

Hermann a écrit :
les div sont seulement des divisions de grands bloc et ne permettent pas de caractériser son leur contenu.

Pas vraiment, les divs sont pour tout ou rien. Cette déclaration ne tient qu'à toi mais n'est pas définie par le w3c. on aurait pu aussi user de span. Les h pourquoi pas, mais ça dépend si l'on voit la date en tant que metadonnée ou d'introduction de contenu.

fix a écrit :
Pour ce qui est du br, je ne sais jamais si c'est (avec espace) ou (sans espace avant le "/").

Officiellement tu peux faire sans espace. L'espace existe pour des raisons de rétrocompatibilité avec les (désormais très très) vieux navigateurs qui ne comprennaient pas le xhtml. En gros provoquait une erreur d'interprétation et pas. Voilà pour l'histoire ^^!

a écrit :
Y a-t-il une balise particulière prévue pour cela ? (Il me semblait avoir vu quelque chose dans les articles d'alsacreations... mais je me demande si ce n'était pas seulement pour HTML5). Ça ne me semble pas évident a priori : peut-être en ajoutant simplement les deux titres des livres l'un sous l'autre, sous les images ?

Effectivement, comme dit par Hermann. Mais avec des classes appropriées tu peux ajouter de la sémantique.

Fix

19 May 2012 à 11:33

kustolovic a écrit :
Oui contre le redimensionnement surtout qu'il ne sert à rien ici.

Bah si : si je ne redimensionne pas les images, elles sont tout simplement trop grandes pour être côte à côte ! Je vais voir si je peux créer une taille de miniature supplémentaire.

kustolovic a écrit :
Effectivement, comme dit par Hermann. Mais avec des classes appropriées tu peux ajouter de la sémantique.

L'idéal serait donc, si je combine ta proposition et celle d'Hermann, d'utiliser des paragraphes avec des classes précises, c'est bien cela ?
Donc quelque chose comme :

<p class="titre">Titre du livre 1</p>
<p class="titre">Titre du livre 2</p>

J'ai bon ?

Merci beaucoup à tous les 2 pour votre aide ! Tout ça me fait dire que je vais avoir du code à revoir ailleurs également sur le site Smiley cligne

Modifié par Fix (19 May 2012 - 11:35)

Pages :

Sujet clos

CSS et mise en forme, CSS3

[résolu] Centrer deux images côte à côte dans leur conteneur <li>