<DIV> cliquable et validation W3 ?

**Mister Paul** · 20/11/2013, 06h10

Bonjour,

j'ai rendu tout un bloc cliquable, mais j'ai des messages d'erreurs lors de la validation W3C

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>").

L'extrait de code html/php qui génère ces erreurs :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="services">
<a href="<?php echo $instance['column_title_link']; ?>" style="display:block;width:100%;height:100%;">
	<h3><?php echo $instance['column_title']; ?></h3>
 
	<?php if ( $columnicon ) { ?>
	<span class="service-icon">
		<?php echo $instance['column_icon']; ?>
	</span>
	<?php } ?>
 
	<div class="clear"></div>
 
	<p><?php echo $instance['column_content']; ?></p>
</a>
</div>

Je ne vois pas comment solutionner ça…

Comment faire ?

Merci pour l'aide
Paul

**Muchos** · 20/11/2013, 08h33

The mentioned element

Ç'aurait été bien de nous dire lequel!

One possible cause for this message is that you have attempted to put a block-level element inside an inline element

C'est exactement ce que vous avez fait avec votre balise A.

**Bovino** · 20/11/2013, 08h37

Il n'y a aucun rapport avec le fait que la div soit cliquable...

Il suffit en fait de lire le message d'erreur qui est suffisamment explicite : tu as mis un élément à un endroit où il ne doit pas se trouver, en particulier des éléments de type block (h3, div, p) dans un élément de type inline (a).

Tu peux soit passer à un doctype HTML5 qui autorise ce type d'imbrication pour les liens, soit revoir la structure de ta page pour qu'elle soit sémantiquement correcte, soit considérer que la validation n'est pas si utile que ça.

Et pour rappel, sur les forums liés au navigateur (HTML, CSS, JavaScript), les règles spécifiques demandent de présenter le code généré et non le code PHP...

**Mister Paul** · 20/11/2013, 17h05

Oops désolé pour le code PHP à la place du HTML…

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(...)
<div class="services">
<a href="http://www.xxxx.com" style="display:block;width:100%;height:100%;">
<h3>TITRE</h3>
 
<div class="clear"></div>
 
<p><span style= 'font-weight: bold'>LOREM IPSUM</p>
</a>
</div>

- Je n'ai jamais mis de doctype HTML5 et j'imagine que je devrais changer (?) pas mail de choses par ailleurs si je devais passer du transitional au html5…
- Effectivement ne pas se soucier de la validation W3 est tentant mais bon ça fait moins propre quand même...
-Quand tu dis

revoir la structure de ta page

Je dois certainement manquer d'imagination (et de connaissances) mais je ne vois pas comment m'en sortir…
Hum... un petit coup de pouce ?

**Bovino** · 20/11/2013, 17h13

Je n'ai jamais mis de doctype HTML5

C'est pourtant plus simple !

Remplace l'existant par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!doctype html>

et reteste la validation.

EDIT : enfin... pense aussi à fermer la balise <span>

**Mister Paul** · 20/11/2013, 18h06

Oui ça semblait bien passer…
Je dis "semblait" parce que je suis en vadrouille pour quelques jours sans vrai lien stable internet : laptop en partage de connexion avec mon iPhone relié à internet… donc là je me retrouve en Edge. Longs blocages successifs et lenteur d'escargot au mieux :
trop dangereux de toucher au site en direct comme ça…

Je crains les effets induits indésirables en passant à ce doctype un site développé avec un doctype XHTML 1.0 Transitional...
Il peut y avoir des soucis ?