28172 sujets

CSS et mise en forme, CSS3

Imbriquer des div dans une balise a

Bonjour à tout le monde.

Je suis habitué à utiliser du css mais je me posais une question quant aux bonnes pratiques de qqch que je voulais faire.

Est-ce qu'il existe des recommandations qui déconseillent l'utilisation de balises du genre Div dans un lien (<a>) ?

Mon idée serait de faire une zone avec quelques éléments mais que l'ensemble soit cliquable.

Du genre :


<a href='#'>
 <div id='titre'> </div>
 <img src... />
 <div id='descriptif'>Descriptif</div>
</a>


J'ai tourné sur google et j'ai recherché ici, mais les mots clés que j'ai utilisés ne m'ont pas apporté de réponses probantes.

Merci d'avance.
XIV-V a écrit :
Est-ce qu'il existe des recommandations qui déconseillent l'utilisation de balises du genre Div dans un lien (<a>) ?


Oui, l'élément <a> est de type en-ligne et ne doit donc contenir que des éléments de type en-ligne. L'élément <div> est de type bloc, ça ne passe donc pas.

Il est préférable d'utiliser <span>.
Et ton argument tiens tjs si je met le <a> en display:block?

Le truc c'est que j'ai besoin de définir une hauteur.
Modifié par XIV-V (12 Jun 2009 - 10:21)
XIV-V a écrit :
Et ton argument tiens tjs si je met le <a> en display:block?

Eh... Oui. Là il s'agit de standard HTML donc uniquement de la structure donc le style appliqué on s'en fiche (pour ce problème de validité de code).

XIV-V a écrit :
Le truc c'est que j'ai besoin de définir une hauteur.

C'est là que le CSS entre en jeu. display:bloc sur un span et le tour est joué Smiley cligne
Merci beaucoup pour ton lien Felipe. Voilà quelques feintes que je n'avais pas encore assimilé.

Alors du coup si on ne peut pas mettre de balise %block dans une balise %inline (comme dans mon exemple plus haut), comment puis-je faire pour rendre un contenu complexe entièrement cliquable ?

Si je reprend ma structure de tout à l'heure :


<a href='#'>
   <div> </div>
   <img />
   <div></div>
</a>


C'est pas "permis". Mais alors sans utiliser de javascript, comment rendre cet ensemble de divs cliquables comme s'il n'étaient qu'un ?

J'aimerais éviter qqch du genre 


<div id='maBox'>
   <img />
   <div id='contenuBox'>
        <a href='#'>mon lien </a>
   </div>
</a>


Dans ce cas, seul le tout petit lien sera cliquable. Si le lien fait disons 50x12 pixels, et qu'il y a une grande image par dessus disons de 100x100px, l'image n'aura pas d'événement click.


Voici une hypothétique solution que j'envisage pour cette structure. Dites moi si elle est viable :

Faudrait-il mettre #maBox en relative, et l'<img> et #contenuBox en absolute. La balise <a> serait passée en display:block et sa taille serait définie à la même taille que #maBox puis ensuite positionné correctement avec les padding.

Ainsi le <a> serait imbriqué dans #maBox, mais occuperais tous l'espace et la totalité de la box serait cliquable.

Un peu fourbe tout ca. Qu'en dites vous ?
Modifié par XIV-V (12 Jun 2009 - 12:58)
Salut,

s'il s'agit d'une image il n'y a pas de problème :
<a href="lien.php"><img src="..." alt="..." width="..." height="..." /></a>
Dans les autres cas il faut modifier les dimensions du lien :
a {
   display: block;
   width: ...;
   height: ...;
}
Et pour un autre élément (DIV, P, ...) il faut utiliser JavaScript.
Modifié par Heyoan (12 Jun 2009 - 13:04)
Sujet clos
Aller à