Impossible de rendre mon image cliquable

Version imprimable

Bonjour,

Sur la page d'accueil de mon site http://www.sygma-nails.com il y a 3 bannières qui défilent, et mon problème se passe sur la 3ème bannière.

J'aimerais que quand on clique sur l'image ça me revoit vers la page concernée.
Alors j'ai réussi à faire apparaitre du texte et un morceau de l'image (identique à la bannière), mais je pense qu'il y a plus simple que de refaire apparaitre l'image.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.index_slider { height:411px; margin-bottom:40px; overflow:hidden; }
#s4 { width:100% !important; }
 
#s4 h1 { font-family:'Open Sans'; font-size:55px; font-weight:normal; }
#s4 h1 a { color:#585858; text-decoration:none; }
#s4 h1 a:hover { color:#CB0E27; text-decoration:none; }
#s4 .sl_descr { font-size:17px; line-height:25px; color:#737373; }
#s4 .sl_price { font-size:37px; color:#CB0E27; }
#s4 .shop_now { display:block; background:url(../images/shop_now.png) no-repeat; width:127px; height:39px; line-height:39px; text-align:center; font-size:14px; color:#fff; text-decoration:none; }
#s4 .shop_now:hover { background:url(../images/shop_now.png) no-repeat 0 -39px; }
 
.cl1 { width:795px; height:351px; background:url(../images/pic_slider1.jpg) no-repeat; padding:28px 50px 0 0; text-align:right; }
.cl2 { width:795px; height:351px; background:url(../images/pic_slider2.jpg) no-repeat; padding:28px 0 0 50px; }
.cl3 { width:795px; height:351px; background:url(../images/pic_slider3.jpg) no-repeat; padding:28px 50px 0 0; text-align:right; }
 
.cl1 h1 { margin-bottom:3px; }
.cl1 .sl_descr { margin-bottom:30px; }
.cl1 .sl_price { margin-bottom:31px; }
.cl1 .shop_now { float:right; }
 
.cl2 h1 { margin-bottom:3px; }
.cl2 .sl_descr { margin-bottom:30px; }
.cl2 .sl_price { margin-bottom:31px; }
 
.cl3 h1 { margin-bottom:3px; }
.cl3 .sl_descr { margin-bottom:30px; }
.cl3 .sl_price { margin-bottom:31px; }
.cl3 .shop_now { float:right; }

Code:

1
2
<div class="cl3">
<a class="cl3" href="{{store direct_url="ponceuses-electriques.html"}}">Ponceuse</a></div>

Je pense que le problème n'est pas si compliqué, mais il l'est quand on n'est pas du métier !!

Merci pour votre aide.

Guillaume.

29/09/2013, 15h20
rodolphebrd

Bonjour,

commencez par mettre un display:block; à :

Code:

<a class="cl3" href="{{store direct_url="ponceuses-electriques.html"}}">Ponceuse</a></div>
29/09/2013, 17h31
guillaume7684

Bonjour,

Pourriez-vous me dire où mettre ce code?
Merci.
29/09/2013, 17h52
rodolphebrd
Il va falloir créer une classe. Exemple : .cl4
Changer la classe de :

Code:

<a class="cl3" href="{{store direct_url="ponceuses-electriques.html"}}">Ponceuse</a></div>

en :

Code:

<a class="cl4" href="{{store direct_url="ponceuses-electriques.html"}}">Ponceuse</a></div>
Code:

1 2 3 .cl4{ display:block; }
En définissant les largeurs et hauteurs dans cette déclaration.
+ supprimer les largeurs et hauteurs définies dans le html (style inline)
+ supprimer le padding dans la classe .cl3
+ supprimer le terme "ponceuse" ou le masquer

Vous avez les pistes pour vous en sortir...;)
29/09/2013, 18h25
guillaume7684

Désolé je n'y arrive pas.
Et je ne vois pas pourquoi créer une .cl4 au lieu de modifier le code de la .cl3 ?
29/09/2013, 18h44
rodolphebrd

A l'orgine avant que vous ne changiez votre HTML la classe .cl3 s'appliquait au DIV parent, il fallait donc différencier les deux classes.

Vous venez de supprimer votre balise A.

On va finir par ne plus parler de la même chose. 8O

Je vois que tu perds patience, normal !!!:?

Je suis donc retourné sur ton précédent message en essayant de suivre à la lettre, mais j'ai dû raté un truc !!!

Mon css:
Code:

1 2 3 4 .cl1 { width:795px; height:351px; background:url(../images/pic_slider1.jpg) no-repeat; padding:28px 50px 0 0; text-align:right; } .cl2 { width:795px; height:351px; background:url(../images/pic_slider2.jpg) no-repeat; padding:28px 0 0 50px; } .cl3 { width:795px; height:351px; background:url(../images/pic_slider3.jpg) no-repeat; text-align:right; } .cl4 { display:block; background:url(../images/pic_slider3.jpg) no-repeat; padding:28px 50px 0 0; text-align:right; }
- J'ai créé .cl4
- J'ai supprimé le padding de .cl3
- J'ai supprimé la largeur et hauteur de .cl4
- J'ai ajouté display:block dans .cl4

Mon html:

Code:

<div class="cl3"><a class="cl4" href="{{store direct_url="ponceuses-electriques.html"}}">Ponceuse</a></div>

- J'ai recopié la ligne que tu m'as envoyé, donc j'ai bien cl3 et cl4 dans la même div

J'espère ne être trop lourd, mais si tu regardes sur mon site (3ème bannière), ça ne marche pas: http://www.sygma-nails.com

Merci.

29/09/2013, 19h51
rodolphebrd

Citation:

Envoyé par guillaume7684

Je vois que tu perds patience, normal !!!:?

Meu non !!!

Au contraire je m'amuse follement sur ce forum. ;)

C'est juste un besoin d'éclaircissement qui est nécessaire pour tout ceux qui viendront lire cette discussion.

Il manque les largeurs et hauteurs à la classe .cl4.
29/09/2013, 20h43
guillaume7684

Ca marche presque, par contre quand je veux supprimer le texte ponceuse
et que j'enregistre le code html directement dans le back office de mon site, la ligne de code devient:

Avant:

Code:

<div class="cl3"><a class="cl4" href="{{store direct_url="ponceuses-electriques.html"}}">Ponceuse</a></div>

Je modifie:

Code:

<div class="cl3"><a class="cl4" href="{{store direct_url="ponceuses-electriques.html"}}"></a></div>

Une fois sauvegardé:

Code:

<div class="cl3"> </div>

Bizarre !!!!
29/09/2013, 20h46
guillaume7684

Du coup, j'ai mis ce code, et le point est invisible mais c'est dommage.

Code:

<div class="cl3"><a class="cl4" href="{{store direct_url="ponceuses-electriques.html"}}">.</a></div>

Merci pour ton aide.
01/10/2013, 22h08
rodolphebrd

Plutôt que de mettre un point essayez d'insérer  

Code:

<div class="cl3"><a class="cl4" href="{{store direct_url="ponceuses-electriques.html"}}"> </a></div>

Votre classe .cl3 n'a pas besoin de contenir de background (ça fait double emploi).