Liens <a> inopérants

**Asmod_D** · 06/08/2013, 09h26

bonjour,

j'ai crée une page avec des liens <a> et aucun des navigateur Firefox, Safari, Chrome sauf Internet Explorer me permet de faire fonctionner les liens.

je crois que le problème se situe au niveau du CSS.

voici mon code 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Titre</title>
</head>
 
<body>
<div id="site">
  <header> <img src="Image\banniere.png" alt="banniere" /> </header>
  <nav>
    <ul>
      <li><a href="Depannage\depannage.html">Depannage</a></li>
    </ul>
  </nav>
  <section>
    <article>
      <p>bonjour voici la premiere page</p>
    </article>
    <aside> </aside>
  </section>
  <footer> </footer>
</div>
</body>
</html>

voici mon code 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
body {
	background-color : rgb(83,83,83);
}
#site {
	width: 1450px;
	margin: auto;
}
header {
	position: absolute;
	width: 850px;
	height: 140px;
	padding-left: 300px;
}
nav {
	position : absolute;
	width: 850px;
	height: 55px;
	padding-left: 300px;
	padding-top: 142px;
}
nav ul {
	list-style-type: none;
}
section {
	position : absolute;
	width: 1150px;
	height: 480px;
	padding-left: 300px;
	padding-top: 200px;
}
article, aside {
	display: inline-block;
	vertical-align: top;
	text-align: justify;
}
article {
	width: 850px;
	height: 480px;
	border-radius: 35px 15px 15px 15px;
	background-image: -webkit-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: -moz-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: -ms-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: -o-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	box-shadow: 6px 6px 6px black;
}
aside {
	margin-left: 30px;
	width: 250px;
	height: 480px;
	border-radius: 15px;
	background-image: -webkit-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: -moz-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: -ms-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: -o-linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	background-image: linear-gradient(right, #D60F0F 0%, #FFDD00 100%);
	box-shadow: 6px 6px 6px black;
}
A

merci !

**Torgar** · 06/08/2013, 09h35

C'est parce que ta <section> passe par dessus ta <nav>.

Je te suggère ou de revoir ta mise en page ou d'utiliser la propriété CSS z-index afin de contourner ce problème.

**Loceka** · 06/08/2013, 09h52

Ou alors c'est parce que tu utilises des antislash ("\") au lieu des slash ("/").
Je doute fort que les antislash soient autorisés dans les URL...

**Torgar** · 06/08/2013, 09h56

Même avec des slash ça ne fonctionnerait pas. Le lien n'est absolument pas cliquable (il n'y a pas la main au survol du lien). Et quand tu passes l'inspecteur sur le lien, c'est la <section> qui monte en premier au lieu de la <nav>.

Mais il n'en reste pas moins que ta remarque est pertinente