28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur la page d'accueil du site de la médiathèque de mon village, sous la catégorie "C'est vous qui le dites !", se trouvent des images (couvertures de livres) que je souhaiterais aligner verticalement.

En suivant le tutoriel "Comment centrer verticalement sur tous les navigateurs ?", j'ai modifié le code de ma page comme suit :
<div id="carousel-comments">
	<ul>
		<li>
			<a href="url_livre_1"><img src="url_miniature_1" alt="livre_1" height="186" width="240"></a>
		</li>
<li>
			<a href="url_livre_2"><img src="url_miniature_2" alt="livre_2" height="240" width="225"></a>
		</li>
		etc, etc, etc.
	</ul>
</div>

#carousel-comments { width: 760px; }
	#carousel-comments li { text-align: center; background-color: #FFF; width: 240px; height: 240px; line-height: 240px; margin-right: 20px; }
	#carousel-comments img { background-color: #FFF; padding: 0; margin: 0; border: 0; vertical-align: middle; }

Le problème est le suivant (testé sous Firefox 19.0.2) : l'ajout du "vertical-align: middle;" sur l'image entraîne un décalage de l'image vers le bas de quelques pixels (on peut par exemple comparer avec cette page où le vertical-align n'a pas été appliqué).
Je ne m'explique pas ce décalage, et je ne parviens pas à le supprimer. Tout se passe comme si le bloc conteneur était plus grand de quelques pixels.... J'ai pourtant bien un conteneur (<li>) d'une hauteur de 240 pixels, pour une image d'une hauteur maxi de 240 pixels aussi...

Quelqu'un pourrait-il m'aider ? D'avance, merci !
Modifié par Fix (12 Mar 2013 - 14:17)
Yop,

il y a un inexplicable style="display: inline;" sur tes images (regarde les avec Firebug). En mettant

element.style {
    display: block;
    margin: 0 auto;
}



à la place, ça a l'air de marche parfaitement.

J'espère que ça t'aidera.

++
Nico
Bizarre en effet. Ça a l'air d'être ajouté par jQuery (?!)

Par contre je ne parviens pas à appliquer ta modif... Ça ne serait pas "margin: auto 0;" plutôt que "margin: 0 auto;" ? Mais à appliquer sur quel sélecteur ?
Bon, après quelques tests (je voulais en avoir le cœur net), c'est effectivement jQuery qui m'ajoute ce "display: inline" sur mes images. J'ai ceci dans mon code javaScript :
$('<img/>')
			.load(function() { img.removeAttr('class').attr({src: data.src, width: data.width, height: data.height}).hide().fadeIn(); })
			.attr('src', data.src);

Si je retire le ".hide().fadeIn()" de mon code jS, alors je n'ai plus ce style ajouté à mes images (la preuve).
Mais ceci ne change rien à mon problème de décalage (on peut constater qu'il est toujours présent sur ma page)...

Une idée ? Merci de votre aide !
Modifié par Fix (12 Mar 2013 - 16:27)
Je viens de tester sous Chrome et IE9 : on peut constater le même décalage que sous Firefox.