Css pour une liste d'adresses

[Nullette]

Bonjour,

Peut-être que quelqu'un pourrait me donner une idée pour bien afficher une liste d'adresses.

Je voudrais le nom - suivi d'une éventuelle description et, au dessous, l'adresse et une éventuelle adresse web.

Actuellement j'ai fait une liste, mais je trouve que c'est peu lisible.

J'ai essayé de faire des paragraphes (le nom en gras et le paragraphe avec l'adresse en retrait), mais je ne sais pas gérer l'espace entre les différentes adresses.

La page actuelle

J'ai fait un essai :

.nom {
	font-size: 1em;
	font-weight : bold;
	padding-top: 2px;
	padding-bottom: 1px;
	}
.retrait {
padding-left : 15px;
}

dont le résultat n'est pas mauvais, mais c'est long. Si une solution plus simple existait, ce serait mieux

[Phobos]

Salut,

Pour ça je pense qu'une liste de definitions dl dt dd irait bien :

<dl>
	<dt>Machin</dt>
	<dd><ul><li>adresse</li><li>téléphone...</li></ul></dd>
	<dt>Machin 2</dt>
	<dd><ul><li>adresse</li><li>téléphone...</li></ul></dd>
</dl>

[Dadou]

Non pas vraiment, une liste de définition c'est pour des dédinitions, genre glossaire, la c'est une liste d'élements, son code est correct, c'est des idées de mise en forme qu'elle cherche.

En l'occurrence pour espacer un peu les définitions, mettre un margin-bottom plus grand

[Monique]

Bonjour,

Je rejoins l'avis de Dadou pour le code.

Pour la mise en forme, tu pourrais essayer d'utiliser une image plutôt qu'une puce. La liste serait probablement plus lisible.

[Nullette]

Merci pour vos avis.

x Monique, j'ai un problème pour placer mes images avec mon code css (la class "image gauche" - je ne suis toujours pas pro !).

Il y a aussi le problème qu'avec une liste, je serais obligée de mettre plein de < /br> pour que tout s'affiche comme dans une colonne.

Exemple de la puce-flèche qui s'adapte avec mon style css

J'ai refait ma liste, sans liste, avec des paragraphes. Ce n'est pas encore le top, mais c'est plus lisible :

Les adresses en paragraphes (plein de class!)

[paolodelmare]

Pour les CSS, tu as une pléthore d'exemples sur le net.

Pour le HTML, tu peux utiliser un balisage sémantique comme le microformat hCard http://microformats.org/wiki/hcard

[Nullette]

Merci paolodelmare.

Je n'ai rien compris dans cette page, qui parle de Vcard, hcard ...

[paolodelmare]

Il s'agit simplement d'un balisage uniformisé permettant de structurer convenablement ce genres de données récurrentes.

L'idée fondatrice du concept de web sémantique est de rendre les ressources accessibles aux humains et agents logiciels.

En gros, si tu prend 10 sites avec des listes d'adresses, tu auras 10 balisages différents.

En utilisant les microformats, ces listes d'adresses auront un balisage similaire permettant de les agréger et le traiter.

Certaines observations tendent à démontrer que ces pratiques ont un impact positif sur le référencement (je reste prudent)

Voici le même article en français http://microformats.org/wiki/hcard-fr

[Nullette]

Merci encore, mais c'est trop compliqué pour moi.

Je devrais ajouter des <div>, des class et autres.

Mon site est "personnel", il ne s'agit pas d'un site commercial, ni d'une société et je n'ai aucune envie de faciliter que les adresses que je propose pour rendre service soient agrégées et traitées.

J'aimerais que les "pros" du Hub viennent donner leur avis.

[Monique]

Pour la mise en forme de ta liste, et notamment l'utilisation d'image comme puce, cette page devrait t'aider

[Nullette]

Merci Monique.

[SimMaster]

Il existe aussi la balise address (<address></address>). Avec un peu de css, ca peut rendre bien

[Dudu]

Selon ce document: Structure globale d'un document HTML, qui est la traduction française officielle, certes non normative, de la version du w3c, la balise <address></address> n'est pas exactement faite pour ce genre de cas.