Liens & Images [Résolu]

hamlesbettraves · 07/01/2011, 16h11

Bonjour à tous!

Je fais encore une fois appel à vous car votre aide me fût précieuse à plusieurs reprises.

Un de mes nouveaux problèmes vient des liens et des images.

En effet, j'aimerais que des icônes servent servent de lien vers d'autres sites (ici l'image twitter) et aussi qu'une d'entre elle serve de lien pour ouvrir un pdf présent sur mon serveur.

Seulement, que ce soit pour les autres sites ou le pdf, à chaque fois l'image sélectionnée s'entoure d'une bordure bleue (cliquable), ainsi que deux autres images pourtant pas sélectionnées (barre1 et barre2)!

Je voudrais donc savoir quelle méthode utiliser pour que l'image entière serve de lien sans avoir la bordure, et comment empêcher les deux autres images de devenir elles aussi lien.

Voici mon HTML :

Code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<link rel="shortcut icon" href="favicon.png"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" CONTENT="thomas, rudel, cv"> 
<title>Présentation</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
 
<body >
 
<div class="linkedin"> 
<img src="linkedin.png" height="40" width="40"/>
</div>
 
<div class="viadeo"> 
<img src="viadeo.png" height="45" width="45"/>
</div>
 
<div class="twitter"> 
<img src="twitter.png" height="45" width="45" <a href="index.htm"/>
</div>
 
<div class="pdf"> 
<img src="pdf.png" height="50" width="50"/>
</div>
 
<div class="barre1">
<img src="barre.jpg" height="1" width="937" />
</div>
 
<div class="barre2">
<img src="barre.jpg" height="300" width="1" />
</div>
 
<div class="menu">
<div id="pre"><a href="index.htm" class="lien">Thomas Rudel | Allons à l'essentiel.</a></div>
<span class="for" ><a href="formatio.htm" class="lien">Formation /</a></span>
<span class="exp" ><a href="exp.htm" class="lien">Expérience professionnelle /</a></span>
<span class="inf" ><a href="informat.htm" class="lien">Informations complémentaires /</a></span>
<span class="pou"><a href="pourquoi.htm" class="lien">Pourquoi moi ?</a></span>
</div>
 
<div class="texte">
<p>Voici pour l'instant mon <a href="RUDEL Thomas CV.pdf">C.V</a> au format PDF, le reste viendra dans peu de temps...</p>
</div>
 
</body>

Les images qui s'incrustent sont barre1 et barre2.

Le CSS :

Code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
body{
margin: 70px 100px 100px 100px;
background-image : url(fond.jpg);
background-repeat: repeat-x;
background-color: white;
}
 
.lien{
color:black;
text-decoration:none;
}
 
A:hover.lien {
color:red;
}
 
#pre {
position:relative;
top: 5px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 40px;
 
}
 
.for {
position:relative;
top: 73px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.exp {
position:relative;
top: 73px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.inf {
position:relative;
top: 73px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.pou {
position:relative;
top: 73px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.menu{
width:1000px;
}
 
.texte{
width:900px;
position:relative;
top: 100px;
left: 30px;
font-family: "Tahoma", "Arial", "Trebuchet MS";
font-size: 16px;
text-align:justify;
}
 
.barre1{
position: absolute;
top: 200px;
left: 100px;
}
 
.barre2{
position: absolute;
top: 215px;
left:100px;
}
 
.pdf{
position: absolute;
top: 70px;
left: 1050px;
 
}
 
.twitter{
position: absolute;
top: 75px;
left: 750px;
}
 
.viadeo{
position: absolute;
top: 75px;
left: 825px;
}
 
.linkedin{
position: absolute;
top: 76px;
left: 905px;
 
}

Merci d'avance!

Eric2a · 07/01/2011, 16h17

Salut,

L'idéal est de supprimer la bordure par défaut pour toutes les images.

Code :

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

img {border:none;}

hamlesbettraves · 07/01/2011, 17h05

Non, ça ne marche toujours pas...

Voilà ce que j'obtiens quand je veux mettre un lien à l'image twitter

http://img211.imageshack.us/i/sanstitrexasz.png/

Eric2a · 07/01/2011, 17h17

J'avais pas regardé le code HTML...

Remplace

Code :

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

<img src="twitter.png" height="45" width="45" <a href="index.htm"/>

par

Code :

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

<a href="index.htm"><img src="twitter.png" height="45" width="45" /></a>

hamlesbettraves · 07/01/2011, 17h23

Merci, c'est mieux, mais bon, je ne peux que cliquer sur le bordure invisible de l'image, pourtant j'ai ajouté dans le css le code

Code :

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

1
2
 
img {border:none;}

Bovino · 07/01/2011, 18h03

Heu... c'est mes yeux ou il n'y a pas de lien sur tes images ?

hamlesbettraves · 07/01/2011, 18h10

Pour l'instant j'ai que deux liens dans le HTML...

Code :

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

1
2
3
4
5
6
7
<div class="pdf"> 
<a href="RUDEL Thomas CV.pdf"><img src="pdf.png" height="30" width="30"/>
</div>
 
<div class="twitter"> 
<a href="http://www.twitter.com"> <img src="twitter.png" height="45" width="45" /></a>
</div>

Mais j'ai l'intuition que c'est mon CSS qui marche pas :

Code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
body{
margin: 70px 100px 100px 100px;
background-image : url(fond.jpg);
background-repeat: repeat-x;
background-color: rgb(232, 232, 232);
}
 
.lien{
color:black;
text-decoration:none;
}
 
A:hover.lien {
color:red;
}
 
#pre {
position:relative;
top: 5px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 40px;
 
}
 
.for {
position:relative;
top: 72px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.exp {
position:relative;
top: 72px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.inf {
position:relative;
top: 72px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.pou {
position:relative;
top: 72px;
left: 0px;
font-family: "Arial", "Tahoma", "Trebuchet MS";
font-size: 24px;
}
 
.menu{
width:1000px;
}
 
.texte{
width:900px;
position:relative;
top: 100px;
left: 30px;
font-family: "Tahoma", "Arial", "Trebuchet MS";
font-size: 16px;
text-align:justify;
}
 
.texte2{
width:300px;
position:absolute;
top: 135px;
left: 100px;
font-family: "Tahoma", "Arial", "Trebuchet MS";
font-size: 14px;
text-align:justify;
}
 
.barre1{
position: absolute;
top: 200px;
left: 100px;
 
}
 
.barre2{
position: absolute;
top: 215px;
left:100px;
 
}
 
.pdf{
position: absolute;
top: 147px;
left: 250px;
 
}
 
.twitter{
position: absolute;
top: 77px;
left: 750px;
 
}
 
.viadeo{
position: absolute;
top: 75px;
left: 825px;
 
}
 
.linkedin{
position: absolute;
top: 76px;
left: 905px;
 
 
}
 
img {border:none;}

Et pour être plus précis, seul la bordure inférieure est cliquable...

Bovino · 07/01/2011, 18h25

La première balise <a> n'est pas fermée

hamlesbettraves · 07/01/2011, 18h42

Effectivement merci beaucoup, mais je n'arrive toujours pas à cliquer sur une image complète

, seul la bordure l'est...

Bovino · 07/01/2011, 18h59

Ca vient du fait que tes images sont en position absolute, du coup, elles sont sorties du flux et leur dimension n'est pas préservée.

Donc la question : pourquoi mettre des positions absolute ?

hamlesbettraves · 07/01/2011, 19h17

C'était ça merci!

En fait avec les relative, j'ai du mal à tout placer, tout change de place quand je change une seule valeur...

Je ne savais pas qu'on pouvait mettre des valeurs négatives lors du placement...

Merci pour votre aide!

07/01/2011, 16h17	#2
Eric2a Membre Expert Eric Garidacci Inscription : septembre 2005 Messages : 1 057 Détails du profil Informations personnelles : Nom : Eric Garidacci Âge : 41 Informations forums : Inscription : septembre 2005 Messages : 1 057 Points : 1 564 Points : 1 564	Salut, L'idéal est de supprimer la bordure par défaut pour toutes les images. Code : Sélectionner tout - Visualiser dans une fenêtre à part img {border:none;} __________________ N'oubliez pas le vote des messages utiles ainsi que le Tag [Résolu]. Mon Site Web : Corse - Actualité, Météo, Vidéos, Logiciels, ...
	00

07/01/2011, 17h17	#4
Eric2a Membre Expert Eric Garidacci Inscription : septembre 2005 Messages : 1 057 Détails du profil Informations personnelles : Nom : Eric Garidacci Âge : 41 Informations forums : Inscription : septembre 2005 Messages : 1 057 Points : 1 564 Points : 1 564	J'avais pas regardé le code HTML... Remplace Code : Sélectionner tout - Visualiser dans une fenêtre à part <img src="twitter.png" height="45" width="45" <a href="index.htm"/> par Code : Sélectionner tout - Visualiser dans une fenêtre à part <a href="index.htm"><img src="twitter.png" height="45" width="45" /></a> __________________ N'oubliez pas le vote des messages utiles ainsi que le Tag [Résolu]. Mon Site Web : Corse - Actualité, Météo, Vidéos, Logiciels, ...
	00

07/01/2011, 18h03	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Heu... c'est mes yeux ou il n'y a pas de lien sur tes images ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/01/2011, 18h25	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	La première balise <a> n'est pas fermée __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/01/2011, 18h59	#10
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Ca vient du fait que tes images sont en position absolute, du coup, elles sont sorties du flux et leur dimension n'est pas préservée. Donc la question : pourquoi mettre des positions absolute ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/01/2011, 17h05	#3
hamlesbettraves Invité de passage Inscription : janvier 2011 Messages : 17 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 17 Points : 3 Points : 3	Non, ça ne marche toujours pas... Voilà ce que j'obtiens quand je veux mettre un lien à l'image twitter http://img211.imageshack.us/i/sanstitrexasz.png/
	00

07/01/2011, 18h42	#9
hamlesbettraves Invité de passage Inscription : janvier 2011 Messages : 17 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 17 Points : 3 Points : 3	Effectivement merci beaucoup, mais je n'arrive toujours pas à cliquer sur une image complète , seul la bordure l'est...
	00

07/01/2011, 19h17	#11
hamlesbettraves Invité de passage Inscription : janvier 2011 Messages : 17 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 17 Points : 3 Points : 3	C'était ça merci! En fait avec les relative, j'ai du mal à tout placer, tout change de place quand je change une seule valeur... Je ne savais pas qu'on pouvait mettre des valeurs négatives lors du placement... Merci pour votre aide!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email