Aller au contenu

Css pour une liste d'adresses


Nullette

Sujets conseillés

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 :)

Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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!)

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...