28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment enlever la sélection d'un texte sur zone clicable

Bonjour à tous,

je suis un peu nouveau je viens sur ce forum car j'ai un petit problème que je n'arrive pas à résoudre. Pour faire simple :

j'ai une div composée d'un lien et d'un texte, intégré de la façon suivante : 

<div class="for_titre_formation"><a href="#">BACHELOR DISTRIBUTION</a></div>
<div class="for_ctn_formation">Pour travailler dans la distribution. Sur un point de vente fixe ou virtuel.</div>


Voici le code CSS qui lui est associé : 

.for_titre_formation{color:#FFF; font-weight:700; font-size:0.750em;}
.for_titre_formation a{ display:block; width:215px; height:50px; color:#FFF; font-weight:700; font-size:1em; text-decoration:none; padding-left:5px; }
.for_ctn_formation{color:#000; color:#000; margin-top:-35px; font-size:0.600em; padding-left:5px; padding-right:5px;}


Avec cela j'obtient bien une zone carré dont le titre est clicable, mais la partie texte contenu dans dans ma div .for_ctn_formation enlève la propriété du lien, en gros si l'utilisateur pointe sa sourie au niveau du texte il ne verra pas que ce dernier est un lien.

Comment rendre toute la zone clicable tout en gardant mon texte ?

Merci d'avance Smiley cligne
Modérateur
Bonjour,

Alors dans ton code :
<div class="for_titre_formation"><a href="#">BACHELOR DISTRIBUTION</a></div>
<div class="for_ctn_formation">Pour travailler dans la distribution. Sur un point de vente fixe ou virtuel.</div>

tu as (dis moi si tu es d’accord avec moi) :
- un bloc avec un lien dedans
- un bloc avec juste du texte qui vient masquer le lien

alas a écrit :
mais la partie texte contenu dans dans ma div .for_ctn_formation enlève la propriété du lien
Il n'enlève rien du tout, tu places ton bloc non cliquable par dessus.
alas a écrit :
si l'utilisateur pointe sa sourie au niveau du texte il ne verra pas que ce dernier est un lien.
Normal, le texte n'est pas un lien.

J'ai repris ton code mais j'ai coloré les fond des bloc pour que tu vois bien : http://fiddle.jshell.net/scbddL1d/
En bleu c'est le lien (= cliquable) et en rouge l'autre bloc qui n'est pas contenu dans le lien (= du texte = pas cliquable)

alas a écrit :
Comment rendre toute la zone clicable tout en gardant mon texte
Et bien il faut mettre les choses cliquables dans l'élément cliquable ! Là j'ai l'impression que tu me montre une clé à molette et que tu me demande pourquoi tu peux pas écrire avec... Smiley lol
Bonjour Laurent, tout d'abords merci pour ta réponse

Donc tu as très bien compris mon problème et par la même occasion merci pour lien je ne connaissais pas ce site Smiley smile
Donc je veux bien mettre mon texte dans le lien mais de quelle façon, j'ai tenté quelques manipulations mais j'ai toujours le même problème.
Modifié par alas (01 Jul 2015 - 15:19)
Modérateur
Et bien il faut faire un lien comme tu as fait pour le titre. Le contenu cliquable se trouve à l’intérieur des balises :
<a href="#">contenu cliquable</a>


Ce que je ne comprend pas c'est que tu masques ton titre cliquable avec ton texte (cf le margin négatif). Si tu ne veux pas afficher le titre et que tu veux rentre ton texte cliquable pourquoi ne pas avoir mis ton texte directement dans le lien ?
<a href="#">Pour travailler dans la distribution. Sur un point de vente fixe ou virtuel.</a>

Modifié par _laurent (01 Jul 2015 - 15:37)
Oui ça je comprend mais je vais avoir un style css différent pour le titre et pour la description, en gros mon titre sera en gras en et blanc et mon texte en petit et noir.

Ma question du coup, est'il possible de faire cela : 

<a href=""> <span class="csstitre">MON TITRE</span> <span class="cssdescription"> ici je place ma description</span></a>


Je ne suis pas sur que l'on puisse placer un span dans un <a>
Modérateur
Un <span> dans un <a> oui c'est possible. Techniquement on pourrait même placer un <div> ou un <p> dans un <a> mais c'est sémantiquement que c'est pas valable du tout. Mais le <span> est bon sur tout les points normalement. Smiley biggthumpup

Sinon tu as la solution avec deux liens :
<a href="#" class="cssTitre">MON TITRE</a>
<a href="#" class="cssTexte">ici je place ma description</a>

Modifié par _laurent (01 Jul 2015 - 15:49)
Sujet clos
Aller à