Page VRAIMENT non conforme W3C. Qu'est-ce qui ne va [RÉSOLU]

Voilà, j'ai fait une page de contact http://www.citronlime.com/contact.html que j'ai finalement réussi à rendre compatible avec Explorer.

Malheureusement, elle n'est pas du tout conforme aux standards W3C.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.citronlime.com%2Fcontact.html

Je ne saisis pas trop pourquoi elle ne l'est pas. On dirait qu'on m'interdit d'utiliser la balise <h3> et une classe dans un élément de liste.

Comment en arriver au même rendu en contournant ces contre-indications?

Merci de votre aide.

Voici le code d'un des éléments de ma page qui est fautif.

		
<li>		
	<a href="javascript:;">
	<img src="images/photo.gif" alt="Photo d'un membre du personnel" />
	<h3>PASCAL</h3>
	<strong>Travailleur de rue</strong><br />
	<div class="pagette">cellulaire : 514.688.8746</div>
	</a>			
</li>

Modifié par largowin (07 Jun 2006 - 23:44)

Merci mais, de cette façon, je ne peux conserver l'effet du survolé et j'aimerais bien qu'il y ait un effet visuel lorsqu'on passe la souris dessus.

Est-il possible de garder un tel effet? Il me semble que j'ai déjà vu un truc semblable ailleurs.

J'ai essayé d'enlever ce truc et de le remplacer par une css à <li> mais lorsque je passe au-dessus, le cadre bouge légèrement.
Modifié par largowin (05 Jun 2006 - 23:45)

Dans l'idéal il faudrait utiliser la pseudo-classe CSS :hover. Le problème, c'est qu'IE ne la comprend que pour les liens. Et qu'en XHTML (ou peut-être seulement en XHTML Strict ?), les balises <a></a> (et plus généralement tous les éléments de type en-ligne) ne doivent pas englober des éléments de type bloc.

Dans ton cas, ça serait gérable en se passant du h3, et en utilisant des span, par exemple :

<li>
	<a href="#">
		<img src="images/photo.gif" alt="Photo d'un membre du personnel" />
		<strong>PASCAL</strong><br />
		<span class="fonction">Travailleur de rue<span><br />
		<span class="telephone">cellulaire : 514.688.8746</span>
	</a>
</li>

Mais bon, ça fait tout de même un lien dans le code qui ne sert à rien d'autre qu'à avoir un effet visuel dans IE. Du coup, pour ma part, je me contenterais de l'effet visuel via le système standard (li:hover {bla bla}), et tant pis pour l'ami IE6. Par contre il me semble qu'IE7 se dépatouille mieux avec la pseudo-classe :hover.

largowin a écrit :
J'ai essayé d'enlever ce truc et de le remplacer par une css à <li> mais lorsque je passe au-dessus, le cadre bouge légèrement.

li {border: dotted 1px white;}
li:hover {border-color: gray;}

Et plus rien ne bouge.

Très bonne idée, mais il y a encore beaucoup d'erreurs (bcp moins par contre) pour la validation.

Là, je semble avoir un problème avec tous les li.
J'ai comme l'impression que l'on ne peut pas mettre ce genre de truc au début (je parle du <ul id=....]:

	
<ul id="galerie-lien">

<li>		
       <img src="images/photo.gif" alt="Photo d'un membre du personnel" />
	 <h3>PASCAL</h3>
	 <strong>Travailleur de rue</strong><br />
	 <div class="pagette">cellulaire : 514.688.8746</div>
</li>

J'ai essayé en mettant

<div id="galerie-lien"
<ul>

mais ça change complètement l'affichage.
Si c'est ça, je ne le corrigerai pas, car ça m'a pris trop de temps pour faire en sorte que ce soit compatible avec IE[/code]

Utilise du javascript pour ton menu survolé, ça ira mieux pour toi. Ne supprime rien d'autre à part tes pseudo-liens qui ne servent à rien.

+1 pour le conseil de QuentinC

largowin a écrit :
Très bonne idée, mais il y a encore beaucoup d'erreurs (bcp moins par contre) pour la validation.

Normalement, une erreur a un intitulé et un descriptif, qui devraient permettre de savoir ce qui ne va pas…

a écrit :
J'ai comme l'impression que l'on ne peut pas mettre ce genre de truc au début :

<ul id="galerie-lien">
<li>
</li>

On peut tout à fait. Ton impression doit être erronée…

largowin a écrit :
[À QuentinC] Je crois que tu t'es trompé de post... Je n'ai aucun problème avec mon menu... J'en ai avec les éléments d'une liste.

Quentin a peut-être lu en diagonale ton message. De plus, les listes sont très souvent utilisées pour faire des menus, et les effets de survol pour dévoiler des sous-menus. D'où la confusion, je suppose.

Mais le conseil reste bon, pour ton effet cosmétique au survol. Tu peux le faire en CSS et compatible navigateurs récents uniquement, ou en javascript et compatible avec la plupart des navigateurs du marché (pour peu que javascript soit activé).

mpop a écrit :


Normalement, une erreur a un intitulé et un descriptif, qui devraient permettre de savoir ce qui ne va pas…

Je référais au lien placé dans mon premier post et qui était celui du validateur W3C http://validator.w3.org/check?uri=http%3A%2F%2Fwww.citronlime.com%2Fcontact.html

Il indique des erreurs au niveau des <li>

a écrit :
Tu peux le faire en CSS et compatible navigateurs récents

Il me semble que c'est justement ça que j'essaie de faire avec ce que tu m'as donné comme informations. Je me fous pas mal que ce ne soit pas lu par certains navigateurs puisque ce n'est qu'un effet de style qui ne sert à rien finalement (mais que je trouverais intéressant de garder).

Par contre fais attention si tu utilises l'effet CSS, à ne pas mettre du display:none partout par défaut, sinon les browsers non compatibles (p.ex. IE) n'afficheront jamais les sous-menus...

QuentinC a écrit :
Par contre fais attention si tu utilises l'effet CSS, à ne pas mettre du display:none partout par défaut, sinon les browsers non compatibles (p.ex. IE) n'afficheront jamais les sous-menus...

Hé hé Quentin, t'es vraiment à la ramasse aujourd'hui !
Il s'agit d'une liste dans le contenu de la page, pas d'un menu déroulant ou d'une chose du genre. Donc il n'y a rien de caché, tout est montré, mais les li seront agrémentés d'un petit effet visuel au survol, juste pour le fun.

Merci tout de même pour les commentaires, mais j'aurais bien aimé comprendre ce qui empêche à ma page d'être validée

largowin a écrit :
Merci tout de même pour les commentaires, mais j'aurais bien aimé comprendre ce qui empêche à ma page d'être validée

Ben il faut lire ce que dit le validateur, hein !
Il dit ligne 47, donc tu regardes ligne 47 :

40	<li>
41			
42					<img src="images/photo.gif" alt="Photo d'un membre du personnel" />
43						<h3>DENIS</h3>
44						<strong>Travailleur de rue</strong><br />
45						<div class="pagette">cellulaire : 514.816.8746</div>
46				
47			<li>

Et que vois-tu ? Oh, un </li> qui manque (l'élément li ouvert à la ligne 40 n'est pas refermé). Ceci explique cela.

Sinon, il te dit aussi :

a écrit :
Error Line 134 column 6: end tag for "li" omitted, but OMITTAG NO was specified.
Info Line 40 column 3: start tag was here.

Ce qui veut dire : vous fermez un ul, pourtant un li n'est pas fermé. Et pour information, ce li commençait à la ligne 40.

Et voilà, à corriger.

C'est marrant, Tidy ne me l'avait pas trouvée cette erreur. Il est peut-être moins fiable.

Eh bien.... Ça a l'air toujours plus gros que ce l'est en réalité

En fait, au lieu de vérifier dans mon code, je faisais la vérification avec un programme spécialement fait pour vérifier la syntaxe qui me disait qu'il n'y avait aucune erreur...

Merci énormément mpop pour ta générosité!