28172 sujets

CSS et mise en forme, CSS3

Centrer l'image dans le <li>

Bonsoir,

J'ai une liste d'images, de largeur variable, à l'intérieur d'un carrousel sur mon site. La largeur des éléments <li> de cette liste est fixe. Je devrais donc pouvoir centrer mes images, qui sont des éléments de type en-ligne, en utilisant text-align: center. Mais cela ne fonctionne pas.

Le code HTML utilisé est plutôt basique :
<div class="jcarousel" id="carousel-comments">
	<ul>
		<li><a href="billet1">
			<img src="image1.jpg" style="display: inline;" height="240px" width="167px">
		</a></li>
		<li><a href="billet2">
			<img src="image2.jpg" style="display: inline;" height="240px" width="160px">
		</a></li>
		<li><a href="billet 3">
			<img src="image3.jpg" style="display: inline;" height="240px" width="163px">
		</a></li>
	</ul>
</div>


Le style="display: inline;" sur chaque img n'est pas de mon fait : il est ajouté automatiquement par le carrousel.

J'utilise le code CSS suivant :

#carousel-comments { position: relative; overflow: hidden; width: 760px; overflow: hidden; background-color: #9CC; margin-left: 38px; padding: 20px; }
	#carousel-comments ul { width: 20000em; position: relative; margin: 0; padding: 0; }
	#carousel-comments li { float: left; list-style: none; background: #FFF url(../img/loading.gif) 112px 112px no-repeat; width: 240px; height: 240px; overflow: hidden; margin: 0 20px 0 0; padding: 0; }
	#carousel-comments img { background-color: #FFF; text-align: center; }


Merci pour votre aide !
Modifié par Fix (31 Mar 2012 - 15:30)
Salut,

RIen ne sert de rajouter un display:inline sur un éléments déjà inline > img.
De plus tu cherches à donner une dimension à élément inline mais ce n'est pas possible, opte plutôt pour un display inline-block.
Fix a écrit :
Le style="display: inline;" sur chaque img n'est pas de mon fait : il est ajouté automatiquement par le carrousel.
Modérateur
Bonsoir,

Là je suis crevé et grippé, alors je n'ai pas toute ma tête, mais essaye plutôt en mettant le text-align:center aux li : #carousel-comments li {text-align:center}
a écrit :
Donc alors on ne fait rien? OK bon courage tchao.

Quel ton agréable ! Merci à toi ! Il ne s'agit pas de ne rien faire. Cet élément est juste indépendant de ma volonté. A quoi bon me reprendre là dessus, donc, alors que ça n'a pas de rapport avec la question qui plus est ?
Il y a des manières de dire les choses...

Tony Monast > Effectivement, ça fonctionne. Un grand merci !
Fix a écrit :
Il ne s'agit pas de ne rien faire. Cet élément est juste indépendant de ma volonté. A quoi bon me reprendre là dessus, donc, alors que ça n'a pas de rapport avec la question qui plus est ?


Ecoute, si tu t'es senti vexé, désolé. C'est donc qu'il faut vraiment mettre beaucoup de formes quand on te parle. Dans le code, il y a des éléments inline avec un display:inline et une dimension voilà tout.

http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html

Regarde l'article si tu as le temps, en tous les cas content de voir que ton problème est résolu. Smiley cligne
Modifié par jmlapam (29 Mar 2012 - 15:18)
Dans le genre têtu...

Je vais le dire plus clairement :
1. Je sais bien que <img> et un élément inline, et qu'il y a pourtant un display:inline sur chacune balise img, mais elle n'est pas de mon fait ! Autrement dit : je n'y peux rien.
2. Quel rapport avec la question ? C'était censé aider ?
Salut,

Tu prends la mouche rapidement mais si tu relis ce que j'ai écrit c'était juste une précision, cela arrive très souvent ici, on corrige des erreurs annexes. Ce n'est pas parce qu'un script est mal fait que tu ne peux pas intervenir dessus. Maintenant si tu préfères ne pas y toucher tu n'as pas forcément tort, mieux vaut éviter de buguer le tout.

Le rapport avec la question est que parfois pour centrer un éléments, on lui met un display:block, une dimension et un margin:0 auto

A++
Modifié par jmlapam (30 Mar 2012 - 13:20)
Bonjour,

Je rouvre ce post : en ajoutant display:center sur chaque <li>, les images sont bien centrées... sauf sans javaScript : elles se décalent en bas à gauche ! Le contenu du carrousel étant généré dynamiquement (chargé à partir d'un script php qui renvoie un fichier XML), j'utilise la balise <noscript> pour le cas où le javaScript serait désactivé.

Néanmoins, le code CSS utilisé pour la version javaScript s'applique aussi au contenu de cette balise noscript. Quant au code HTML, il est la copie de celui rendu par le jS (cité dans le message 1 de ce billet). Le rendu devrait donc, me semble-t-il, être normalement identique... ce qui n'est pourtant pas le cas, comme on peut le constater en désactivant javaScript sur cette page, pour le 3ème carrousel toujours (les images sous le titre "C'est vous qui le dites !").

Merci de votre aide !
Modérateur
Bonjour,

À première vue, ça vient du fichier style.css avec ton sélecteur #content img où tu donnes du padding et margin aux images. Toujours dans le même fichier, tout de suite après, tu redéfinis à zéro le margin, padding et border aux images pour #carousel-comments img, mais tu ne le fais pas aussi pour la version noscript.

Transfert ces ajustements dans le fichier jcarousel.css, tu pourras mieux t'y retrouver.
Modifié par Tony Monast (31 Mar 2012 - 16:16)
Modérateur
À ta place, j'étudierais la possibilité d'utiliser la même source HTML pour la version avec et sans Javascript. J'éviterais de dupliquer le code HTML avec noscript. En JS, tu peux ajouter ou retirer des class sur un élément HTML ce qui permet de définir ou redéfinir des styles selon que le Javascript est activé ou non.
Si je comprends bien ce que tu me dis, tu me conseilles de ne conserver qu'un seul code HTML... mais je ne pourrais alors faire autrement que de l'inclure dans ma balise noscript, pour le cas où jS est désactivé, me semble-t-il ? Donc comment rendre ce code utilisable même quand javaScript fonctionne ?
Sujet clos
Aller à