[CSS] Les liens changent de couleur

**Mister Nono** · 08/12/2005, 17h09

Voici la feuille de style :

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
 
/* BALISES STANDARDS */
 
 
body {
font-family: Trebuchet MS, Verdana, Arial, sans-serif;
/*background-color: #336699;*/
font-size: medium;
margin: 0;}
 
 
h1 {color: #B22222;
text-align: center;
font-size: 2em;
font-weight: bold;
font-style: italic;
background-color: transparent;}
 
h2 {color: #00008B;
text-align: left;
font-size: 1.4em;
font-weight: bold;
font-style: italic;
background-color: transparent;}
 
h3 {color: #00478A;
text-align: left;
font-style: italic;
font-size: 1.2em;
background-color: transparent;}
 
p {color: #00478A;
font-size: 1em;
font-weight: bold;
background-color: transparent;
text-align: justify;
padding-left:20px;
padding-right:20px;
}
 
 
 
/* MISE EN PAGE */
 
 
.cadreEntete
{
	border: 1px #0080ff solid;
	height: 95px;
	background-color: transparent;
	background-image: url(../images/hautPage.png);
	background-repeat: no-repeat;
	background-position: left;
}
 
 
.cadrePage {
margin:0;
}
 
.cadrePrincipal {
margin: 0.5cm;
}
 
.cadreGauche {
position: absolute;
left:0;
/*border: 2px #F3E2A7 solid;*/
width: 230px;
margin-top:5px;
}
 
.cadreMenu
{
	margin-top: 5px;
	margin-left: 3%;
	width: 200px;
	height: 400px;
}
 
.cadreDroite 
{
margin-left: 220px;
margin-top:40px;
margin-bottom:20px;
margin-left:220px;
margin-right:10px;
/*background-color: #F3E2A7;*/
padding-top: 40px;
padding-left: 10px;
padding-bottom: 40px;
padding-right: 10px;
}
 
 
 
 
.cadreRecherche{
margin-top:20px;
text-align:left;
font-size: 0.8em;
font-weight: bold;
}
 
.cadrePiedPage {font-family: verdana, arial, sans-serif;
position: relative;
width: 90%;
background-image: none;
/*border: 1px solid Yellow;
*/
text-align: center;
margin: 8% 5% 10% 5%;
}
 
 
/* DEFINITION MENU */
 
.menu {
	margin-top:5px;
	margin-left:3%;
	/*border: 2px #0080c0 double;*/
	/*height: 160px;*/
	position: absolute;
	width: 200px;
	/*overflow: hidden;*/
	color: #655f4b;
	background-color: #ffffff;
}
 
.menu h2 {
	border-color: #ff9900;
	border-style: solid;
	border-width: 0 0 3px 0;
	font-size: medium;
	font-weight: 700;
	margin: 0;
	margin-bottom: 10px;
	padding-left: 0;
	text-transform: uppercase;
}
 
.menu h2:first-letter {
	color: #ff9900;
	background-color: transparent;
}
 
.menu ul {
	margin-bottom: 1.5em;
	margin-top: 0.5em;
	list-style: none;
}
 
.menu li ul{
	display: inline;
	/*list-style: none;*/
}
 
.menu ul li a{
	color: #ff6600;
	background-color: transparent;
	display: block;
	font-weight: 700;
	margin-left: -3em;
	padding-left: 1em;
	text-decoration: none;
}
 
.menu ul li a:hover{
	background-color: #ffecce;
	color: #ff6600;
}
 
/* STYLES */
 
.cadreEntete img { 
/*LOGO*/
width:170px;
height:48px; 
float:left;
margin-left: +2em;
/*margin-top: +1em;*/
border: none;}
 
 
.validation
{
	font-family: verdana, arial, sans-serif;
	background-image: none;
	text-align: center;
	margin: 20px;
	margin-top: 80px;
}
 
 
.legende {
font-weight: bold;
font-style: normal;
text-align:center;
font-size: 0.6em;}
 
 
 
 
/* DISPOSITION */
 
.justifier {
	text-align: justify;
}
 
.centrer {
text-align: center;
}
 
.alignerGauche {
text-align: left;
}
 
.alignerHaut {
vertical-align: top;
}
 
.noBorder {
border-bottom-style:none;
} 
 
.marge {
padding-left:20px;
padding-right:20px;
}
 
 
/* LIENS */
 
a {
	font-weight: bold;
}
 
a:link {
color: rgb(0, 0, 255);
font-size: 1em;
background-color: transparent;}
 
a:visited {
color: rgb(68, 0, 255);
font-size: 1em;
background-color: transparent;}
 
a:hover {
color: rgb(0, 68, 255);
font-size: 1em;
font-style: italic;
background-color: transparent;}

Et la page HTML (qui n'affiche pour l'instant qu'un menu) :

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
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
 
<html>
 
<head>
 
<title></title>
 
 
 
  <link rel="stylesheet" type="text/css" href="./styles/styles1.css" media="all">
 
</head>
 
<body>
 
 
<div class="cadrePage">
 
 
 
 
<div class="cadreEntete">
 
</div> <!-- cadreEntete -->
 
 
 
<div class="cadrePrincipal">
 
<div class="cadreGauche">
 
<div class="cadreMenu">
 
<div class="menu">
 
<h2>Professionnel</h2>
 
<ul>
 
<li>
<a href="#">Mes missions</a>
</li>
 
<li>
<a href="#">Mes motivations</a>
</li>
 
<li>
<a href="#">Expériences</a>
</li>
 
 
</ul>
 
 
<h2>Université</h2>
 
<ul>
 
<li>
<a href="#">Bio-Informatique</a>
</li>
 
<li>
<a href="#">Algorithme distribué</a>
</li>
 
<li>
<a href="#">Intelligence Artificielle</a>
</li>
 
<li>
<a href="#">Logique</a>
</li>
 
 
</ul>
 
 
 
<h2>Et encore...</h2>
 
<ul>
 
<li>
<a href="#">Contactez-moi</a>
</li>
 
<li>
<a href="#">Remerciements</a>
</li>
 
 
 
</ul>
 
 
 
</div> <!-- menu -->
 
</div> <!-- cadreMenu-->
 
<div class="cadreRecherche">
 
</div> <!-- cadreRecherche-->
 
 
</div> <!-- cadreGauche-->
 
 
 
<div class="cadreDroite">
 
</div> <!-- cadreDroite-->
 
 
 
</div> <!-- cadrePrincipal-->
 
 
 
 
<div class="cadrePiedPage">
 
</div> <!-- cadrePiedPage-->
 
 
 
 
</div> <!-- cadrePage -->
 
 
 
</body>
</html>

Le menu s'affiche correctement avec Mozilla : les items du menu qui sont des balises imbriquées dans une liste de type <a ...> ... </a> apparaissent "oranges".

Maintenant sous Internet Explorer (comme d'habitude), ces items apparaissent " bleu " qui est en fait la couleur définie pour des liens normaux dans la feuille de style.

Comment faire comprendre à IE que ces liens sont des liens du menu et non des liens normaux ?

:

Merci à tous.

**SpaceFrog** · 08/12/2005, 17h40

Code :

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

.menu ul li a:link{color:

:

**Mister Nono** · 08/12/2005, 19h52

Désolé, SpaceFrog.

J'aurais bien aimé que tu ais raison : j'ai essayé ta solution mais elle ne fonctionne pas.

Alors, AU SECOUUUUUUUUUUUUUUUUUUURS !!!!

**javatwister** · 09/12/2005, 12h12

poste du code qu'on puisse concevoir rapidement

vire tout ce qui ne concerne pas tes éléments problématiques!

[CSS] Les liens changent de couleur

CSS

Vue hybride

Discussions similaires

Partager

Partager