Intégration d'une image-lien sur un site en HTML/CSS
Bonjour à tous, voilà, il y a quelques temps j'ai créé mon entreprise, je me suis fais un site, mais là je galère sur un point que je n'arrive pas à résoudre.
J'ai sur mon index.html, un carrousel en JavaScript afin de faire défiler deux images distinctes.
Étant donné que je commence à faire de la pub un peu partout, j'ai créé une page sur FaceBook, et j'aurais aimer y placer une image-lien "retrouvez nous sur FaceBook" afin qu'on puisse cliquer dessus et retrouver ma page FB.
J'ai bien tenté de l'ajouter dans mon CSS, mais elle ne se place pas correctement et je n'arrive pas à en faire un lien.
Je ne suis qu'un débutant en HTML et CSS
mon index.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!-- CARROUSEL -->
<div id="mycarousel" class="jcarousel-skin-tango">
<div class="jcarousel-control">
<a class="number un" href="#">1</a>
<a class="number deux" href="#">2</a>
</div>
<ul>
<li>
<div class="image-carousel">
<div class="lien-fb">
<div class="image-fb">
<a href="URL"></a>
</div>
</div>
<div class="lien-gauche">
<div class="image-gauche">
</div>
<div class="texte-gauche">
<strong><a href="#">TITRE</a></strong>
<div class="sepa-small"></div>
<a href="#">TEXTE***TEXTE</a>
</div>
</div>
<div class="lien-droite">
<div class="image-droite">
</div>
<div class="texte-droite">
<strong><a href="#">TITRE</a></strong>
<div class="sepa-small"></div>
<a href="#">TEXTE***TEXTE</a>
</div>
</div>
</div>
</li> |
Il n'y a là qu'une des deux parties du carrousel
et le CSS qui correspond
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
.lien-fb
{
float:left;
margin-top:418px;
margin-left:230px;
}
.image-fb
{
background-image:url(images/fb.png);
width:115px;
height:158px;
margin-right:5px;
float:left;
}
.lien-gauche
{
float:left;
margin-top:418px;
margin-left:230px;
}
.image-gauche
{
background-image:url(images/image1.png);
width:85px;
height:85px;
margin-right:5px;
float:left;
}
.texte-gauche
{
font-family:"Segoe UI";
font-size:12px;
color:#808080;
width:145px;
float:right;
margin-top:-3px;
text-align:left; |
En rouge ce que j'ai rajouté, vous vous en doutez.
Si quelqu'un à une solution.
Amicalement.
Johan
