Discussion :

[guillaume7684]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[rodolphebrd]

Bonjour,

commencez par mettre un display:block; à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[guillaume7684]

Bonjour,

Pourriez-vous me dire où mettre ce code?
Merci.

[rodolphebrd]

Il va falloir créer une classe. Exemple : .cl4
Changer la classe de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[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 ?

[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.