IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Décalage suite à un alignement vertical


Sujet :

Positionnement en CSS

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2011
    Messages : 55
    Points : 18
    Points
    18
    Par défaut Décalage suite à un alignement vertical
    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.

    J'ai donc modifié le code de ma page comme suit :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #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, Chrome 24 et IE 9) : 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 !

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Pour supprimer l'espacement sous une image, on conseille en général de mettre un vertical-align:bottom ou un display:block sur cette image. Cet espacement est expliqué dans la FAQ :
    http://css.developpez.com/faq/?page=autre#IMAGE_espacement

    Le tien se trouve au-dessus de ton image à cause de ton line-height de 240px. Donc le navigateur calcule l'interlignage de 240px + cet espacement. Tu peux bidouiller et réduire le line-height de 4px.

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2011
    Messages : 55
    Points : 18
    Points
    18
    Par défaut
    L'ajout d'un vertical-align:bottom ou d'un display:block sur mes images va à l'encontre de ce que je souhaite, puisqu'il empêche le centrage vertical (du moins avec la méthode que j'ai choisie).

    Ce que tu dis ensuite ne me semble absolument pas logique : ça signifie que, tant que j'utiliserai vertical-align: middle, il n'y aura pas moyen de centrer verticalement une image dans son conteneur sans qu'elle soit décalée de quelques pixels ? Je n'avais encore lu cela nulle part... Et pourquoi 4 pixels ? S'agit-il de 4 pixels sous tous les navigateurs ? Qui l'a décidé ???

    Que ce soit clair : je ne critique absolument pas ta réponse (je t'en remercie au contraire), mais je cherche seulement à comprendre...

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Les 4px en question sont en fonction de la taille de la font du paragraphe dans lequel sont les images.

    De plus, tu détournes déjà toi-même l'utilisation du vertical-align qui sert à aligner verticalement deux éléments inline l'un par rapport à l'autre, et non aligner verticalement un élément inline dans un élément block. Pour que le vertical-align se comporte comme tel, il faut que ton élément conteneur soit de type table-cell, donc qu'il ait un comportement similaire à celui d'une cellule de tableau.

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2011
    Messages : 55
    Points : 18
    Points
    18
    Par défaut
    Je n'avais pas conscience de détourner quoi que ce soit. Je n'ai fait que suivre un tutoriel trouvé sur le net.

    Je ne demande pas mieux qu'une autre méthode pour centrer correctement mes images... mais tout ce que j'ai pu trouver sur le net supposait de connaître la hauteur de l'image, ce qui n'est pas possible puisqu'elles ont des hauteurs différentes.

    Pour que le vertical-align se comporte comme tel, il faut que ton élément conteneur soit de type table-cell, donc qu'il ait un comportement similaire à celui d'une cellule de tableau.
    Ajouter li { display: table-cell; } changerait donc quelque chose ? J'ai essayé, mais rien n'y fait...

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2011
    Messages : 55
    Points : 18
    Points
    18
    Par défaut
    Les 4px en question sont en fonction de la taille de la font du paragraphe dans lequel sont les images.
    J'aimerais quand même résoudre mon problème : peut-on donc supposer que ces 4 px seront constants d'un navigateur à l'autre, et d'une résolution à l'autre, quel que soit l'agrandissement du texte choisi par l'utilisateur ?

    Autrement dit : puis-je remplacer, comme tu le suggérais, mon "line-height: 240px;" par "line-height: 236px;", et on n'en parle plus ???

  7. #7
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Le mieux reste le table-cell. Pour cela, il faut aussi mettre vertical-align:middle sur le li, supprimer le float:left et mettre une largeur au ul correspondant à la somme de la largeur des li.

  8. #8
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 51
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Citation Envoyé par FixSan Voir le message
    mais tout ce que j'ai pu trouver sur le net supposait de connaître la hauteur de l'image, ce qui n'est pas possible puisqu'elles ont des hauteurs différentes.
    Mais tu la connais, la hauteur de tes images : <img class="" width="225" height="240" ... > Tu pourrais, pour chaque image, ajouter un style en ligne en fonction de sa hauteur.

    Citation Envoyé par FixSan Voir le message
    J'aimerais quand même résoudre mon problème : peut-on donc supposer que ces 4 px seront constants d'un navigateur à l'autre, et d'une résolution à l'autre, quel que soit l'agrandissement du texte choisi par l'utilisateur ?

    Autrement dit : puis-je remplacer, comme tu le suggérais, mon "line-height: 240px;" par "line-height: 236px;", et on n'en parle plus ???
    Non, choisis "zoom text seul" dans le menu affichage > zoom de Firefox, puis ctrl+ et - et tu visualiseras la réponse.

    Un moyen simple pour centrer une image dans un conteneur, sans passer par un display table-celle est de passer par une image de fond.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  9. #9
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2011
    Messages : 55
    Points : 18
    Points
    18
    Par défaut
    Je suis désolé de répondre aussi tardivement.

    J'ai un peu de temps ce week-end, alors je voudrais m'y remettre.

    Citation Envoyé par Candygirl
    Mais tu la connais, la hauteur de tes images
    Je n'ai pas dit que je ne la connaissais pas : j'ai juste dit qu'elle n'était pas identique pour toutes les images
    Néanmoins, je ne comprends pas comment je peux utiliser cela dans le cadre de ma CSS.

    Citation Envoyé par Candygirl
    Tu pourrais, pour chaque image, ajouter un style en ligne en fonction de sa hauteur.
    Je ne comprends pas : pour chaque hauteur possible ? Il y en aurait trop... Mais c'est sans doute moi qui comprends mal. Pourrais-tu préciser un peu plus ta pensée ? Merci

    Citation Envoyé par Candygirl
    Un moyen simple pour centrer une image dans un conteneur, sans passer par un display table-celle est de passer par une image de fond.
    Un exemple quelque part ? Merci beaucoup !

  10. #10
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 51
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Tu peux commencer par tester la méthode du display:table-cell décrite par Bisûnûrs. Si tu veux assurer un rendu potable sur IE7-, tu devras ajouter un css spécifique par commentaires conditionnels. Cette méthode a l'avantage de laisser ton html vierge de tout ajout.

    Mes deux autres propositions supposaient que tu aies possibilité de modifier le php. Dans le premier cas, l'idée est de faire un css généraliste dans ta page css pour les images qui font 240 (la majorité quand même, à voir). genre:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    img {
      display:block;
      margin:0 auto;
      position:relative;
      top:50%;
      margin-top:-120px;
    }
    Et, dans ta page php, au moment de l'insertion des images, tu fais un test voir si leur hauteur est inférieur à 240. Si oui, alors tu rajoutes le margin négatif de la moitié de la hauteur dans la balise img, qui prendra le pas sur celui défini ds ton css pour les images de 240:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="/dotclear-files/public/images/jeunesse/2012/.fraise_s.jpg" alt="Fraise (Jean-Charles Sarrazin)" height="186" width="240" style="margin-top="-93px">

    L'avantage est que c'est compatible avec les vieux nav.

    Pour l'image de fond, cela implique aussi de définir un style en ligne via php (l'url de l'image de fond). Et tu peux la centrer avec un bête background-position:center.

    Soit tu l'attribues directement à ton lien, soit à l'image en jouant avec des padding et un heigth / width de 0 pour conserver un alt. Bref à voir comment tu souhaiterais gérer le problème de l'accessibilité avec cette option.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  11. #11
    Membre à l'essai
    Profil pro
    Inscrit en
    Avril 2011
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2011
    Messages : 55
    Points : 18
    Points
    18
    Par défaut
    Merci beaucoup pour cette réponse très détaillée.

    J'ai testé le display: table-cell selon la méthode indiquée plus haut par Bisûnûrs. L'ennui, c'est ça :
    Citation Envoyé par Bisûnûrs
    supprimer le float:left et mettre une largeur au ul correspondant à la somme de la largeur des li.
    Ça met le bazar dans mon carrousel d'images (géré en jS par jCarousel), dont la configuration CSS minimale (comme indiqué sur la page d'installation du script jCarousel) contient le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .jcarousel ul {
        width: 20000em;
        position: absolute;
        list-style: none;
        margin: 0;
        padding: 0;
    }
     
    .jcarousel li {
        float: left;
    }
    C'est dommage, parce que j'aurais préféré éviter de mélanger le style à mon code HTML.

    Je vais donc maintenant chercher à suivre l'une des deux autres méthodes que tu indiques, et reviendrai ici indiquer le résultat. Un grand merci et bon week-end !

Discussions similaires

  1. [DIV][CSS] Alignement vertical
    Par pmartin8 dans le forum Mise en page CSS
    Réponses: 15
    Dernier message: 02/11/2005, 15h50
  2. Réponses: 6
    Dernier message: 03/10/2005, 17h08
  3. CSS Alignement vertical pour images dynamiques
    Par bébé dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 17/09/2005, 16h43
  4. Alignement vertical au centre
    Par krfa1 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 29/08/2005, 23h23
  5. probleme d'alignement vertical
    Par mangamat dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 15/02/2005, 23h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo