Jump to content

Css pour une liste d'adresses


Recommended Posts

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

Link to post
Share on other 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>

Link to post
Share on other 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

Link to post
Share on other 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.

Link to post
Share on other 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!)

Link to post
Share on other 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

Link to post
Share on other 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.

Link to post
Share on other sites
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...