Liens <a> inopérants

Version imprimable

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:

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:

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 !

06/08/2013, 09h35
Torgar

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.
06/08/2013, 09h52
Loceka

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...
06/08/2013, 09h56
Torgar

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 :ccool:
06/08/2013, 10h03
Invité

Bonjour,
quel est l'intérêt de mettre les blocs principaux en position: absolute; ? :koi:

Autant démarrer sur de bonne bases :
=> Un avant goût du HTML 5
=> Div et CSS : une mise en page rapide et facile

Et plus généralement :
=> Les meilleurs cours et tutoriels (X)HTML
=> Les meilleurs cours et tutoriels CSS

N.B. des width/height en % serait un plus (adaptabilité)
06/08/2013, 13h59
Asmod_D

merci à tous,
j'ai introduit les z-index dans le nav et section dans le css et ça fonctionne bien.
désolé, je ne suis pas très bon en html css.
06/08/2013, 14h41
Loceka

Citation:

Envoyé par Asmod_D

désolé, je ne suis pas très bon en html css.

Si tout le monde savait tout, y'aurait pas de forum. ;)
06/08/2013, 14h53
Invité

Dans ton cas, "z-index" est un emplâtre sur une jambe de bois.

Tu ferais mieux de réécrire le code "proprement", en suivant les liens/cours/tutos que je t'ai fourni.