Problème CSS

[Aprilwine]

Bonjour,

Je suis en train de créer une petite liste de dossiers, et je voudrais que chacun ait un icône à gauche. J'ai commencé par créer une balise DIV vide avec icône en arrière plan, suit par un P, qui contient le nom du dossier, et les deux sont display: inline. Mais on ne peut spécifier ni le width: ni le height: d'un élément qui a le display: inline, et donc le DIV vide disparaît. Y a-t-il une meilleure façon?

Modèle dossier actuel:

<div class="dossier" id="d1"><div class="iconeDossier"></div><p class="nomDeDossier">Nom de dossier</p></div>

Modifié 23 Mars 2006 par Aprilwine

[jeanpierre949]

pourquoi display:inline ? Essaie avec une liste c'est plus pratique , une <dl> c'est parfait pour ce genre d'affichage

[MarvinLeRouge]

+1

Tu te compliques la vie en créant des structures inadaptées.

"simple chess !"

[Dudu]

Bonjour

Je suis en train de créer une petite liste de dossiers

Alors utilise une balise de .. liste

Il y en a 3:

<ul> : pour unordered list

<ol> : pour ordered list

<dl> : pour definition list.

Un exemple de liste <ul>

<ul>
<li>Pierre</li>
<li>Paul</li>
<li>Jacques</li>
<ul>

ce qui donne

• Pierre
  
• Paul
  
• Jacques
  

Un exemple de liste <ol>

<ol>
<li>Pierre</li>
<li>Paul</li>
<li>Jacques</li>
<ol>

ce qui donne

1. Pierre
   
2. Paul
   
3. Jacques
   

Une liste <dl> (pas faisable sur le forum) a un code de ce genre

<dl> <!-- definition list -->
<dt>Famille Durand</dt> <!-- definition title -->
<dd>Pierre</dd> <!-- definition description -->
<dd>Paul</dd> <!-- definition description -->
<dd>Jacques</dd> <!-- definition description -->
</dl>

À mon avis, ce qui te convient le mieux, c'est une liste <ul>. Pour en enlever les "points" devant chaque item, tu places ce code dans ton fichier CSS

ul li {list-style-type :none;}

Essaie avec une liste c'est plus pratique , une <dl> c'est parfait pour ce genre d'affichage

Mouais. Une liste <dl> a finalement assez peu d'applications, mais est utilisée très (trop ?) souvent, la plupart du temps à tort et à travers.

Une <ul> me semble largement suffisant.

Après chacun voit comme il veut

[captain_torche]

Sémantiquement, une liste <dl> devrait être utilisée pour un glossaire, non ?

[MarvinLeRouge]

Je suis assez d'accord avec captain_torche.

Maintenant, tout dépend du contenu exact de la liste : peut-il être défini comme une liste d'association entre des éléments et leur définition ?

[Aprilwine]

Parfois, on ne voit pas les choses les plus évidentes. Quand j'utilisais les tableaux pour mes mises en page, j'ai évité les listes car je n'en ai jamais eu besoin; donc je ne les connais pas trop. Mais il semble que c'est la chose correcte à employer en ce cas. Merci!

[Dudu]

Hum, en relisant le topic je m'aperçois qu'on n'a pas répondu pour l'affichage d'une icône devant chaque item de la liste

Plutôt que de réinventer la roue, voici quelques liens:

Styler des listes en CSS

en anglais: Taming lists

en français: Domptez vos puces, dressez des listes

Même chose avec des listes comportant des liens

en anglais: Clickable Link Backgrounds

en français: Arrière-pans cliquables

Avec ça, tu es paré

[jeanpierre949]

D'ou l'utilite de la <dl> dt pour icone dd pour description