5568 sujets

Sémantique web et HTML

[Résolu] Liste ul

Salut,

Ou je suis miro, ou??? voila c'est quand même la bonne sémantique pour une liste imbriquée sur trois niveaux?

<ul><li>Item1<br />
Item1 suite.
	<ul><li>- sous item 1.1</li>
	<li>- sous item 1.2</li>
	<li>- sous item 1.3</li>
	<li>- sous item 1.4
		<ul><li>- sous sous item 1.4.1.</li></ul></li></ul></li></ul>

Modifié par Vajra (26 Nov 2006 - 00:00)
oui, où est le probleme ? néammoins, je pense que tu devrais l'indenter afin de t'y retrouver, car les erreurs sont faciles avec autant d'imbrication :

<ul>
	<li>Item1<br />
	Item1 suite
	<ul>
		<li>- sous item 1.1</li>
		<li>- sous item 1.2</li>
		<li>- sous item 1.3</li>
		<li>- sous item 1.4
		<ul>
			<li>- sous sous item 1.4.1</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>
tu veux dire "sous sous item 1.4.1"? chez moi il est bien en retrait ! donne ta css si t'en a une associée, ou montre ce que ça donne en ligne
Salut,

le lien ici (page en préparation)

dans le 2e tableau "nécessité...." la derniere ligne, devrait se trouver en niveau 3...

Merci...

PS: au passage si tu peux me dire si tu vois bien le logo w3c css en haut à droite s'afficher sous IE, car chez moi c'est devenu impossible?
Modifié par Vajra (27 Jan 2006 - 18:17)
Modérateur
Vajra, pour le logo du CSS valide, tu devrais sauvegarder l'image sur ton hébergeur, plutôt que d'aller la chercher sur le serveur du validateur. De cette façon, même si le serveur du validateur est tombé mort, l'image s'affichera quand même.
ok merci tony pour cette précision Smiley cligne
euh par contre pour ce cas precis, ca s'affiche chez moi sous FF, pas sous IE...
Argh ! Desolé de te le dire de façon si abrupt, mais ton code il est pas très sexy ! Indente et nettoie un peu le code ! Ta mise en page est pas trop complexe, donc je pense que t'auras pas de mal à m'enlever ces tableaux (enfin faudra voir avec les specialistes de la semantique, parce qu'apres tout, tu affiche un tableau...), et à rendre le code valide :
http://validator.w3.org/check?uri=http%3A%2F%2Fla-providence61.chez-alice.fr%2FCP%2FSIP%2Fsip_pre.php

Bref, le probleme venais bien de ta css. Enleve ça :

dl, dt, dd, ul, li {
margin:0;
padding: 0;
list-style-type: none;
}

et modifie par ça :

dl, dt, dd, ul, li {
margin:0;
padding: 0;
}

li li { margin-left: 10px; }
li li li { margin-left: 20px; }


en gros, t'enleve le list-style-type:none, qui enleve l'affige du petit rond plein, ou vide ou carré, et tu precise qu'il n'y a pas de marge pour un item de liste, mais une marge de 10px pour un item de liste imbriqué, et une de 20px pour un item imbriqué dans un item imbriqué.

Voila ! j'espere avoir été clair !

edit : je voit bien le logo W3, mais tu devrais effectivement stocker l'image sur le serveur
Modifié par Toutankharton (27 Jan 2006 - 21:22)
Merci toutankharton, mais:

je ne peux enlever ce que tu dis de la css, car c'est mis ainsi pour le "menu". ce n'est pas grave si j'ai un type: none pour les "li", ca m'arrange aussi...

refaire une class pour le deuxieme et troisieme sous niveau? je ne comprend pas, normalement c'est automatique... j'ai vérifier dans les differents posts auparavant (sauf dans le cas d'un placement particulier voulu comme dans le cas d'un menu deroulant par exemple)

Oui la page est en construction... je dois nettoyer ensuite, mais comme tu le dis, elle est vraiment pas complexe... je me suis attaché a valider la CSS, le reste viendra après, j'ai repris ces données, je dois me debarasser surtout du marqueur d'estat dont je me demande comment il fait pour arriver sur le site, alors qu'il etait implementé pour un autre site, pas du tout à cette adresse...

Merci pour le coup du logo, je vais faire ce que vous m'avez dit.

Pour les tableaux, oui ce sont des tableaux, car les données qu'ils contiennent sont pour moi des données tabulaires, ce n'est pas une mise en page du site par tableau...
Modifié par Vajra (27 Jan 2006 - 23:36)
Tien en y pensant, tu me met un doute, je ne sais pas si question accessibilité malvoyant, c'est vraiment pas le top avec les tableaux que j'ai fait? ca concerne pas ce forum, mais plutot que de m'enfoncer... et que le lien est ici... J'avais compris que vu les données affichées et un simple tableau en <tr><td>... n'était pas gênant puisque restitué vocalement: Age minimum - a partir de 15 ans... etc.
?????
Ue autre question liée à la sémantique:
Si je ne veux plus mettre ce menu en déroulant, sans JS, mais en voulant conserver une architecture de type: titre de rubrique, sous titre de rubrique, devrais-je utiliser une liste de définition, dl, dt, dd ou une liste de type ul, li ? Personnellement je pencherais pour la liste de définition vu ce que j'ai lu dans les tutoriels et autres sites de références cités... mais dans le cas de ce menu précis?

Merci
Modérateur
Tu peux aussi réfléchir à utiliser les balises de titre : h1, h2, h3 etc... pour définir le titre de la rubrique, et en-dessous, une liste ul pour chaque élément de la rubrique. Certains navigateurs permettent de naviguer de titre en titre, alors ca peut être utile dans certains cas.


<hx></hx>
<ul>
<li></li>
<li></li>
</ul>

<hx></hx>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

Modifié par Tony Monast (01 Feb 2006 - 18:53)
Merci Tony Monast,

En fait, je pense que je dois garder à l'esprit le problème des utilisateurs de synthèse vocale, et comme je l'avais lu sur un autre forum (je crois que c'est webmaster-hub.com), ils "visualise" une page à partir des données qui leur sont transmises en vocal. Dans ce cas, ce serait bien que la structure codée du menu soit constamment la même et différente de toute autre liste que l'on trouvera au fil du texte, afin de la différencier.

Bien entendu, un menu étant une liste de liens, bien souvent...

Reste aussi le problème du référencement, c'est plus facile pour un moteur de recherche de trouver des "hn", des "ul", que des "dl"?

Donc je réflechis a ta solution "hn" "ul" "li", et à celle aussi de mettre en "dl" "dt" "dd". C'est à dire dans ce dernier cas, me passer des "ul", "li"
que l'on trouvera ailleurs dans le texte courant...

J'avais lu il y a quelques temps un post de Laurent Denis ici même au sujet de l'emploi des listes dans un menu. mais je retrouve plus ce post, j'ai un probleme avec la "recherche", j'ai systématiquement un message d'erreur lorsque je clique sur page suivante....

a+
Modifié par Vajra (02 Feb 2006 - 12:22)
Salut!

J'aime bien le menu que Vajra a montré dans l'URL: http://la-providence61.chez-alice.fr/CP/SIP/sip_pre.php

Selon vous y a t-il un moyen pour que lorsqu'on met deux lignes dans un item du sous menu, qu'il s'affiche sur deux lignes, et non que la deuxième ligne embarque par dessus celle de l'autre item? Ça marche comme je veux dans IE mais pas dans Firefox.

J'ai essayé de faire le même truc que toi et en changeant la valeur de: #menu li { height: pour auto au lieu de 18px. Mais ça ne change rien.

En passant, félicitation pour ce menu!

Merci
Modifié par starb (08 Aug 2006 - 23:10)
Salut,

c'est hors sujet, mais tu ne veux pas mettre un espace avant ton http pour qu'on profite du lien qui se trouve dans ton message ?

<edit>Ah Oui, et bienvenue sur le forum... Vu que tu es nouveau Smiley smile </edit>
Modifié par clb56 (08 Aug 2006 - 23:11)
starb a écrit :
Salut!

J'aime bien le menu que Vajra a montré dans l'URL: http://la-providence61.chez-alice.fr/CP/SIP/sip_pre.php

Selon vous y a t-il un moyen pour que lorsqu'on met deux lignes dans un item du sous menu, qu'il s'affiche sur deux lignes, et non que la deuxième ligne embarque par dessus celle de l'autre item? Ça marche comme je veux dans IE mais pas dans Firefox.

J'ai essayé de faire le même truc que toi et en changeant la valeur de: #menu li { height: pour auto au lieu de 18px. Mais ça ne change rien.



As-tu un lien à proposer? ce menu il me semble l'avoir trouvé (les bases) via les liens que propose Alsacreations dans ses tutoriels sur les menus Smiley murf

Toutankharton: Merci, j'ai modifié pour li li ... mais ça marche sous FF pas sous IE, je vais voir cela... en tout cas pour l'indentation tu as apporté une solution, mais je suis étonné que cela se fasse donc pas automatiquement.
Modifié par Vajra (26 Nov 2006 - 00:10)
Sujet clos
Aller à