Liens sous Mozilla & Chrome

**elicha** · 27/11/2011, 22h08

Bonsoir,

Je viens de débuter la construction d'un site perso... et je me retrouve face à un problème :
mon code marche sous IE, mais sous Mozilla & Chrome, les liens ne marchent pas :
- les 'liens images' (des images cliquables) : le lien fonctionne si on cible une zone très précise de l'image, donc ce n'est pas du tout pratique
- les liens d'un menu (je l'ai fait en div : chaque 'bouton' est une div), qui ne fonctionne pas du tout

Comment pourrais-je régler le problème ?

(comme vous pouvez vous en douter, je n'ai que des bases en HTML/CSS... Et j'aimerais comprendre où sont mes erreurs).

Merci d'avance

**manakeo** · 27/11/2011, 22h47

Salut,

Tu aurais un bout de code à montrer?

**Luke spywoker** · 27/11/2011, 22h56

Salut le hypertexteur débutant,

les 'liens images' (des images cliquables) : le lien fonctionne si on cible une zone très précise de l'image, donc ce n'est pas du tout pratique

Il faut entourer l'image avec <a></a>, a mois que tu ne parle de map-images.

Code :

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

<a href='ma_cible'><img src='mon_image'></a>

Sinon:

Code :

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

<input type='image' src='mon_image'>

Ce qui remplace le bouton submit par une image il faut donc une <form action='ma_cible'>, n'oublie pas de fermer la <form>.

Sinon il faut nous fournir du code si tu espère trouver réponse a tes questions: un pseudo-code, le code source ou un fragment de celui-çi.

**elicha** · 28/11/2011, 08h12

Désolée, j'aurais dû mettre dès le début le code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title> index </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design1.css" />
</head>
 
<body>
	<div class="rond">
		<a href="index.html"><img src="rond.jpg" border="0"> </a>
	</div>
 
	<div class="flickr">
		<a href="http://www." target="_blank" title="Flickr"><img src="flickr.jpg" border="0"> </a>
	</div>
 
	<div class="linkedin">
		<a href="http://www." target="_blank" title="LinkedIn"><img src="linkedin.jpg" border="0"> </a>
	</div>
 
	<div class="twitter">
		<a href="http://www" target="_blank" title="Twitter"><img src="twitter.jpg" border="0"> </a>
	</div>
 
	<div class="about">
	<p><a href="about.html">About</a></p>
	</div>
	<div class="web">
	<p><a href="web.html">Web</a></p>
	</div>
	<div class="graphisme">
	<p><a href="graphisme.html">Graphisme</a></p>
	</div>
	<div class="photo">
	<p><a href="photo.html">Photo</a></p>
	</div>
	<div class="handmade">
	<p><a href="handmade.html">Handmade</a></p>
	</div>
 
	<div class="enchantier">
	<img src="enchantier1.jpg">
	</div>
 
 
   </body>
 </html>

@Luke spywoker : il ne s'agit pas de map-images. Et j'ai bien mis les deux balises...

Merci bcp pour votre aide

**Kaamo** · 28/11/2011, 09h52

Pour plus de visibilité sur ce forum, je te conseillerais d'encadrer ton code avec les balises "CODE".

De plus, pourrais-tu mettre le contenu de : "design1.css"

Enfin, quelques remarques :

- Les liens des images semblent incomplets "http://www."
- Pourquoi le menu ne fonctionne pas ? Le style attendu est différent de celui qui s'affiche ? Les liens ne sont pas cliquables ? Les fichiers graphisme.html, photo.html etc sont-ils dans le même répertoire que celui du fichier que tu as posté ?

**elicha** · 28/11/2011, 10h37

Merci pour le conseil (cf. code)

J'ai retiré les liens, mais ils sont bien complets.

Tous les fichiers sont bien rangés dans le même répertoire. Et (assez bizarrement) tout marche très bien sous IE. Mais sous Mozilla, le menu est bien à sa place et dans le style défini, seulement aucun des liens n'est cliquables (c'est comme s'il s'agissait simplement de mots et non de liens).

Et voici mon fichier CSS:

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
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
body
{
font-family: 'Dorsa', sans-serif;
}
 
a:link {
color: black;
text-decoration:none;}
a:visited {
color: black;
text-decoration:none;}
a:hover {
color: #969696;
text-decoration:none;}
a:active {
color: #969696;
text-decoration:none;}
 
.rond
{
position: absolute;
left: 30px;
top: 30px;
}
 
.flickr
{
position: absolute;
right: 130px;
top: 30px;
}
 
.linkedin
{
position: absolute;
right: 80px;
top: 30px;
}
 
.twitter
{
position: absolute;
right: 30px;
top: 30px;
}
 
.about
{
position: absolute;
left: 60px;
top: 150px;
font-size: 48px;
letter-spacing:5px; 
}
 
.web
{
position: absolute;
left: 60px;
top: 200px;
font-size: 48px;
letter-spacing:5px; 
}
 
.graphisme
{
position: absolute;
left: 60px;
top: 250px;
font-size: 48px;
letter-spacing:5px; 
}
 
.photo
{
position: absolute;
left: 60px;
top: 300px;
font-size: 48px;
letter-spacing:5px; 
}
 
.handmade
{
position: absolute;
left: 60px;
top: 350px;
font-size: 48px;
letter-spacing:5px; 
}

**Kaamo** · 28/11/2011, 11h28

Petite astuce, dans ton fichier css, tu aurais pu faire un :

Code CSS :

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

1
2
3
4
div {
	border : thin solid #000;
	background-color: #888;
}

... pour constater que tes boites "div" s'empilaient les unes sur les autres, rendant impossible le clic sur les liens.
En effet, elles ont une hauteur de "150px" à cause des balises <p>.

- Retire les balises <p> qui encadrent les liens.
- Règle les valeurs "top" dans le CSS en fonction pour bien les mettre les unes en dessous des autres (avec l'aide du code ci-dessus qui affiche les bordures et le fond des div)

**elicha** · 28/11/2011, 11h56

Merci beaucoup !
En effet, le problème vient bien de cela.

Mais nouveau problème : en fait cela était surtout du à une image que j'avais mis au centre... Comme faire pour la centrer sans pour autant qu'elle empiète sur les autres div?
(j'avais fait un text-align, donc la div s'étendait sur toute la page...)

**Kaamo** · 30/11/2011, 08h43

encore une fois, un exemple de ton code serait le bienvenue pour pouvoir t'aiguiller

Je pense que c'est un problème d'organisation de ta page. En effet, tu places les div toutes à la suite des autres sans les imbriquer dans des "conteneurs".

Découpe ta page en plusieurs parties (la partie haute pour le menu flicker etc), la partie gauche pour le menu et enfin la partie centrale où tu afficheras certainement les pages.

Voici un bon tutoriel pour te mettre sur la piste : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**elicha** · 01/12/2011, 11h02

Merci beaucoup pour ton aide.
Je suis arrivée à peu près à m'en sortir en faisant des conteneurs et merci pour le tuto.

Liens sous Mozilla & Chrome

HTML

Discussions similaires

Partager

Partager