[Résolu] Un div peut-il etre cliquable ?

Bonjour,

Je me pose une question: un div peut-il être cliquable ?

Soit un div contenant une image et un peu de texte. Y a t-il moyen de le rendre cliquable dans son ensemble ?

Merci !
Modifié par pp51 (02 Jul 2006 - 23:15)

non, car un élément de type block comme <div> ne peut pas être contenu dans un élément de type inline comme <a> (et pas la peine de mettre a {display:block}, le validateur n'accepte pas)

Par contre tu peut ecrire

<a href=""><span>Mon texte</span> <img src="" /></a>

car <img> est aussi inline

Jusqu'a hier, le validateur n'a jamais refusé a display: block;
Mais peut-etre qu'il a changé

Salut,

Une possibilité de solution plus ou moins satisfaisante :
http://clb56.freezee.org/conteneur_lien.php

et en quoi est-ce plus interessant qu'un simple ?

#bloc a {
width; largeur du div;
height: hauteur du div;
display: block;
}

Modifié par jp94 (28 Jun 2006 - 14:46)

jp94 a écrit :
et en quoi est-ce plus interessant qu'un simple ?
[code]
#bloc a {
width; largeur du div;
height: hauteur du div;
display: block;
}

Ben grosso modo ça part effectivement de ce que tu indiques

Mais en l'état cela ne suffirait vraiment pas pour obtenir le rendu souhaité

Sinon il y a toujours le js :
<div onclick="...">

QuentinC a écrit :
Sinon il y a toujours le js :
<div onclick="...">

Oui pourquoi pas... En supprimant le lien <a id="ce_lien" href="adresse_lien">texte lien</a> via javascript ça doit pouvoir coller effectivement.
Modifié par clb56 (28 Jun 2006 - 08:16)

QuentinC a écrit :
Sinon il y a toujours le js :
<div onclick="...">

beurk ! Et ceux qui on coupé javascript, ils font comment ?
Modifié par nORKy (28 Jun 2006 - 14:02)

Salut,

Pour eux seul le lien initial sera actif, ils pourront donc accéder à la page appelée par le lien mais seulement en cliquant sur celui ci et plus n'importe ou sur le <div>.

Enfin je crois...

nORKy a écrit :


beurk ! Et ceux qui on coupé javascript, ils font comment ?

Ben si le lien est supprimé par javascript en même temps que l'on rend le div cliquable en js. Alors si le javascript est inactif chez le client dans le même temps que le div n'est plus cliquable, le lien retrouve toute sa fonctionnalité. donc il n'y a aucune obstruction.

PS : Merci d'éviter l'association canonique entre javascript et BEURK

bon et bien merci pour vos réponses...

La réponse à la question initiale est donc non

Bonne nuit

Heu...

Tu n'as pas du tout suivre là...

C'est tout à fait possible au contraire, que ce soit en css ou en javascript.

Donc la réponse serait plutôt oui
Modifié par clb56 (29 Jun 2006 - 12:14)

Bonjour,

alors comme je n'avais pas tout compris, j'ai fait le test ici: http://www.princessedunjour.com

L'image et le lien sont bien cliquables ensemble.

Par contre, je me demande comment faire pour que le texte soit centré en dessous de l'image ?

Voici le xhtml

<div id="produit1">
<a href="#"><img src="images/parure_camelia.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/><span>camélia</span></a>
</div>

et la css

#produit1 a {
width: 120px;
text-decoration: none;
color: #666;
}
img {
border-width: 0;
border-style: none;
}

Merci !
Modifié par pp51 (19 Nov 2007 - 20:54)

bonjour,

avec ton extrait de code hors contextes reelle, je te propose d'essayer d'appliquer ces regles css : (a priori en IE6,opera8.54 et ff 1.5.0.4 accepte ceci avec ou sans doctype)

 a {
text-decoration: none;
color: #666;
text-align:center;/* centre le texte */
/* lignes suivantes au lieu d'un 'float:left;' ou , 'display:block;' + 'width:120px;' */
display:table-cell;/* pour ff */
display:inline-block;
padding:2px;/* pour eviter de les coller les uns aux autres si plus d'un sur la même ligne */
}
img {
border-width: 0;
border-style: none;
display:block;/*provoque le passage a la ligne * avant et apres, dimensionne en largeur la balise <a>
 si pas de mots plus large que l'image
IE centreras alors l'image sur le texte, et pas les autres */
}

Commentaires succint aux coté des regles 'css' .

++

Bonsoir gcyrillus,

alors là, je dis chapeau

J'ai appliqué tes règles css et cela fonctionne impec !

J'avoue ne pas avoir tout compris , mais le résultat est là.

En parlant de doctype, je vais en fait avoir cela sur mon XHTML

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="identifier-url" content="http://www.aaa.com" />
<title>Le titre</title>
<meta http-equiv="content-language" content="fr" />
<meta name="description" content="xxx" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="test.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<style type="text/css">
</style>

Je vais manitenant voir si cela peut aussi s'appliquer au reste de ma page.

En tout cas, merci beaucoup !
Modifié par pp51 (02 Jul 2006 - 23:15)