[Résolu] Afficher plusieurs lignes de texte à côté d'une image

Est-ce quelqu'un saurait comment mettre plusieurs lignes de commentaires à côté d'une image? Je n'arrive pas à avoir plus d'une ligne de texte à côté de l'image.

Mon code html:

a écrit :
<img src="image.jpg">Beaucoup de texte<br>

et css:

a écrit :
img {vertical-align: middle;}

C'est probablement très trivial, mais je n'ai rien trouvé là-dessus dans les FAQ ou même dans le forum, alors toutes les suggestions seraient les bienvenues. Merci!
Modifié par Reel (27 Sep 2005 - 20:56)

BONJOUR

Tu doit te tromper d'endroit nous ne sommes pas chez macdo ici ce n'est pas "je veux cela au revoir".

Il existe certaines règles de bienséance qui passe même au delà de la lecture des Règlesdu forum.

As tu deja fait un petit tour dans la F.A.Q éventuellement ou une petite recherche.


Si éventuellement tu n'est pas trop pressé tu peux egalement te présenter dans le bar du forum un topic y ai prévu à cette occasion.


MERCI
Modifié par knarf (26 Sep 2005 - 19:43)

Tu as raison. J'aurais du être un peu plus poli.

Je vais suivre ta suggestion et aller faire un tour dans le bar.

cool

Un débutant qui reconnait ses fautes comme ca , ca me plait quand meme moi (ca fait plaisir je trouve...)

Pour les balises img et br, pense bien à mettre /> à la fin, et pas > seulement.
Essaie donc de mettre dans le CSS:

img{float:left;}

Sylvain a écrit :
Un débutant qui reconnait ses fautes comme ca , ca me plait quand meme moi (ca fait plaisir je trouve...)

Qu'est-ce qui pourrait te faire croire qu'il est débutant ? J'ai un peu de mal à voir là.

Sylvain a écrit :

Pour les balises img et br, pense bien à mettre /> à la fin, et pas > seulement.

Tout dépend de son doctype, évidemment.

pour les />, c'est vrai

Débutant = nouveau du forum

moi je dis plus rien si on met de la mauvaise fois dans l'interpretation de mes dires

Sylvain a écrit :

moi je dis plus rien si on met de la mauvaise fois dans l'interpretation de mes dires

Non j't'assures, mon foie va très bien !

Pour répondre à la question, si j'ai vraiment compris, tu peux faire quelque chose comme ca :

XHTML :

<img src="tonimage.jpg" alt="Texte alternatif de ton image" width="200" height="120" class="accompagnement" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dignissim pharetra tellus. Aenean id justo. Quisque turpis ipsum, lobortis vel, volutpat nec, vulputate ac, lacus. Pellentesque libero nisl, dapibus eget, aliquet pretium, blandit id, augue. Duis nibh turpis, interdum in, mollis vel, tincidunt ut, lectus. Aliquam neque. Suspendisse turpis. Nulla massa odio, tempor vel, bibendum sit amet, mattis sed, erat. Nam non quam quis libero molestie laoreet. Maecenas pulvinar magna sit amet eros. Morbi dignissim odio at nibh. Maecenas mollis tempor ante. Sed neque pede, ultricies vitae, auctor vitae, ornare vel, dui. Duis mauris enim, eleifend ac, hendrerit eu, pretium eget, justo.</p>

CSS :

img.accompagnement {
float:left;
margin:0 0.5em 0.5em 0;
}

C'est ce que tu recherchais ?
Modifié par Merkel (27 Sep 2005 - 14:43)

Merci Sylvain pour ta suggestion. Ca fonctionne mais ça ne fait pas ce que j'aurais voulu . Ce que j'essaie de faire, c'est un galerie de photo du genre:

Photo 1 Commentaire 1

Photo 2 Commentaire 2

Photo 3 Commentaire 3

Or en utilisant float:left; j'obtient:

Photo 1 Commentaire 1
Photo 1 Commentaire 2
Photo 1 Commentaire 3

Photo 2

Photo 3

Voici ce que ça donne: http://mypage.bluewin.ch/reel/photos/stpetersbourg.html

J'ai essayé d'associer l'image et le commentaire en les mettant dans un <div></div>, mais ça ne marche pas .

Est-ce que quelqu'un pourrait expliquer à pauvre débutant comment associer un commentaire à une image?
Modifié par Reel (27 Sep 2005 - 20:53)

Merkel a écrit :

Qu'est-ce qui pourrait te faire croire qu'il est débutant ? J'ai un peu de mal à voir là.

Sylvain ne s'est pas trompé, je suis bien en débutant. Ca fait moins d'un mois que je fais du html et du css.

Merkel a écrit :

Tout dépend de son doctype, évidemment.

Mon code était en effet du html et non pas du xhtml, mais je suis en train de modifier mon site pour qu'il soit en xhtml.

Reel, tu peux très bien utiliser un tableau dans ce cas-ci, car selon moi, il s'agit bien de données tabulaires :

- Une colonne pour la photo
- Une colonne pour le commentaire

Les données s'afficheront bien d'une part, et de mon point de vue, l'utilisation d'un tableau de données est tout à fait justifié et sémantiquement correct.

Si jamais tu décide d'y aller d'un tableau, tu nous montreras le résultat afin de voir si tout est conforme.

Tu peux aussi lire Au Tableau!, pour connaître les balises et attributs utiles pour rendre un tableau plus accessible.
Modifié par Merkel (27 Sep 2005 - 19:54)

Bonjour.

Je suis contre l'utilisation de tableau dans ce cas.

Il me semblait avoir vu des sites qui faisaient ça avec un attribut align="left" ou align="right", il doit bien y avoir une correspondance en CSS.

QuentinC a écrit :

Je suis contre l'utilisation de tableau dans ce cas.

Pourquoi donc ? Peux-tu apporter des arguments contre l'utilisation d'un tableau dans ce cas précis ?

Une autre solution a été mentionnée. Il s'agit d'utiliser les flottants. Pour éviter l'emboîtement des images et du texte, il faut mettre un clear:both par exemple sur un élément qui sépare chaque bloque image/texte. Une belle partie de plaisir lorsqu'il y a déjà un menu principal flottant.

J'insiste QuentinC, dis-moi pourquoi tu es contre l'utilisation d'un tableau. Qui sait, tu pourrais peut-être arriver à me convaincre mais pour le moment, je ne vois pas en quoi un tableau n'est pas justifié dans ce cas précis.

En tout cas, en tableau, ça fonctionne parfaitement!
Voici le résultat: http://mypage.bluewin.ch/reel/photos/stpetersbourg.html

Merci Merkel!

J'essayerai de trouver une méthode sans tableau, mais pour l'instant le tableau me conviens très bien.
Modifié par Reel (27 Sep 2005 - 20:52)

Dans une approche seulement design, le tableau est parfait puisqu'on obtient ce qu'on veut en quelques minutes.

Par contre, ce n'est pas des "vraies" données tabulaires car on ne peut pas vraiment présenter de titre de colonne ou de ligne.
Je ne sais pas si je me fais bien comprendre.

Ca ferait un peu tâche une ligne <tr><th>photo</th><th>description</th></tr.

QuentinC a écrit :

Par contre, ce n'est pas des "vraies" données tabulaires car on ne peut pas vraiment présenter de titre de colonne ou de ligne.
Je ne sais pas si je me fais bien comprendre.
Ca ferait un peu tâche une ligne <tr><th>photo</th><th>description</th></tr.

Théoriquement, on peut très bien mettre les entêtes des colonnes, même que ca devrait être fait. Tu considère que ce ne sont pas des données tabulaires parce que tu t'empêches de mettre les informations nécessaires au tableau et ce, pour une question purement esthétique. C'est une réflexion aussi vicieuse que de vouloir utiliser un tableau parce que c'est beau graphiquement. Tu vois ce que je veux dire ?

L'utilisation d'un tableau n'est certe pas la seule solution, mais s'en est une tout à fait justifiée. Ce sont bien des données dites tabulaires.

Prenons l'exemple d'une base de données ayant un champ Image et un autre Texte. Les enregistrements seront en lignes et colonnes, exactement comme dans le cas présent. Une image dans la première colonne, et le texte de l'image dans la seconde colonne. N'est-ce pas là des données tabulaires ?
Modifié par Merkel (27 Sep 2005 - 22:51)

Bonjour,

Il serait temps de sortir de ce faux problème.

L'utilisation des tableaux HTML n'a aucun rapport avec cette prétendue notion de "données tabulaires" qui n'a pas d'existence normative.

Les tableaux sont destinés à présenter en cellules organisées en lignes et en colonnes. Que les données soient fantasmagoriquement tabulaires ou non, cela reste un outil de présentation visuelle. Il suffit de voir l'armada discutable d'outils tentant de rendre un tableau complexe intelligible dans les medias non visuels pour s'en rendre compte. Quelque-soit la raison d'utiliser un tableau, ce tableau, en l'état actuel du HTML, est une façon de représenter visuellement des données. HTML (et XHTML1.x) est historiquement un format destiné aux medias visuels, adapté tant bien que mal aux autres medias. Ou a l'absence de media final.

On peut utiliser cette présentation tabulaire quand les données ont certaines relations en elles. Ces relations spécifiques ne sont pas définies normativement. Et très rarement comprises par les auteurs, qui en ont une approche totalement intuitive.

Ici, nous avons bien des couples de données (image-commentaire) qui rentrent dans ce type de relations. Cela pourrait être exprimé autrement (liste de définition, section titrée). Rien n'indique normativement quel balisage doit être privilégie. Le tableau est une option parmi les autres.

Mais cela n'a beaucoup d'importance : on peut aussi utiliser cette présentation tabulaire quand les données n'ont pas ces relations, mais que le résultat visuel correspond à ce qu'on veut obtenir, pour des raisons toutes pragmatiques : limites d'implémentations CSS, limites inhérentes à CSS2, limites de la maîtrise de CSS par l'auteur.

Ici, c'est encore le cas. Reel le fait rapidement et efficacement avec un tableau. C'est bien.

On peut recommander de privilégier dans ce cas le positionnement CSS, qui a ses atouts et ses limites, mais c'est une option. Pas une question philosophique. Ceux que les tableaux gratouillent franchement ne les utiliseront pas. Ceux que les tableaux ne gratouillent pas les utiliseront en gérant leur accessibilité.

La conclusion de Reel :

a écrit :
J'essayerai de trouver une méthode sans tableau, mais pour l'instant le tableau me conviens très bien.

... est une excellente approche déjouant ce faux problème.
Modifié par Laurent Denis (28 Sep 2005 - 08:24)

Laurent Denis a écrit :

Ici, nous avons bien des couples de données (image-commentaire) qui rentrent dans ce type de relations. Cela pourrait être exprimé autrement (liste de définition, section titrée). Rien n'indique normativement quel balisage doit être privilégie. Le tableau est une option parmi les autres.

Je suis tout à fait d'accord avec toi, d'où ma référence à une base de données. La première colonne, celle de l'image, a une relation directe avec la colonne suivante, celle du commentaire. J'ai également indiqué qu'un tableau était une solution parmi d'autres.

Laurent Denis a écrit :

Que les données soient fantasmagoriquement tabulaires ou non, cela reste un outil de présentation visuelle.

[...]

ce tableau, en l'état actuel du HTML, est une façon de représenter visuellement des données.

J'aimerais, Laurent, que tu me donne ton avis sur quelque chose. Prenons un tableau de base, disons un tableau de données représentant une liste de factures, avec des colonnes pour le numéro de facture, le total de la facture, la date et l'heure et le numéro de client. Tu dis que les tableaux ne sont là que pour une représentation visuelle des données. De ce que j'ai compris, nous pourrions très bien utiliser des sections titrées. Je me demande tout de même si l'utilisation d'un tableau n'est pas la meilleure chose dans ce cas, sémantiquement parlant. Le fait de regrouper des données ensemble n'est-il pas préférable pour les consulter, autant pour l'humain que la machine ? On établi une relation directe entre chaque enregistrement, en les groupant dans un tableau, et ensuite on groupe chaque donnée d'un même enregistrement sur une ligne. Ca l'apporte une structure visuelle d'abord, mais également une structure disons, logique. C'est pourquoi je préfère toujours utiliser un tableau lorsque j'ai besoin de présenter ce genre de données, dites tabulaires (oh hein, je dis ce mot juste pour te faire hérisser le poil).

Mon intention n'est pas non plus de démarrer un débat ici même, mais juste d'éclaircir une chose au sujet des tableaux et leur valeur sémantique, si vous voulez. D'ailleurs ma question sur les factures peut s'appliquer facilement au cas présent.

Tu éclaircis déjà certaines choses, en disant :

Laurent Denis a écrit :

On peut utiliser cette présentation tabulaire quand les données ont certaines relations en elles. Ces relations spécifiques ne sont pas définies normativement.
[...]
Rien n'indique normativement quel balisage doit être privilégie.

Dans les normes écrites, peut-être bien que non, mais n'a-t-il pas lieu de croire qu'une norme non-écrite existe ? Une sorte de logique à l'utilisation de telle ou telle balise ? Les relations entre chaque enregistrement, entre chaque colonne, n'existent pas dans les normes ? Ais-je bien compris ce que tu as voulu dire ? Il existe tout de même des attributs faisant plutôt croire d'une relation entre les données, je parle notamment de l'attribut scope. Scope ne défini certe pas la relation entre chaque colonne, mais indique si la cellule d'en-tête fournit des informations d'en-tête pour une colonne ou pour une ligne. Dans cet en-tête, c'est là qu'on indique à quoi correspond les données de la colonne ou de la ligne. Une relation est fait, non ?

Je ne prétends pas non plus que les tableaux ne doivent jamais être utilisés à des fins uniquement de présentation, seulement, j'ai tendance à croire que dans certains cas, c'est le tableau qu'on devrait privilégier. La liste de définition, quant à elle, je trouve qu'elle ne regroupe pas aussi bien les données ensembles. Le tableau a l'avantage d'avoir des entêtes, pour définir ce que contient les cellules d'en dessous, tandis que les listes de définition pas vraiment.

Bref, il y a des cas que l'utilisation d'un tableau pour présenter certaines données est plus logique que n'importe quel autre balisage. Enterrez-moi si je me trompe...
Modifié par Merkel (28 Sep 2005 - 16:33)

Bonsoir,

Le fond du problème, c'est qu'en HTML, la structure exprime la nature des données, mais pas les relations entre les données.

Prenons ton exemple de tableau de facture :

<table>
<caption>Factures</caption>
<thead>
<tr>
<th>Numéro</th>
<th>Montant (Euros)</th>
</tr>
</thead>
<tbody>
<tr>
<td>999</td>
<td>1000</td>
</tr>
</tbody>
</table>

Que dit cette structure à propos du chiffre 1000 ?
- Qu'il doit être affiché dans une cellule
- Que cette cellule sera placé dans la colonne surmontée par une autre cellule, contenant les mots Montant (Euros)
- Et qu'elle sera placée dans la même ligne que la cellule contenant le chiffre 999.

Dit-elle que le chiffre 999 est un numéro ? Non. Dit-elle que le chiffre 1000 est une valeur monétaire en euro ? Non plus. Dit-elle que ces deux données ainsi qualifiées caractérisent une chose appelée facture ? Toujours pas.

La présence de scope ne permettra toujours pas d'exprimer l'ensemble de ces relations.

En revanche, une fois affiché sous la forme attendue, ces données seront interprétables par quelqu'un qui a appris à lire un tableau à double entrée , et deviendront grâce à lui : "la facture n°999 a un montant de 1000 Euros".

Qui crée la relation ? La structure ? Non. Le lecteur qui sait regarder et lire un tableau affiché comme tel.

Linéarise ce rendu, et tout espoir de créer cette relation est perdu:

a écrit :
Numéro Montant (Euros) 999 1000

Refais une présentation des mêmes données en lignes et en colonnes via CSS, avec un code sans tableau, mais des paragraphes, des listes, des div, etc. et la possibilité de réinventer cette relation est à nouveau là.

Ce qu'il manque ici (en en HTML en général), c'est ce que permet de faire RDF : exprimer non seulement la nature des données, mais également celle des relations entre elles.
Modifié par Laurent Denis (28 Sep 2005 - 19:53)

Merci beaucoup Laurent pour ton explication. C'est toujours apprécié lorsque c'est clair et complet.

J'aimerais tout de même réagir modestement :

Laurent Denis a écrit :

En revanche, une fois affiché sous la forme attendue, ces données seront interprétables par quelqu'un qui a appris à lire un tableau à double entrée , et deviendront grâce à lui : "la facture n°999 a un montant de 1000 Euros".
[...]
Qui crée la relation ? La structure ? Non. Le lecteur qui sait regarder et lire un tableau affiché comme tel.

Note bien que je ne suis pas responsable des conneries que je pourrais dire ci-bas. J'y vais sur le coup d'une réflexion rapide. C'est juste quelques idées, peut-être incorrectes, qui me viennent à l'esprit lorsque je dois décider entre un tableau ou autres choses.

Le lecteur pourrait également être un script ou un logiciel n'est-ce pas ? Je vais désigner cela étant la Machine. En utilisant un tableau dès qu'on présente des données semblables, se rapprochant souvent d'une table d'une base de données, il me semble qu'il sera plus simple pour une machine de récupérer les données. Les données étant déjà regroupées par lignes et colonnes, la machine peut très bien arriver à créer elle-même les relations à l'aide des entêtes de tableau, car la machine sera facilement programmable pour être en mesure de bien lire des tableaux à double entrée. Je ne dis pas que c'est impossible de récupérer des données présentées en section titrées ou en liste de définition, mais ca risquerait de compliquer encore plus les choses pour le programmeur. En utilisant toujours un tableau bien structuré, ca simplifie bien des choses, même si c'est imparfait. Certains me diront d'utiliser une autre technologie, mais je préfère en rester à l'HTML, et à la récupération interne et externe (par une machine externe au site par exemple).

Pour en rester aux scripts, il y a aussi des petites fonctions Javascript sympathiques qui permettent de trier un tableau HTML. C'est plus simple à mettre en application sur un tableau html, quand même.

On pourrait aussi avancer, avec un peu de recule (jeu de mot à 1$ CAN), que de nombreuses personnes sont en mesure de lire des tableaux à double entrée. C'est quand même une façon très répandue de présenter des données qui ont une relation logique entres elles : les bases de données, les factures d'épicerie, liste des transactions effectuées etc... Il me semble donc normal, à mon avis, de continuer à présenter ce même genre de données de la même façon que la "norme" dans ce domaine. Même pour les non-voyants, est-ce que le fait d'utiliser un vrai tableau HTML pour afficher ces données ne leur apporte pas un certain confort ? Une certaine structure "visuelle" mentale ? Je ne sais pas, je brainstorm la. C'est sûr qu'on ne peut pas généraliser, il y a toujours des cas particuliers, mais j'aimerais tout de même avoir ton avis là-dessus.

Tout ca pour répondre à ceci :

Laurent Denis a écrit :

Refais une présentation des mêmes données en lignes et en colonnes via CSS, avec un code sans tableau, mais des paragraphes, des listes, des div, etc. et la possibilité de réinventer cette relation est à nouveau là.

Tout à fait, mais ce serait une prise de tête inutile. Aussi bien d'utiliser un tableau, c'est fait pour ca. Je sais, tu le sais, mais j'explique : admettons un instant, à moins que quelqu'un me dise le contraire, que la présentation des données dans un tableau à double entrée rendre la vie plus facile aux utilisateurs. Les voyants peuvent faire la relation entre les entêtes et les cellules de données. Les non-voyants, quant à eux, devraient aussi pouvoir profiter de cette présentation "visuelle". Il vaudrait mieux utiliser un tableau dans ce cas.

Ce que je viens de dire est peut-être totalement faux. Mon objectif était d'écrire ce qui me passait par la tête et que le bon Laurent éclaire mon chemin. Ceux qui pourraient peut-être penser comme moi en profiterons également.

Au fait, je commence pas mal à noyer le sujet ici présent, je m'en excuse, mais j'aime abuser de Laurent !