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

Version imprimable

09/11/2008, 10h45
Sub0

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

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. ;)
09/11/2008, 13h21
Erwan31

Bonjour SubO,
pourrais tu nous dire ce que tu souhaites faire exactement ou surtout pourquoi
tu veux insérer un div dans un lien?
10/11/2008, 10h48
Sub0
Code:

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... :cry:

Merci.
10/11/2008, 10h59
Bisûnûrs
Tu peux faire l'inverse :
Code:

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.
10/11/2008, 11h04
Sub0

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

:merci:
10/11/2008, 11h05
Sub0

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

[Edit] Question bête, je suppose que oui...
10/11/2008, 11h15
Sub0
Il semblerait qu'il soit possible d'affecter un hover et active sur un div, mais ne fonctionnerait pas avec IE, dommage :
Code:

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

Code:

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:

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

:help:

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

Ne mets pas le padding sur le div mais sur le lien.
10/11/2008, 11h42
Sub0
Citation:

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:

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.

:help:
10/11/2008, 12h12
Sub0

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 ?
10/11/2008, 14h13
Bisûnûrs

Tu peux dans ce cas-là tout simplement utiliser Javascript dans tous les cas, non ?
10/11/2008, 18h26
Sub0

Citation:

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é.
12/11/2008, 11h19
Sub0

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.

:merci: