Image texte en liste

Bonjour,

Je cherche le moyen de mettre des images et leur commentaire les uns en dessous des autres... Sans tableau.

Image 1 + commentaire à sa droite.

Image 2 + commentaire à sa droite.

Image 3 + commentaire à sa droite.

Image 4 + commentaire à sa droite.

...etc

Merci d'un conseil ou d'un lien.

F.

Bonjour,
pour commencer je te conseillerais d'aller lire ces différents articles.
Et celui-ci pour pouvoir choisir une alternative textuelle pertinente (voire pas d'alternative selon le cas) à tes images (alt).

<EDIT> Oups j'ai lu un peu vite ne pas prendre en compte l'exemple ci-dessous</>

Voilà une solution possible.

<img src="" alt="" width="" height="" />
<p>commentaire1</p>
<img src="" alt="" width="" height="" />
<p>commentaire2</p>
<img src="" alt="" width="" height="" />
<p>commentaire3</p>

Modifié par Hermann (05 Jun 2007 - 12:38)

Je dirais plutôt :

[b]HTML :[/b]
<p><img alt="..." src="..." /> <span>Lorem ipsum dolor sit amet</span></p>

[b]CSS :[/b]
p {
	clear: left;
}
p img {
	float: left;
}
p span {
	margin-left: 100px;
}

Marchera bien si on veut des commentaires alignés verticalement, en particulier si on a des images de largeur constante (de moins de 100px...).

Si on a des images de largeur variable et que l'on veut un commentaire qui ne revient pas à la ligne sous l'image (s'il est long), on utilisera plutôt un overflow:hidden sur le span et un margin-right: 10px en plus du float sur l'image. Mais ça demandera un petit aménagement pour IE6.


Nota : j'ai repris ici des notions développées dans cet article sur la mise en page avec les flottants.

Salut,

En ce qui concerne le HTML, comme on n'a malheureusement pas de balise <caption> pour les images, chacun code les légendes/commentaires à sa sauce. Un article sur SimpleBits compare trois des méthodes les plus utilisées. Je pense que ça peut aussi t'intéresser.

A+

fuerchan a écrit :
Bonjour,

Je cherche le moyen de mettre des images et leur commentaire les uns en dessous des autres... Sans tableau.
[... ]

Bonjour,

Y-a t-il une raison particulière à ne pas vouloir utiliser un tableau ?

Igor a écrit :
Y-a t-il une raison particulière à ne pas vouloir utiliser un tableau ?

Oui: il ne s'agit pas de données tabulaires.
Plus sérieusement, je comprends tout à fait ces interventions régulières qui rappellent qu'une table n'est pas le mal en soi, et qu'il faut nuancer les propos. Ceci dit, il faudrait accompagner ce genre de remarques pertinentes au rappel qu'il ne s'agit pas d'une bonne pratique, et que dans le meilleur des mondes, une table est un élément html prévu pour structurer des données tabulaires, et non pour réaliser des mises en page.

Je suis de l'avis d'Igor sur ce point. Un tableau ne serait pas sémantiquement choquant ici. Un tableau ("données tabulaires"), c'est une liste d'éléments dont les caractéristiques sont présentées dans des colonnes. Il est tout à fait possible de représenter sous forme tabulaire une liste de d'images : une par ligne, la première colonne contenant l'image à proprement parler et la deuxième colonne son commentaire/légende (et on peut en rajouter : une colonne pour la source, pour l'auteur, le copyright, etc....). Je ne pense pas que cela représenterait une utilisation abusive des tableaux.
Modifié par marcv (05 Jun 2007 - 13:10)

Bonjour,

marcv a écrit :
Je ne pense pas que cela représenterait une utilisation abusive des tableaux.

A partir du moment ou le contenu du tableau une fois linéarisé (lecture de
cellule en cellule puis ligne par ligne) suit un odre de lecture logique, cela n'est
pas problématique.

Bonjour,

Tout d'abord merci pour les liens et réponses.
J'ai donc pu obtenir ce que je voulais. Voilà :

Résultat visible ici : http://www.multimonde.net/sitetest/index.php?page=pagemenu01

je donne le code car la page ne sera pas éternelle...

Pour le html :

    <p class="contenu">Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla 
    </p>

    <div id="materiel">
        <img id="imgmat" style="float: left; width: 80px; height: 120px;"
        src="images/gab_img.jpg" alt="Illustration" />

        <p class="textmat"><span id="stmat">cette image</span> Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p>
        <p class="textmat">Bli bli bli :
        </p>
        <ul>
            <li id="spaceli">Machin </li>
            <li id="spaceli">machin</li>
            <li id="spaceli">machin</li>
            <li id="spaceli">machin</li>
            <li id="spaceli">machin</li>
        </ul>
    </div>

    <div id="materiel">
        <img id="imgmat" style="float: right; width: 80px; height: 120px;"
        src="images/gab_img.jpg" alt="Illustration" />

        <p class="textmat"><span id="stmat">cette image</span> Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla  </p> <p class="textmat">Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla 
        </p>
    </div>

Pour la feuille de style :

div#materiel{
	background: #CEE0D9;
	margin: 10px 0px 10px 10px;
	padding: 5px;
	width: 485px;
	height: auto;
	border: 2px dotted #7B7CFF;
}

span#stmat{
	font-weight: bold;	
}

p.textmat{
	margin: 0;
	padding: 0;
	text-align: justify;
	text-indent: 15px;
}

#imgmat{
	margin: 5px 5px 0px 5px;
	border: 1px solid black;
}

#spaceli{
	margin-bottom: 10px;
}

Autrement, pourquoi je ne veux pas de tableau ?

J'aurais pu utiliser les tableaux et rejoindre le propos de Igor et Marcy mais ça compliquait plus les choses par rapport à ce que je voulais.
Aussi et surtout (pour la petite histoire), j'ai longtemps utilisé des tableaux pour mes mises en pages... Mais depuis 3 / 4 ans je n'utilise que le CSS. Et je dois reconnaitre que j'aime bien l'utiliser. Il y a un côté ludique qui est loin de me déplaire (...)


Pour ce qui est des "données tabulaires", le terme reste quand même vaste car effectivement dans mon cas on peut très bien considérer les images et les commentaires comme des données et donc un tableau irait très bien. Mais toujours dans mon cas le résultat visuelle tire plus de la mise en page quand même. A savoir même que dans mes commentaire il peut y avoir des listes.

Personnellement j'utiliserais les tableaux uniquement pour mettre en page un pur tableau, comme par exemple :

Image article 1 --> Prix ht --> Prix TTC --> Commentaire
Image article 2 --> Prix ht --> Prix TTC --> Commentaire
Image article 3 --> Prix ht --> Prix TTC --> Commentaire

Tout cela bien au carrè. Maintenant si mon résultat doit plus être orienté sur "l'esthétique" alors j'oublie les tableaux et privilégie la mise en page.

Encore merci à vous.

F.