Alignement vertical d'une image et d'un texte dans une liste

[supunna]

Salut à toutes et tous !

Bon, mon problème est simple, mais je bute sur sa résolution depuis des heures
J'ai une liste tout ce qu'il y a de plus ordinaire, où chaque élément <li> contient du texte. Certains éléments <li> contiennent en plus une image.
Je souhaite que cette image et le texte (qui fait plusieurs lignes) soient alignés verticalement — au milieu de l'image, en l'occurrence.

Voilà… Je n'y arrive pas. J'ai mis l'image en float:left, vertical-align:middle, rien n'y fait :mad:

Une idée ?…

Merci !

 

[miz_ici]

Utilises des PADDING et MARGIN

ex: style="padding:0 0 0 0; margin:0 0 0 0"

 

[supunna]

J'ai pas dû bien comprendre, car cela ne résout pas mon souci&#8230; ou je me suis mal exprimé dans ma question.

Quand je mets mon image en vertical-align:middle; tout est presque OK sauf que mon texte fait plusieurs lignes : la 1ère ligne est bien aligné au milieu, mais les autres lignes sont au-dessous de l'image :heu:

Quand j'ajoute à l'image un float:left; toutes les lignes du texte sont bien alignées à gauche de l'image, mais elles sont alors en haut de l'image, pas au milieu :mad:

 

[miz_ici]

Ben, gardes ton float et ajoute un padding sur ton image

 

[supunna]

Oui, oui, dans le doute j'avais quand même essayé ta réponse. J'avais ajouté le margin et le padding… mais ça ne change rien.
Merci…

 

[miz_ici]

Mais tu as essayé avec un padding: 10px 0 0 0; ?

 

[da capo]

edit :erreur


edit #2 : vertical-align utilise la ligne de base comme repère (sauf dans un tableau). Voilà pourquoi ça ne marche pas.

 

[supunna]

Padding 0 ou 10, ça ne modifie rien

Bon, c'est bien sympa de m'expliquer que vertical-align ne peut pas fonctionner&#8230; mais avez-vous une idée de ce qui pourrait marcher ?

Voilà mon code (j'ai mis exprès le ccs dans le code html pour vous simplifier la lecture

<ul>
<li>texte bla vla bla bla</li>
<li>texte bla vla bla </li>
<li>texte bla vla bla bla</li>
<li><img src="../../images/CD/Sensation.JPG" width="113" height="99" style="vertical-align:middle; margin:0 0 0 0; padding:10 0 0 0; float:left;" />texte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla bla</li>
<li style="clear:left;">texte bla vla bla bla</li>
</ul>

merci&#8230;

 

[grumff]

Tu peux toujours utiliser un tableau.

 

[supunna]

Arrf… le retour du tableau… bien sûr. Mais j'aurais souhaité tout faire en css. Il y a certainement une solution !!
Merci quand même

 

[supunna]

Bon, une solution à la mord-moi le nœud… On place l'image en background de l'élément <li>, on joue avec des padding pour placer le texte comme on le désire, et on applique un margin-top négatif à l'élément <li> d'en-dessous.

<ul>
<li>texte bla vla bla bla</li>
<li>texte bla vla bla </li>
<li>texte bla vla bla bla</li>
<li style=" background-image:url(../../images/CD/Sensation.JPG); background-repeat:no-repeat; height:132px; padding-left:155px; padding-top:40px; margin-top:5px;">texte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla blatexte bla vla bla bla</li>
<li style="margin-top:-35px;">texte bla vla bla bla</li>
</ul>

Il doit exister plus orthodoxe

 

[grumff]

Arrf… le retour du tableau… bien sûr. Mais j'aurais souhaité tout faire en css. Il y a certainement une solution !!
Merci quand même

Ça c'est quand même une logique très à la mode en ce moment qui m'est totalement incompréhensible. Un pur effet de mode sans aucun intérêt. Pourquoi aller s'em****** à empiler des div, en empilant 50 bidouillages à la con pour que ça fasse ce qu'on veut, en rendant le code plus complexe et plus dur à maintenir, pour des choses qui se font très bien et en 2 lignes avec des tableaux ? Un tableau ça peut très bien être totalement paramétré par du css, c'est pas moins "propre", et dans bien des cas c'est beaucoup plus maintenable, ça ne remet pas non plus en cause la très à la mode "séparation des données et de leur présentation" qui entre nous n'apporte rien pour la grande majorité des pages web, malgré ce que peut recommander le w3c.

Un choix d'implémentation ça ne doit être justifié que par des arguments techniques, un contexte et du bon sens, pas juste parce que c'est tendance.

 

[supunna]

Oui, oui, tu as sans doute raison… Je ne voulais pas jouer au donneur de leçon :siffle:
C'est juste que je suis amoureux des css… même quand elles sont chiantes :love:

 

[da capo]

Un choix d'implémentation ça ne doit être justifié que par des arguments techniques, un contexte et du bon sens, pas juste parce que c'est tendance.

Certes mais un tableau ça sert à présenter des données tabulaires.

Par ailleurs, utiliser un tableau à cet endroit n'est pas très heureux au regard de l'accessibilité du site.

Enfin, une feuille de style réfléchie n'est pas plus lourde qu'une multitude de tableaux…


Ce que j'en dis, moi… hein ? de toute façon, je n'ai pas de solution élégante à proposer

 

[fredmac75]

Salut,
le problème avec cette solution, c'est qu'a la moindre augmentation ou diminution de la taille du texte, tout part en sucette...

C'est aussi une des raisons "techniques" qui font que l'on préfère développer avec l'utilisation des css, plutôt qu'avec des tableau :king:

Un tableau c'est bien, mais ça se casse la gueule en moins de deux, et c'est l'enfer à débugger ou à modifier. Et je ne parle même pas de la question du référencement naturel...

 

[grumff]

le problème avec cette solution, c'est qu'a la moindre augmentation ou diminution de la taille du texte, tout part en sucette...

C'est aussi une des raisons "techniques" qui font que l'on préfère développer avec l'utilisation des css, plutôt qu'avec des tableau

Un tableau c'est bien, mais ça se casse la gueule en moins de deux, et c'est l'enfer à débugger ou à modifier. Et je ne parle même pas de la question du référencement naturel...

Si tu ne sais pas t'en servir ou que tu n'as pas les bons outils, c'est un autre problème. Un tableau dont on fixe intelligemment les propriétés avec du css, voir dont on intègre des div dans certaines cellules dans certains cas, ça se modifie facilement, ça se casse pas la gueule, c'est souple, ça permet d'aligner facilement certaines données les unes par rapport aux autres autant verticalement qu'horizontalement, ça se debug aussi bien que n'importe quoi d'autre. Quand au référencement, sauf dans quelques cas très particuliers et surtout pour les titres, c'est indépendant de la mise en page. Sinon pas 2% des sites web seraient correctement indexés.
Le css a bien des avantages, mais tes arguments ne sont pas les bons.

Certes mais un tableau ça sert à présenter des données tabulaires.

Par ailleurs, utiliser un tableau à cet endroit n'est pas très heureux au regard de l'accessibilité du site

Ça sert aussi à la mise en page depuis la nuit des temps. Niveau accessibilité je vois pas ce que ça change, c'est une liste, qu'elle soit dans un tableau ou dans des li, c'est du pareil au même.

Enfin, une feuille de style réfléchie n'est pas plus lourde qu'une multitude de tableaux…


Ce que j'en dis, moi… hein ? de toute façon, je n'ai pas de solution élégante à proposer

Évidemment que tu n'a pas de solution élégante, parce qu'un tableau est la seule et unique méthode pour faire un alignement vertical propre qui passe dans tous les navigateurs. Les méthodes en css pur sont des bidouilles pour lesquelles le premier individu qui devra revenir sur le code va s'arracher les cheveux.

Je suis pas un fanatique des tableaux, et je sais très bien que dans pas mal de cas c'est aussi bien de les éviter, et que même quand on en utilise on gagne à fixer le plus possible de propriétés via du css. J'aime beaucoup le css, mais je conçois pas qu'on aille imaginer 500 méthodes tordues inmintenables dans le seul et unique but d'éviter les tableaux à tout prix pour des cas où ça saute aux yeux qu'ils sont mieux adaptés.

 

[fredmac75]

Si tu ne sais pas t'en servir ou que tu n'as pas les bons outils, c'est un autre problème.

Ce n'est pas très sympathique mais bon...

Un tableau dont on fixe intelligemment les propriétés avec du css, voir dont on intègre des div dans certaines cellules dans certains cas, ça se modifie facilement, ça se casse pas la gueule, c'est souple, ça permet d'aligner facilement certaines données les unes par rapport aux autres autant verticalement qu'horizontalement, ça se debug aussi bien que n'importe quoi d'autre.

Avec ma modeste expérience, permet moi de douter fortement de ce que tu avances. J'en veux pour preuve que l'une des raisons qui à permis l'explosion graphique du web est justement le passage du full "table" à la conception CSS.

Ceci dit il m'arrive d'utiliser les tableaux lorsque cela est nécessaire.

Quand au référencement, sauf dans quelques cas très particuliers et surtout pour les titres, c'est indépendant de la mise en page. Sinon pas 2% des sites web seraient correctement indexés.

Contrairement à ce que tu affirmes, la mise en page (et l'utilisation corrélative d'une structure sémantique appropriée) à une influence sur le référencement naturel.

Le css a bien des avantages, mais tes arguments ne sont pas les bons.

Si tu le dis...

Ça sert aussi à la mise en page depuis la nuit des temps.

Au bas mot depuis l'invention du web...

Niveau accessibilité je vois pas ce que ça change, c'est une liste, qu'elle soit dans un tableau ou dans des li, c'est du pareil au même.

Justement, c'est là où il me semble que tu te trompes. Essai de lire une page, faite entièrement avec des tableaux, avec un lecteur d'écran. Que constates-tu ? L'accessibilité est-elle bonne ?

 

[Anonyme]

Si tu ne sais pas t'en servir ou que tu n'as pas les bons outils, c'est un autre problème. Un tableau dont on fixe intelligemment les propriétés avec du css, voir dont on intègre des div dans certaines cellules dans certains cas, ça se modifie facilement, ça se casse pas la gueule, c'est souple, ça permet d'aligner facilement certaines données les unes par rapport aux autres autant verticalement qu'horizontalement, ça se debug aussi bien que n'importe quoi d'autre. Quand au référencement, sauf dans quelques cas très particuliers et surtout pour les titres, c'est indépendant de la mise en page. Sinon pas 2% des sites web seraient correctement indexés.
Le css a bien des avantages, mais tes arguments ne sont pas les bons.

On peut, de temps en temps, utiliser un tableau (ultra-simple et pas d'imbrication) pour faire une mise en page quand il n'y pas moyen de faire autrement. Ce qui n'est pas le cas ici : il s'agit d'une liste donc <ul><li> pas de données tabulaires. C'est une question de sémantique html. Quant au fait que les tableaux de mise-en-page se modifient facilement, laisse-moi rire, ça crée un bordel monstre dans le code et ça alourdit considérablement la page. Sans compter que ce genre de page ne s'affichera pas correctement sur un gsm ou un pda alors qu'en respectant les standards, il suffit de désigner une css par media. Ça s'appelle la séparation du contenu de la présentation, et cette séparation quand elle est bien faite et respecte l'accessibilité, elle favorise la compréhension des pages par les robots indexeurs.

Ça sert aussi à la mise en page depuis la nuit des temps. Niveau accessibilité je vois pas ce que ça change, c'est une liste, qu'elle soit dans un tableau ou dans des li, c'est du pareil au même.

Nan voir plus haut.

Évidemment que tu n'a pas de solution élégante, parce qu'un tableau est la seule et unique méthode pour faire un alignement vertical propre qui passe dans tous les navigateurs. Les méthodes en css pur sont des bidouilles pour lesquelles le premier individu qui devra revenir sur le code va s'arracher les cheveux.

Pourquoi s'arracher les cheveux? Si le webmaster connaît son boulot, il n'y a pas de problèmes. Moi c'est les tableaux qui me filent des migraines, je ne sais pas comment on peut encore travailler comme ça. Pour le reste, quand tous les navigateurs implémenteront correctement la propriété display:cell, il n'y aura plus de problèmes. D'ici là on peut faire en sorte que la mise en page se dégrade correctement pour ceux ne l'ayant pas.

Je suis pas un fanatique des tableaux, et je sais très bien que dans pas mal de cas c'est aussi bien de les éviter, et que même quand on en utilise on gagne à fixer le plus possible de propriétés via du css. J'aime beaucoup le css, mais je conçois pas qu'on aille imaginer 500 méthodes tordues inmintenables dans le seul et unique but d'éviter les tableaux à tout prix pour des cas où ça saute aux yeux qu'ils sont mieux adaptés.

Bien sûr que les tableaux ne sont pas à jeter, ils sont très utiles pour présenter des données tabulaires (comme dit plus haut), simplement on ne devrait pas les utiliser pour la mise en page. On n'est plus dans les années 90, même IE(6) respecte les standards depuis 2001 si on lui demande gentiment. Bref… :rolleyes:

 

[Anonyme]

Contrairement à ce que tu affirmes, la mise en page (et l'utilisation corrélative d'une structure sémantique appropriée) à une influence sur le référencement naturel.

Exact. :zen: Je ne m'y connais pas trop en référencement mais je pense que si ces vieux sites en mode tableaux sont si bien référencés, c'est par que ils ont (ou ont eu) du succès et sont cité sur d'autres sites, le texte servant au lien ayant aussi beaucoup d'importance.

 

[grumff]

J'ai pas envie de passer ma nuit à débattre de points sur lesquels je suis pourtant d'accord avec vous, alors je vais faire vite. Vous m'attaquez sur des généralités alors que ma seule et unique affirmation est que dans le cas très précis que l'on traite dans ce sujet, l'utilisation d'un tableau est plus intelligente et n'a aucune influence négative. Pour la 100e fois que je le dis, s'en tenir à des principes bien arrêtés est ridicule, tout n'est que question de contexte.

Faut arrêter de dire des conneries, la sémantique pour le référencement ça a un éventuel impact sur un titre ou un élément qui doit être mis en valeur, mais les moteurs de recherche tiennent compte de tellement de critère que mettre un tableau à la place d'une liste n'a à peu prêt aucune incidence. À moins que l'un d'entre vous ne soit un expert de chez google...