Partage
  • Partager sur Facebook
  • Partager sur Twitter

Faire d'une div un lien

Comment faire d'une div contenant de l'image et du texte un lien ?

19 janvier 2014 à 18:05:04

Bonjour,

Je me heurte aujourd'hui à un problème et malgré mes recherches je n'ai pas trouvé de solution. J'aurais besoin qu'une div contenant du texte et de l'image se comporte comme un lien et soit cliquable sur toute sa surface. Or en ce moment il n'y que lorsque la souris passe au-dessus du texte ou de l'image qu'elle est cliquable. Voici le code concerné :

Voici à quoi ces div ressemblent actuellement : http://www.retourverslecinema.com/films/annees-2010/2013-2/

Le code html de la div en question :

<div id="lien-fiche-film"><a title="Promised Land" href="http://www.retourverslecinema.com/films/annees-2010/2012-2/promised-land/"><img class="alignnone size-full wp-image-4184" alt="promised land" src="http://www.retourverslecinema.com/wp-content/uploads/2013/10/promised-land.jpg" width="203" height="300" /></a><h3><a title="Promised Land" href="http://www.retourverslecinema.com/films/annees-2010/2012-2/promised-land/">Promised Land</a></h3><p><a title="Promised Land" href="http://www.retourverslecinema.com/films/annees-2010/2012-2/promised-land/">Steve Butler et sa collègue Sue Thomason, employés de la compagnie pétrolière Global, arrivent dans une bourgade de campagne du Nord-Est des États-Unis avec pour but de racheter les terres des paysans en leur promettant de faire fortune avec l’or qu’ils ont sous les pieds. Tout se corse pour eux alors qu’un enseignant respecté critique leur projet et qu’un activiste écologique fait irruption dans la petite ville… </a></p></div>


Et son code css :

#lien-fiche-film {
	transition-property: background;
	transition-duration: 250ms;
	width: 75%;
	background: #ce1a27;
	vertical-align: top;
	max-width: 800px;
	max-height: 500px;
	margin-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	padding: 10px;
	overflow: hidden;
}

#lien-fiche-film:hover {
	background: #bf1521;
}

#lien-fiche-film a p {
	display: inline-block;
	position: relative;
	vertical-align: top;
	font-size: 14px;
	text-decoration: none;
	color: #fff;
	float: right;
	width: 100%;
	height: 100%;
}

#lien-fiche-film img {
	transition-property: opacity;
	transition-duration: 250ms;
	display: inline-block;
	position: relative;
	margin-right: 10px;
	float: left;
	width: 30%;
	height: auto;
}


Merci d'avance pour vos réponses !

  • Partager sur Facebook
  • Partager sur Twitter
Florian
19 janvier 2014 à 18:42:18

Pour rendre ta div cliquable tu fais simplement comme ceci :

<a href="le_lien.com">

   <div class="maDiv">
     <!-- Contenu de la div -->
   </div>

</a>



  • Partager sur Facebook
  • Partager sur Twitter
19 janvier 2014 à 18:51:34

Soit la proposition de Cocksipus, soit une div avec un seul lien contenant le h3 et le p, en display: block, avec height: 100%, il devrait prendre toute la taille de son parent. (un détail : un id est censé être unique sur une page, donc transforme tes id="lien-fiche-film" en class="lien-fiche-film" dans ton html, et #lien-fiche-film en .lien-fiche-film dans ton css)
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

19 janvier 2014 à 19:02:29

OK merci à tous les deux,

Cocksipus : l'éditeur de wordpress ne supporte pas cette solution : il n'enregistre pas le lien quand je le code autour d'une div.

AkaiKen : j'ai aussi essayé ta proposition, le problème étant que le texte se retrouve sous l'image dans un tel cas.

  • Partager sur Facebook
  • Partager sur Twitter
Florian
19 janvier 2014 à 19:33:33

À quoi te sert cette déclaration :

#lien-fiche-film a p {
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    float: right;
    width: 100%;
    height: 100%;
}

car avec ton html actuel tu n'en as pas besoin.

Ensuite, le texte se retrouve sous l'image car tu as mis l'image dans le titre. Sors-l'en, tout en englobant tout dans un lien, et tout ira bien. Enfin, pas tout à fait, car c'est là qu'intervient ma première question : si tu mets tout ton contenu dans un lien, #lien-fiche-film a p se déclenche, et ça fait un rendu bizarre.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

22 janvier 2014 à 9:32:32

Merci beaucoup mais ça ne marche toujours pas, le CMS refuse de créer un lien qui englobe tout le contenu et fait automatiquement un lien pour l'image, un pour le titre et un pour le texte...
  • Partager sur Facebook
  • Partager sur Twitter
Florian
22 janvier 2014 à 10:28:40

Tu es sous Wordpress, c'est ça ? Chacun de tes blocs est un article ? Ou bien c'est une grosse page / article où tu crées tous les blocs d'un coup ?
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

22 janvier 2014 à 13:15:50

Mes div sont dans deux champs personnalisés différents, un pour les "Top" et un pour les "A retenir". Ce sont tout bêtement des liens vers les pages correspondants aux films. Je les créé manuellement à chaque fois que je rajoute une page.
  • Partager sur Facebook
  • Partager sur Twitter
Florian
22 janvier 2014 à 19:30:01

Salut,

tu n'as pas besoin de la div si tu mets display: block au <a>...
Ensuite tu lui applique tout les styles que tu as mis à la div.

Petite remarque, un ID doit être unique dans une page et là, toutes tes div ont le même.

  • Partager sur Facebook
  • Partager sur Twitter
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
26 janvier 2014 à 18:21:11

Merci mais je ne peux pas recourir à cette méthode car comme je l'ai déjà dit plus haut le CMS refuse de créer un lien qui englobe tout le contenu et fait automatiquement un lien pour l'image, un pour le titre et un pour le texte... du coup je me retrouve avec trois liens...

Ca fait quoi s'il y'a plusieurs div par page ? Ca marche très bien chez moi...

  • Partager sur Facebook
  • Partager sur Twitter
Florian
27 janvier 2014 à 12:07:16

Le problème ce n'est pas plusieurs div...
C'est plusieurs fois le même ID qui ne va pas.

Déjà parce que ce n'est pas valide mais aussi qu'en cas d’utilisation de cet ID en JavaScript, css ou autre, ça ne fonctionnera pas.
Le navigateur ne saura pas lequel cibler.

Pour ton problème je ne vois pas d'autre solution que de modifier les fichiers sources du CMS.
Il faut que tu trouve la boucle qui affiche tes blocs et que tu l'a modifie.

PS : je suis assez étonné qu'un CMS génère plusieurs fois le même ID sur la même page...

  • Partager sur Facebook
  • Partager sur Twitter
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
1 février 2014 à 20:03:25

Wahoo, modifier les fichiers sources ? Où est ce que je peux les trouver et ou chercher ? Je suis sur Wordpress.
  • Partager sur Facebook
  • Partager sur Twitter
Florian
14 janvier 2016 à 13:49:22

Erreur

-
Edité par Jean-Noel du 76 14 janvier 2016 à 13:50:50

  • Partager sur Facebook
  • Partager sur Twitter
10 mai 2024 à 17:51:22

Comment faire un div clicable
  • Partager sur Facebook
  • Partager sur Twitter
10 mai 2024 à 19:28:06

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)