Problème sur mes balises 'a'

**SebastienM** · 21/11/2007, 11h07

Bonjour !

Je recontre des difficultés sur les liens : je pense que ça vient de mes styles css...
En fait, sur certaines pages, le lien est clickable mais uniquement sur la dernière lettre, comme si la zone cliquable se réduisait à droite.
En mettant un background color rouge sur le style de ma balise 'a', tout le mot est en rouge ; je ne comprend pas pourquoi je ne peux cliquer que sur une partie du mot...

Voici le 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Quiz</title>
	<link href="../styles/quiz_popup.css" rel="stylesheet" />
</head>
 
<body>
<div id="principal">
	<form action="quiz.php" id="quiz" method="post">
		<div>
 
			<input type="hidden" name="ordre" value="32;42;48;67;14;69;19;64;57;47;65;55;35;8;36;2;75;11;40;30;12;51;63;50;4;24;44;58;45;49" />
 
			<input type="hidden" name="score" value="0" /><input type="hidden" name="questionEnCours" value="28" />					<input type="hidden" name="phase" value="2" />
					<h1>Question</h1>
					<div id="contenu">
                        <div >
                            <div class="numero">29</div>La pollution organique d'un plan d'eau &laquo;ferm&eacute;&raquo; (lacs, &eacute;tangs ou rivi&egrave;res lentes) peut provoquer sa &laquo;suralimentation&raquo; : l'apport constant de substances nutritives entra&icirc;ne une prolif&eacute;ration de v&eacute;g&eacute;taux aquatiques. Dans ce cas, on parle de :<br /><input type="radio" value="0" name="reponse" />eutrophisation<br /><input type="radio" value="1" name="reponse" />ozonation<br /><input type="radio" value="2" name="reponse" />floculation<br /><div class="question-image-bas">
 
<img src="images/q_img46.gif" alt="illustration-question" />
</div>                        </div>
                    </div>
                    					<div id="pied">
						<script type="text/javascript">
                        <!--
                        document.write('<h2><a href="#" onclick="javascript:document.getElementById(\'quiz\').submit();">R&eacute;ponse</a></h2>');
                        -->
						</script>
						<noscript>
                            <div>
							    <input type="submit" value="Envoyer" />
                            </div>
						</noscript>
					</div>
 
 
		</div>
 
	</form>
    	&nbsp; <!-- utile pour que la couleur du div#principal s'etende bien sous firefox -->
</div></body>
</html>

Et la page 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #333333;
	background-color: #FFFBB2;
	margin: 0px;
}
 
img { border: none; }
a, a:visited { 
	font-family: Georgia, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:bold; 
	color:#000099;
	border: none;
	text-decoration:none;
	padding:0;
	margin:0;
	background-color:red;
}
 
h1{ 
	font-family: Georgia, Arial, Helvetica, sans-serif; 
	font-size:14px; 
	font-weight:bold; 
	color:#000099;
	width:321px;
	height:40px;
	padding-left:20px;
	background-image:url("../quiz/images/tete_popup.gif");
	background-position:bottom;
	background-repeat:no-repeat;
	margin:0;
}
 
h2{ 
	font-family: Georgia, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:bold; 
	color:#000099;
	padding:0;
	margin:0;
}
 
DIV#principal {
	background-color: #FFFBB2;
	background-image:url("../quiz/images/quiz.gif");
	background-position:top;
	background-repeat:no-repeat;
	padding-top:80px;
	width: 345px;
	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
	font-size:10px;
	margin: 0px;
}
 
DIV#contenu {
	background-color: #FFFBB2;
	background-image:url('../quiz/images/fond_popup.gif');
	background-repeat:repeat-y;
	width: 301px;
	/*width:auto;*/
	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
	font-size:10px;
	margin:0;
	padding-right:30px;
	padding-left:10px;
	text-align: justify;
	height:320px;
}
 
DIV#pied {
	background-image:url("../quiz/images/pied_popup.gif");
	background-position:top;
	background-repeat:no-repeat;
	width: 301px;
	height:50px;
	line-height:40px;
	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
	font-size:20px;
	padding-left:20px;
	margin:0px;
	text-align:right;
	padding-right:20px;
}
 
DIV.numero{
	background-image:url("../quiz/images/etoile.gif");
	background-repeat:no-repeat;
	width:47px;
	height:35px;
	text-align:center;
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
	line-height:35px;
}
 
DIV#question-precedente{
	position:absolute;
	bottom:30px;
	padding-left:15px;
	margin:0px;
}
 
DIV.question-image-droite{
	position:absolute;
	left:130px;
	top: 30px;
	right: 10px;
	width: 210px;
	text-align: right;
}
 
DIV.question-image-bas{
	position:absolute;
	width:300px;
	height:200px;
	margin:0px;
	padding-left:0px;
	text-align: center;
	padding-top:10px;
}
 
DIV.score-image{
	position:absolute;
	top: 120px;
	right: 10px;
	width: 100%;
	text-align: right;
}
 
SPAN.score-final{
	font-family: Georgia, Arial, Helvetica, sans-serif; 
	font-size:11px; 
	font-weight:bold; 
	color:#000099;
}
 
SPAN.note-finale{
	font-family: Georgia, Arial, Helvetica, sans-serif; 
	font-size:20px; 
	font-weight:bold; 
	color:#EE0000;
}

Le problème se situe sur le mot 'Réponse' (lien js) mais aussi sur le bouton dans le noscript.
Auriez-vous une idée ?

Merci d'avance !

**franculo_caoulene** · 21/11/2007, 12h53

Salut,

Le positionnement provoque un empilement. Ton div .question-image-bas est maintenant au-dessus de #pied dans lequel se trouve ton lien car il déborde de son conteneur. Essaye de définir le z-index dans ce cas là.
Mais vu ce que tu fais, tu n'as pas besoin de positionner les éléments, tu pourrais les laisser dans le flux.