Comment puis-je faire en sorte qu'un élément Div agisse comme un lien cliquable dans XHTML 1.1 valide ?

Transformer un Div en lien cliquable avec Valid XHTML 1.1

Plutôt que de transformer directement un div en lien, il existe une technique simple pour obtenir la même fonctionnalité tout en conservant XHTML 1.1 valide :

1. Créez votre div content : Utilisez des techniques CSS normales et du HTML valide pour concevoir votre div comme vous le souhaitez.
2. Incluez un lien dans le div : Placez un lien dans le div qui servira de lien par défaut lien lorsque l'utilisateur clique sur le div.
3. Imbré un span vide à l'intérieur du lien : À l'intérieur du lien, insérez un span vide tag ( ) sans barre oblique de fermeture.
4. Attribuer la position : relative au div : Définissez la propriété de position du div sur relative.
5. Stylez l'étendue vide : Appliquez le CSS suivant à l'espace vide span:

{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  z-index: 1;

  /* Fixes overlap error in IE7/8, ensure you have an empty gif */
  background-image: url('empty.gif');
}

Cela créera une couche transparente sur le div qui le recouvre complètement. Puisque l'étendue est à l'intérieur d'un lien, elle se comporte comme une zone cliquable.

6. Ajustez le z-index pour d'autres liens (facultatif) : Si vous avez des liens supplémentaires dans le div, attribuez-leur une position : relative et une valeur d'index z plus élevée (par exemple, 2) pour garantir qu'ils sont affichés devant l'étendue par défaut lien.

En suivant ces étapes, vous pouvez créer un div qui fonctionne comme un lien tout en conservant un balisage XHTML 1.1 valide, garantissant l'accessibilité et l'optimisation du référencement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!