Aller au contenu

Problème CSS


Aprilwine

Sujets conseillés

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é par Aprilwine
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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!

Lien vers le commentaire
Partager sur d’autres sites

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

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é ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

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



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