[RÉGLÉ] Une question CSS : rendre un bloc cliquable sur toute la surface

[Isabelle62]

Bonjour,

nous avons une question concernant le CSS à poser. Ce n'est pas lié à Joomla proprement dit mais si quelqu'un peut nous donner l'astuce, ce serait super.
Nous avons passé beaucoup de temps sur le web à la recherche de la solution mais nous n'avons pas trouvé. C'est pour cette raison que nous venons vers vous.

Nous avons créé un bouton avec le texte "En savoir plus" sur la page https://www.guillenphoto.com/cms/

Voici le code CSS :

.gp-block-learn-more-01
{
background-color: #FFFFFF;
width:35%;
line-height:1.4em;
border: 3px solid #6495ed;
text-align:center;
padding: 1.0em;
margin-top:1.0em;
margin-bottom:4.0em;
margin-left:auto;
margin-right:auto;
font-family : Arial, Helvetica, sans-serif;
font-size:1.1em;
font-weight: normal;
color:#900;
display:block;
}

.gp-block-learn-more-01:hover
{
background-color: #F2F5FF;
}

.gp-block-learn-more-01 a
{
display:block;
color:#900;
}

Voici le code HTML :

<div class="gp-block-learn-more-01">
<a href="tirages-d-art-de-photographies-artistiques-de-la-nature.html">En Savoir Plus</a>
</div>

Le texte est bien cliquable mais dès qu'on promène la souris hors du texte, la surface n'est plus cliquable.

En espérant que quelqu'un nous donnera une solution

merci par avance

Isa

[pmleconte]

Bonjour Isa,
Soit vous mettez au niveau du CSS css .gp-block-learn-more-01 a et .gp-block-learn-more-01 a:hover. Dans ce cas, la classe sera appliquée au a href.
Soit vous modifiez le html, <div><a class="gp-block-learn-more-01"....</a></div>

Pascal

[Isabelle62]

Bonjour Pascal,

génial!!! Le CSS fonctionne.
C'est vraiment très puissant mais quand on ne connait pas les CSS c'est complexe.

Merci beaucoup pour votre aide si rapide.

Bien à vous
Isa