Bonjour et bienvenue,
ce que tu décris n'est
PAS une liste de définition. C'est un menu de navigation donc une bête liste non ordonnée suffira.
Ensuite si tu as besoin d'ajouter sous
chaque titre un sous-titre pour :
- ralentir l'internaute
- expliquer mieux ce que c'est que ce titre (siginification, étendue du domaine ?)
- bourrer l'écran de texte
c'est qu'il y a un problème d'ergonomie et que les intitulés de chaque titre sont mal rédigés.
Sur ce site, un intitulé de menu c'est "Emploi" : on va pas rajouter "alors il y a d'une part des demandes et d'autre part des offres" (on aurait pas deviné ...) ou "ne concerne que des annonces en rapport avec le web" (comme les 2 autres parties du site quoi. Ah c'est écrit sous le logo ...). J'ai pas besoin de connaître la
définition de Emploi, Forum ou Apprendre avant de cliquer dessus ...
Cet élément ne devrait servir que dans les Glossaires et dans les dicos. Si ça fait très peu d'utilisations eh ben tant pis elle ira rejoindre <dfn> dans la catégorie "je m'en sers pas tous les jours".
Mais si tu tiens à un menu de navigation avec 2 lignes pour chaque item :
(je fais l'hypothèse que les 2 lignes sont dans le lien, on pourrait aussi avoir juste le LienN cliquable mais ce serait moins bien)
<ul>
<li>
<a href="#"><strong>Lien 1</strong>SousTitre1</a>
</li>
<li>
<a href="#"><strong>Lien 2</strong>SousTitre2</a>
</li>
<li>
<a href="#"><strong>Lien 3</strong>SousTitre3</a>
</li>
</ul>
Ensuite pour avoir les items l'un à côté de l'autre :
- display: table-qqch ne va pas fonctionner avec IE7 on oublie pour l'instant
- display: inline fonctionnerait très bien avec une seule ligne mais moins ici (dépend de ce que tu veux graphiquement)
- display: inline-block; c'est le meilleur des 2 mondes.
http://covertprestige.info/css/inline-block/ Tu y trouveras le correctif pour IE7 et IE6 (Firefox 2 je pense pas que tu aies besoin de le supporter). Si tu veux laisser la largeur d'une espace (4px en général) entre chaque item ne touche à rien, si tu veux coller tes items l'un à l'autre alors il faut coller </li><li> sans 1 ou plusieurs espaces/tabulations/retours chariots entre.
Applique ceci au lien "li a" et pas au li directement. Ainsi la zone cliquable aura une surface maximale, plutôt que de devoir cliquer pile sur le texte de ton item de menu (par défaut un lien a est inline et occupe la taille du texte qu'il contient, au plus juste).
Ensuite pour avoir 2 lignes à chaque item, c'est aussi simple que de forcer l'élément strong à occuper 100% de la largeur puisque du coup le reste du contenu de chaque item de liste va devoir aller à la ligne (il n'y a plus de place en 1ère ligne si elle est occupée à 100%)
li strong {
display: block;
}
Pense à styler le lien
