[W3C] <a href> - Block-level inside inline

**Sub0** · 09/11/2008, 10h45

Bonjour.

Je suis vraiment embêté avec ce problème : J'ai besoin d'intégrer un hyperlien à un bloc (div & table).
Le validateur W3C me signale qu'un hyperlien est de type "INLINE" et ne peut contenir un élément de type "BLOCK".
J'ai pensé à remplacer l'hyperlien par une balise <form>, mais peut-être avez-vous mieux à me proposer...
surtout que je veux éviter d'utiliser Javascript et que je ne pourrais pas faire autrement avec un formulaire pour faire son submit sur le onclick du bloc.
Bref, je dois absolument éviter d'utiliser Javascript pour cette fonctionnalité, c'est important dans ce projet.

Je croise les doigts que vous pourrez m'aider.

Merci d'avance.

**Erwan31** · 09/11/2008, 13h21

Bonjour SubO,
pourrais tu nous dire ce que tu souhaites faire exactement ou surtout pourquoi
tu veux insérer un div dans un lien?

**Sub0** · 10/11/2008, 10h48

Code :

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

1
2
3
<a href="#" title="" target="_self">
  <div style="border:2px solid black;padding:10px;">ok</div>
</a>

J'ai besoin d'un hyperlien pour obtenir les actions CSS hover et active et que ces actions se produisent sur la totalité du div.
J'ai aussi besoin de la même chose avec une table à la place du div...

Merci.

**Bisûnûrs** · 10/11/2008, 10h59

Tu peux faire l'inverse :

Code :

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

1
2
3
<div>
  <a href="#" title="" target="_self">ok</a>
</div>

En mettant ton lien en display:block et en lui donnant les dimensions 100% en hauteur et en largeur.

**Sub0** · 10/11/2008, 11h04

ok, je vais essayer comme ça. Je vous tiens au courant.

**Sub0** · 10/11/2008, 11h05

Et pour la table ?
Il faut que je mette le lien à chaque cellule ?

[Edit] Question bête, je suppose que oui...

**Sub0** · 10/11/2008, 11h15

Il semblerait qu'il soit possible d'affecter un hover et active sur un div, mais ne fonctionnerait pas avec IE, dommage :

Code :

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

1
2
#mydiv { background-color: blue; }
#mydiv:hover { background-color: red; }

**Sub0** · 10/11/2008, 11h29

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
 
<head>
  <title>New Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
  <style type="text/css">
  a { display:block; width:100%; height:100%; }
  #mydiv { background-color:blue; border:2px solid black; padding:10px; }
  #mydiv a:hover { background-color:red; }
  </style>
</head>
 
<body>
  <div id="mydiv">
    <a href="#" title="">
    ok
    </a>
  </div>
</body>
</html>

Le souci est que le hover se produit sur le lien et non plus sur le conteneur...

Il aurait fallu que ceci fonctionne :

Code css :

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

a:hover #mydiv { background-color:red; }

**Bisûnûrs** · 10/11/2008, 11h36

Ne mets pas le padding sur le div mais sur le lien.

**Sub0** · 10/11/2008, 11h42

Envoyé par Bisûnûrs

Ne mets pas le padding sur le div mais sur le lien.

Je ne suis pas sûr d'avoir bien le choix puisqu'en réalité, je dois faire disparaître le conteneur lorsqu'on clique dessus sans utiliser Javascript.
Avec la solution de mettre l'hyperlien dans le conteneur, je ne ferais disparaître que l'hyperlien et non le conteneur :

Code :

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

1
2
3
  a { display:block; width:100%; height:100%; }
  #mydiv { display:block; border:2px solid black; padding:10px; }
  #mydiv a:active { display:none; }

J'aurai pu utiliser l'hyperlien comme conteneur mais celui contient d'autres divs...
Et remplacer tous mes conteneurs, mais on ne peut pas imbriquer des hyperliens, j'en sors plus.
Mon problème est simple finalement: Comment masquer un conteneur de type block lorsqu'on clique dessus et sans utiliser JS.

**Sub0** · 10/11/2008, 12h12

Ce que je demande est impossible je crois.

• Alors je vais devoir détecter si Javascript est activé pour réaliser la fonction avec onclick.
• Si Javascript est désactivé, avec les directives d'IE, laisser mon code tel quel pour IE.
• Pour les autres navigateurs, utiliser directement l'action CSS active sur le div.

Simplement, avec IE et JS désactivé, mon code n'est pas valide W3C mais fonctionne malgré tout.

Qu'en pensez-vous ?

**Bisûnûrs** · 10/11/2008, 14h13

Tu peux dans ce cas-là tout simplement utiliser Javascript dans tous les cas, non ?

**Sub0** · 10/11/2008, 18h26

Envoyé par Bisûnûrs

Tu peux dans ce cas-là tout simplement utiliser Javascript dans tous les cas, non ?

En fait, il faut que ça fonctionne même si Javascript est désactivé.
Par contre, je l'utilise si il est activé.

**Sub0** · 12/11/2008, 11h19

Bon, j'ai résolu le problème en détectant si javascript est activé et en ajustant le code en fonction. Ainsi, mon code est valide W3C seulement si Javascript est activé, mais reste fonctionnel dans tous les cas.

[W3C] <a href> - Block-level inside inline

HTML

Discussions similaires

Partager

Partager