Discussion :

[NeoMan]

Bonjour à tous !

Je cherche à mettre en forme un menu sans limitation de niveau dans la hiérarchie. Ainsi j'aimerais par une astuce faire une diminution de la police (plus le niveau est grand, plus la taille est petite).
ex :
niveau 1
niveau 2
niveau 3
niveau 4
niveau 5

exemple de code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<div id="header">
<ul>
  <li><a href="#"><div>Accueil</div></a></li>
  <li>
	<a href="#"><div>Articles</div></a>
	<ul>
	  <li><a href="#"><div>CSS</div></a></li>
	  <li><a href="#"><div>JavaScript</div></a></li>
	  <li><a href="#"><div>PHP</div></a></li>
	</ul>
  </li>
  <li>
	<a href="#"><div>Téléchargement</div></a>
	<ul>
	  <li><a href="#"><div>Logiciels</div></a></li>
	  <li><a href="#"><div>Musique</div></a></li>
	  <li><a href="#"><div>Films</div></a></li>
	</ul>
  </li>
  <li>
	<a href="#"><div>Contact</div></a>
	<ul>
	  <li><a href="#"><div>Jeremie</div></a></li>
	  <li><a href="#"><div>Virginie</div></a></li>
	  <li><a href="#"><div>Agathe</div></a></li>
	</ul>
  </li>
</ul>
</div>

pour le moment je m'oriente vers font-size (avec pour valeur 0.75em par exemple), mais ça ne donne rien (tout est à 0.75em par rapport au document et non au parent de l'élément).
merci d'avance pour vos idées !

@++

NeoMan

[Nesmontou]

Salut, essaie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li {font-size: 0.8em;}

Ca donne quoi : (je n'ai pas testé )

[NeoMan]

A vrai dire c'est ce que je fais et, non ça ne fonctionne pas : tout est de même taille....
merci quand même :o)

@++

NeoMan

[Nesmontou]

Salut, j'ai essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li {font-size: smaller;}

et ça marche

Bon développement

[balu]

Trouves-tu agréable de lire des caractères de la taille du niveau 5 de ton exemple? Moi, non.

Ton menu sera difficilement accessible à certains visiteurs ayant un trouble visuel par exemple.

[NeoMan]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li {font-size: smaller;}

Oki merci !! petit question quand même: de combien d'em le smaller décrémente t-il la police de caractère ?
Je testerais ça demain matin à la première heure !

Trouves-tu agréable de lire des caractères de la taille du niveau 5 de ton exemple? Moi, non.

Ah je suis d'accord avec toi c'est presque illisible. Mais c'était pour l'exemple, histoire que je me fasse bien comprendre dans ce que j'imaginais. Mais évidemment dans le résultat final ça peut être plus gros...

Ton menu sera difficilement accessible à certains visiteurs ayant un trouble visuel par exemple.

Je prévois de naviguer en profondeur dans le menu (sans changer de page). C'est à dire sélectionner un élément de l'arborescence pour en l'élément root d'un menu partiel. Sûrement par un menu contextuel. Ainsi les niveaux le plus profond et les moins lisibles deviennent plus lisibles.
Je rappelle aussi que comme le menu est 100% format texte, il peut être lu par des "synthétiseurs vocaux" (je ne suis pas sûr de l'expression) en plugin dans le naviguteur.

@++

NeoMan

[NeoMan]

Je testerais ça demain matin à la première heure !

Effectivement ça fonctionne bien. Le petit problème c'est que ça diminue trop vite à mon goût. Je sais je sais je suis ***
M'enfin...

Merci Nesmontou pour cette solution !

@++

NeoMan