5568 sujets

Sémantique web et HTML

Validation des éléments d'une liste

Bonjour,

Je continue dans mon apprentissage des éléments valides. Mais avant d'aller arpenter le dessert comme Ken, je vais quand même passer par vous.

Voici ma liste:

<ul id="listerando">
                 	<li><h2><a href="#controle">Le Garlaban entre Aubagne et Allauch</a></h2>
                   			<ul class="souslisterando" >
                                   <li><a href="#controle">Col de Garlaban</a></li> 
                                  <li><a href="#attaque">Col du marseillais</a></li> 
                                  <li><a href="#concretiser">Tour du Taoumé</a></li>
                                  <li><a href="#concretiser">La Parloire</a></li>
                                  <li><a href="#concretiser">Col du Tubé</a></li>
                            </ul></li> 
                            &nbsp;<br/>
                   <li><h2><a href="#controle">Les Calanques de Marseille et Cassis</a></h2>
                   			<ul class="souslisterando" >
                                   <li><a href="#controle">Calanque de Sugiton</a></li> 
                                  <li><a href="#attaque">Calanque d'Envau</a></li> 
                                  <li><a href="#concretiser">Calanque de Port Pin</a></li>
                                  <li><a href="#concretiser">Col de Sormiou</a></li>
                                  <li><a href="#concretiser">Belvédère d'En Vau</a></li>
                                  <li><a href="#concretiser">Ruines du Cap Gros</a></li>
                                  <li><a href="#concretiser">Col de la Candelle</a></li>
                                  <li><a href="#concretiser">Cirque des Pételins</a></li>
                                  <li><a href="#concretiser">Ravin de Gorgue Longue</a></li>
                                  <li><a href="#concretiser">Tour de Luminy</a></li>
                                  <li><a href="#concretiser">Rocher des Goudes</a></li>
                 			</ul></li> 
</ul>


Et voici le message d'erreur :
a écrit :

# Error Line 93, Column 22: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag.

<li><h2><a href="#controle">Les Calanques de Marseille et Cas

&#9993;

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").




Suis dans l'embarras...
Modifié par lodemars (23 Jan 2009 - 10:48)
salut,

<li><h2><a href="#controle">Les Calanques de Marseille et

a écrit :

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Salut,

Le h2 dans le li, c'est parfaitement correct, c'est pas là le souci.
Ton problème vient du 
&nbsp;<br/>
entre tes deux principaux li, puisque la balise ul n'accepte que des li comme enfants.
Le message d'erreur est incomplet ?

Le problème vient de la présence de &nbsp</br> dans le <ul> mais pas dans un <li>.

<ul> ne peut avoir comme élément enfant QUE des <li>.

De plus la structure de ton menu est un peu bancale. Il serait préférable de faire comme suit

<h2><a href="#controle">Le Garlaban entre Aubagne et Allauch</a></h2>
<ul id="listerando">
  <li><a href="#controle">Col de Garlaban</a></li> 
  <li><a href="#attaque">Col du marseillais</a></li> 
</ul>
h2><a href="#controle">Les Calanques de Marseille et Cassis</a></h2>
<ul class="listerando" >
  <li><a href="#controle">Calanque de Sugiton</a></li> 
  <li><a href="#attaque">Calanque d'Envau</a></li> 
</ul>
Asumbaa a écrit :
Salut,

Le h2 dans le li, c'est parfaitement correct, c'est pas là le souci.
Ton problème vient du 
 <br/>
entre tes deux principaux li, puisque la balise ul n'accepte que des li comme enfants.


Arf effectivement.
Cependant, quand j'essaye avec :

#listerando li{
margin-top:15px;
}


pour avoir un espace entre les deux sous listes, il applique également cette marge au <li> des sous listes.

J'ai essayé de rectifier avec :
.souslisterando li{
margin:0;
}


mais ça marche pas.
lodemars a écrit :


Arf effectivement.
Cependant, quand j'essaye avec :

#listerando li{
margin-top:15px;
}


pour avoir un espace entre les deux sous listes, il applique également cette marge au <li> des sous listes.

J'ai essayé de rectifier avec :
.souslisterando li{
margin:0;
}


mais ça marche pas.



Edit : Laurie-Anne, je crois que tu m'as mis sur la bonne piste.

Merci à tous.
lodemars a écrit :
mais ça marche pas.

Problème de priorité des sélecteurs.

Et si tu veux créer un écart à un endroit précis, qu'est-ce qui t'empêche de rajouter une classe à un élément précis? Ça sera toujours plus propre que de rajouter un &nbsp;<br /> dans un UL...
Florent V. a écrit :

Problème de priorité des sélecteurs.

Et si tu veux créer un écart à un endroit précis, qu'est-ce qui t'empêche de rajouter une classe à un élément précis? Ça sera toujours plus propre que de rajouter un &nbsp;<br /> dans un UL...


Oui, il fut un temps ou j'abusais par facilité des &nbsp;<br />. Je me corrige, en tout cas j'essaye.

Priorité des sélecteurs... ok. Je me penche sur la question.
Merci.
Sujet clos
Aller à