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.

[guillaume7684]

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

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

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 :

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

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

[rodolphebrd]

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.

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

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

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

Je modifie:

Code :

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

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

Une fois sauvegardé:

Code :

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

<div class="cl3">&nbsp;</div>

Bizarre !!!!

[guillaume7684]

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

Code :

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

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

Merci pour ton aide.

[rodolphebrd]

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

Code :

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

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

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