comment structurer ce menu

Question

Je travaille sur un menu (images faites avec indesign, pas encore html):

Certaines options de menu charger le contenu dans un autre div (une colonne à côté). Toutefois, pour l'option « Contenu » Je veux une nouvelle liste d'options comme ceci:

Il devrait réduire la chose « contenu ».

Tout est fait avec jquery/javascript donc c'est dynamique (chargement d'un autre livre par exemple). Je me demandais pour le menu CONTENT, devrais-je placer un div dans CONTENT qui détiennent une table de 2 lignes? Un tableau pour les nombres romains et 1 pour le nom du chapitre. Ou est-ce difficile à combiner avec une liste non ordonnée?

http://jsfiddle.net/cmTpR/

Answer 1

Devrais-je placer une div dans CONTENT qui contiennent une table de 2 lignes? Une table pour les nombres romains et 1 pour le nom du chapitre.

Je suppose que vous voulez dire 2 colonnes?
Comment être sûr que 1 chapitre occupera exactement 1 ligne? Ils sont assez longs, que se passe-t-il si l'un d'eux occupe 2 lignes, et si l'utilisateur n'a pas la police que vous avez indiquée dans font-family et que fallback est plus grand? Que faire si il zoom de 1, 2, jusqu'à 6 niveaux de (texte) zoom selon W3C/WAI WCAG 2.0 Recommandation sur l'accessibilité. 2 colonnes comme cela signifierait aussi your content would make no sense when linearized (imaginez un lecteur d'écran qui écoute 1, 2, 3, 4, etc et seulement le nom des chapitres 1, 2, 3, 4, etc. Bonne chance avec ça ! :))

Ou est-ce difficile à combiner avec une liste non-ordonnée?

Non, ce n'est pas le cas. Voir http://jsfiddle.net/PhilippeVay/EsYZr/ où seules les listes imbriquées sont utilisées et (attendez) la disposition de la table CSS. La sémantique est toujours celle d'une sous-liste mais visuellement (et visuellement seulement), c'est comme une table faite de lignes et de cellules.

La bonne partie est que vous n'avez pas à forcer une largeur. Les nombres romains comme XVIII sont assez grands mais l'algorithme de table dans les navigateurs s'adapte au contenu (tant que vous ne changez pas l'algorithme de table avec table-layout: fixed) comme avec un tableau HTML.

Answer 2

Je comprends que vous voulez avoir les chiffres romains et les noms de chapitre dans un élément de liste unique et sont à la recherche sur les tables comme une solution.

Vous pouvez certainement utiliser des tables. Vous pouvez également utiliser un élément span avec une largeur fixe.

J'utilise un span pour tenir les chiffres romains

<ul> 
    <li> <span class="num">I</span> Hello World </li> 
    <li> <span class="num">II</span> The Second string </li> 
    <li> <span class="num">III</span> 3 times, is a charm! </li> 

</ul> 

Je cède alors une largeur fixe à la durée

li span.num { 
    display: inline-block; 
    width: 30px; 
} 

jsFiddle: http://jsfiddle.net/FJgqs/

Espérons que cela répond à votre question