Une balise <p> dans une balise <a> =erreur, comment y reme

Bonjour a tous .

Je suis actuellement en train de corriger les erreur qu'a trouver le W3C validator sur mon site.
J'ai une erreur me disant que je n'ai pas le droit de mettre une balise <p> dans une balise <a> (la partie en haut a gauche du site)



mon code:

<h1>Evenement en cours</h1>
	<ul class='event'>
		<li>
		<a href="index.php?page=roussillon">
			<p class='date'>Du 1 juillet au 31 Aout*</p>
			<p class='piste'>Circuit du Grand Roussillon</p>
		</a>
		</li>
	</ul>

J'ai donc fait quelques essais, en remplacent mes <p> par des <span>, via le css j'ai réussi a garder mes élèments positionné correctement

le code:

<h1>Evenement en cours</h1>
	<ul class='event'>
		<li>
			<a href="index.php?page=roussillon">
				<span class='date'>Du 1 juillet au 31 Aout*</span>
				<span class='piste'>Circuit du Grand Roussillon</span>
			</a>
		</li>
	</ul>

le css:

.event span {
	float:left;
	width:200px;
}

Pourquoi ma demande alors que j'ai trouvé une solution et que le W3c semble l'accepter?! Simplement pour avoir votre avis si cette correction est viable, mais egallement si d'autre solution, peut etre plus simple, ou plus propre existe

Merci d'avance de votre attention
Modifié par meche (28 Jun 2010 - 14:02)

Hello,

Tout d'abord une explication, c'est normal que ce n'est pas valide, a est un élément en ligne et p un élément de bloc. On ne peut pas mettre de bloc dans un un élément en ligne.

Span étant un élément en ligne aussi, je pense que ce que tu as fait a l'air valide, la meilleure solution je ne sais pas, une autre solution alternative si tu veux consisterait à mettre le même lien sur les deux éléments, comme ça tu garderais les p

<p class='date'> <a href="index.php?page=roussillon"> Du 1 juillet au 31 Aout*  </a> </p>
<p class='piste'> <a href="index.php?page=roussillon"> Circuit du Grand Roussillon  </a> </p>

Modifié par saiko_sama (28 Jun 2010 - 14:23)

saiko_sama a écrit :
Hello,

Tout d'abord une explication, c'est normal que ce n'est pas valide, a est un élément en ligne et p un élément de bloc. On ne peut pas mettre de bloc dans un un élément en ligne.

Span étant un élément en ligne aussi, je pense que ce que tu as fait a l'air valide, la meilleure solution je ne sais pas, une autre solution alternative si tu veux consisterait à mettre le même lien sur les deux éléments, comme ça tu garderais les p

<p class='date'> <a href="index.php?page=roussillon"> Du 1 juillet au 31 Aout*  </a> </p>
<p class='piste'> <a href="index.php?page=roussillon"> Circuit du Grand Roussillon  </a> </p>

Merci beaucoup pour cette explication très clair !!!

J'avais effectivement penser a faire quelque chose dans le style, voir directement comme ca:

<ul class='event'>		
		<li class='date'><a href="index.php?page=roussillon">Du 1 juillet au 31 Aout*</a></li>
		<li class='piste'><a href="index.php?page=roussillon">Circuit du Grand Roussillon</a></li>
	</ul>

Mais je trouver ca bof qu'il y'ai deux liens, et j'avais peur que ca fasse "tache" voir que ca perturbe les visiteurs
Modifié par meche (28 Jun 2010 - 14:34)

meche a écrit :
Mais je trouver ca bof qu'il y'ai deux liens, et j'avais peur que ca fasse "tache" voir que ca perturbe les visiteurs

Bah disons que dans ton exemple de départ avec 2 p tu devais avoir aussi "visuellement" deux liens je pense non ? (vu que par défaut tu passes à la ligne avec un p). Les deux liens étant 100% les mêmes, sauf si le visiteur va voir ton code (drôle de visiteur ^^) il n'y verra rien

Si c'est l'écart entre tes p qui te fais dire que ça fait "tâche", un petit coup de css:

p{
margin:-1px;
}

(enfin en rajoutant les classes pour cibler que tes p là, ou les li si tu mets des li)
Visuellement parlant tu auras la même chose que ton code pas valide, mais en valide, à savoir un "faux" bloc:




Sinon j'aime bien l'idée des li qui est effectivement plus propre que les p dans des li à mon sens, je pensais que voulais mettre tes classes sur les p mais si tu peux le mettre sur le li c'est nickel Du coup pareil, tu peux mettre une margin -1 sur les li ciblés pour les "rapprocher" et en faire visuellement un seul bloc
Modifié par saiko_sama (28 Jun 2010 - 15:27)

salut
ta solution d'utiliser des span, dans la balise <a></a> est valide.
pas besoin d'essayer de trouver autre chose.

Merci beaucoup pour vos avis !

J'ai finalement opté pour une disposition de type:

<ul class='event'>
	<li>
		<a href="index.php?page=roussillon">
			<span class='date'>Du 1 juillet au 31 Aout*</span>
			<span class='piste'>Circuit du Grand Roussillon</span>
		</a>
	</li>
</ul>

Vous trouvez l'encart bien lisible (en haut a gauche) ? : http://bapteme-drift.com

Si cette question gène ou qu'elle n'a pas sa place, n'hésitez pas a me le dire

Hello

Perso j'ai du mal avec la police avec serif (c'est du times je crois?) en blanc que je trouve un peu petite, mais bon, c'est mon avis personnel je suis pas fan de cette police que je ne trouve pas adaptée du tout au web et je suis myro comme une taupe

Pour la police, c'est celle par defaut dunavigateur, aucune n'a été defini

Même avec la bordure jaune pour les dates en blanc tu trouve ca pas trop lisible ?!

Merci de ton avis en tous cas