Besoin d'aide pour réaliser une classe avec du css

**Winjet** · 22/04/2009, 19h44

Salut à tous,

Je vous contacte car je souhaite valider mon site par W3C, il y avait pas mal d'erreurs mais une grande majorité a été résolue.

Site : http://validator.w3.org

Cependant, je cale sur une erreur en particulier, en effet, j'obtiens ce message :

Line 39, Column 15: ID "left_haut" already defined

<div id="left_haut"><h3>Menu</h3></div>

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Cela veut dire que j'utilise plusieurs fois le même id dans la page (ici en l'occurence 'left_haut'). Il faut donc définir une classe dans le css. J'ai beau essayé de suivre des tutoriels sur le net mais aucun ne fonctionne avec moi.

Voici le code qui a déclenché cette erreur :

Code xhtml :

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
<div id="left">
     <div id="left_haut"><h3>Connexion</h3></div>
     <div id="leftbk">
          <p>Vous n'êtes pas identifié</p>
 
          <form action="login.php" method='post'>
 
               <p>Identifiant :</p>
               <p><input type="text" name="login" maxlength="250"/></p>
 
               <p>Mot de passe :</p>
               <p><input type="password" name="pass" maxlength="30"/></p>
 
               <p><input type="submit" value="Connexion"/></p>
 
               <p><a href="register.php">Inscription</a></p>
               <p><a href="lostpassword.php">Mot de passe perdu ?</a></p>
          </form>
     </div>
     <div id="left_bas"></div>
 
     <div id="left_haut"><h3>Menu</h3></div>
     <div id="leftbk">
          <a title="Lien" href="../index.php">Accueil</a><br />
          <a title="Lien" href="../games/adresse.php">Adresse</a><br />
          <a title="Lien" href="../games/arcade.php">Arcade</a><br />
          <a title="Lien" href="#">Aventure</a><br />
          <a title="Lien" href="#">Casino</a><br />
          <a title="Lien" href="#">Débile</a><br />
          <a title="Lien" href="#">Divers</a><br />
          <a title="Lien" href="#">Guerre</a><br />
          <a title="lien" href="../games/puzzle.php">Puzzle</a><br />
          <a title="Lien" href="#">Réflexion</a><br />
          <a title="Lien" href="#">Sport</a><br /> </div>
          <div id="left_bas"></div>
     </div>
</div>

Et voici la partie du css qui faut transformer en classe :

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
#left_haut {
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/left-top.jpg) no-repeat;
}
 
#left_haut h3 {
    padding-top:13px;
	text-align:center;
	font-size: 1.2em;
	color:#FFFFFF;
	margin:0px;
}
 
#leftbk {
    margin-left:62px;
	width: 211px;
	background: url(images/left-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 5px;
	position: relative;
}
 
#left_bas {
    margin-left:62px;
	height: 15px;
	width: 211px;
	background: url(images/left-bottom.jpg) repeat-y;
	position: relative;
}

J'ai eu beau essayé de créer une classe mais rien n'y fait, seulement le texte est affiché tout le reste passe à la trappe.

Voici le code avec les différentes classes (peut être que j'ai fait une erreur)

Code xhtml :

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
<div id="left">
     <B class="left_haut1"><h3>Connexion</h3></B>
     <B class="leftbk1">
          <p>Vous n'êtes pas identifié</p>
 
          <form action="login.php" method='post'>
 
               <p>Identifiant :</p>
               <p><input type="text" name="login" maxlength="250"/></p>
 
               <p>Mot de passe :</p>
               <p><input type="password" name="pass" maxlength="30"/></p>
 
               <p><input type="submit" value="Connexion"/></p>
 
               <p><a href="register.php">Inscription</a></p>
               <p><a href="lostpassword.php">Mot de passe perdu ?</a></p>
          </form>
     </B>
     <B class="left_bas1"></B>
 
     <B class="left_haut2"><h3>Menu</h3></B>
     <B class="leftbk2">
          <a title="Lien" href="../index.php">Accueil</a><br />
          <a title="Lien" href="../games/adresse.php">Adresse</a><br />
          <a title="Lien" href="../games/arcade.php">Arcade</a><br />
          <a title="Lien" href="#">Aventure</a><br />
          <a title="Lien" href="#">Casino</a><br />
          <a title="Lien" href="#">Débile</a><br />
          <a title="Lien" href="#">Divers</a><br />
          <a title="Lien" href="#">Guerre</a><br />
          <a title="lien" href="../games/puzzle.php">Puzzle</a><br />
          <a title="Lien" href="#">Réflexion</a><br />
          <a title="Lien" href="#">Sport</a><br /> </div>
     </B>
     <B class="left_bas2"></B>
</div>

et la partie de la feuille de style modifiée pour faire des classes :

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
B.left_haut1{
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/left-top.jpg) no-repeat;
}
 
B.left_haut2{
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/left-top.jpg) no-repeat;
}
 
B.left_haut2 h3 {
    padding-top:13px;
	text-align:center;
	font-size: 1.2em;
	color:#FFFFFF;
	margin:0px;
}
 
B.leftbk1 {
    margin-left:62px;
	width: 211px;
	background: url(images/left-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 5px;
	position: relative;
}
 
B.leftbk2 {
    margin-left:62px;
	width: 211px;
	background: url(images/left-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 5px;
	position: relative;
}
 
B.left_bas1 {
    margin-left:62px;
	height: 15px;
	width: 211px;
	background: url(images/left-bottom.jpg) repeat-y;
	position: relative;
}
 
B.left_bas2 {
    margin-left:62px;
	height: 15px;
	width: 211px;
	background: url(images/left-bottom.jpg) repeat-y;
	position: relative;
}

Je vous remercie de l'aide que vous allez m'apporter et peut être vous allez voir où est ce que çà cloche car là je sèche

^^

++

Winjet

**desert** · 22/04/2009, 19h58

Bonjour (et bienvenue),
Avec les balises div, cela fonctionne très bien...

Code xhtml :

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

1
2
3
4
5
6
7
8
<div id="left">
    <div class="left_haut"><h3>Connexion</h3></div>
    <div class="leftbk">
        ...
    </div>
    <div class="left_bas"></div>
    ...
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
div.left_haut {
    ...
}
div.leftbk {
    ... 
}
div.left_bas {
    ... 
}

**Winjet** · 22/04/2009, 20h36

J'ai tenté ce que tu as mis mais çà ne fonctionne pas, j'ai juste le texte, la mise en forme, les images ne s'affichent pas.

Voici le code du fichier 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
<div id="left">
     <div class="left_haut"><h3>Connexion</h3></div>
     <div class="leftbk">
          <p>Vous n'êtes pas identifié</p>
          <form action="login.php" method='post'>
 
	       <p>Identifiant :</p>
	       <p><input type="text" name="login" maxlength="250"/></p>
 
	       <p>Mot de passe :</p>
	       <p><input type="password" name="pass" maxlength="30"/></p>
 
	       <p><input type="submit" value="Connexion"/></p>
 
	       <p><a href="register.php">Inscription</a></p>
	       <p><a href="lostpassword.php">Mot de passe perdu ?</a></p>
 
	  </form>
     </div>
     <div class="left_bas"></div>		
 
    <div class="left_haut"><h3>Menu</h3></div>
    <div class="leftbk">
         <a title="Lien" href="../index.php">Accueil</a><br />
         <a title="Lien" href="../games/adresse.php">Adresse</a><br />
         <a title="Lien" href="../games/arcade.php">Arcade</a><br />
         <a title="Lien" href="#">Aventure</a><br />
         <a title="Lien" href="#">Casino</a><br />
         <a title="Lien" href="#">Débile</a><br />
         <a title="Lien" href="#">Divers</a><br />
         <a title="Lien" href="#">Guerre</a><br />
         <a title="lien" href="../games/puzzle.php">Puzzle</a><br />
         <a title="Lien" href="#">Réflexion</a><br />
         <a title="Lien" href="#">Sport</a><br />	
    </div>
    <div class="left_bas"></div>
</div>

Et 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
div.left_haut {
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/left-top.jpg) no-repeat;
}
 
div.left_haut h3 {
    padding-top:13px;
	text-align:center;
	font-size: 1.2em;
	color:#FFFFFF;
	margin:0px;
}
 
div.leftbk {
    margin-left:62px;
	width: 211px;
	background: url(images/left-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 5px;
	position: relative;
}
 
div.left_bas {
    margin-left:62px;
	height: 15px;
	width: 211px;
	background: url(images/left-bottom.jpg) repeat-y;
	position: relative;
}

Une suggestion sur la raison pourquoi çà fonctionne pas ?

Et merci d'essayer de m'aider Desert

**desert** · 22/04/2009, 21h26

L'adresse qui mène à ta feuille de style (balise link) est peut-être incorrecte. As-tu bien vérifié ?

**HiRoN** · 23/04/2009, 09h17

Envoyé par desert

L'adresse qui mène à ta feuille de style (balise link) est peut-être incorrecte. As-tu bien vérifié ?

+1... Ou le chemin vers les images mise en background...

**Winjet** · 23/04/2009, 10h14

L'appel de ma feuille de style est correct car les autres styles sont appliqués quand j'utilise les <div id="quelquechose"> tout fonctionne mais dés que je passe par des <div class="quelquechose"> et en utilisant la feuille de style que j'ai mise ci-dessus ben j'ai pu rien.

Et le chemin des images est correct.

Ps : Je rajoute toute la feuille de style peut être il y autre chose qui fait un conflit avec la classe.

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
body {
    font-family: verdana;
    font-size: 10px;
	color: #000000;
	background: #5c8eb1 url(images/fond.jpg) repeat-x;
	text-align: center;
    margin: 0 auto 0;
	position: relative;
}
 
div#site {
    text-align:left;
    background: url(images/site.jpg) repeat-y 0 0;
    width: 1000px;
    margin : auto
}
 
div#header {
    background: url(images/header.png) no-repeat 0 0;
    height : 205px;
    margin : 0;
    padding:0
}
 
img { border: 0; }
 
a {
    color : #000000;
    font-family:verdana;
    text-decoration:none;
}
 
a:hover , a:active , a:focus {
    color : #0D627E;
    font-weight : bold;
    text-decoration:none;
}
 
div#footer {
    background:url(images/footer.jpg) no-repeat 0 0;
    height : 101px;
	clear:both;
}
 
div#footer p {
    text-align: center;
    font-size: 0.9em;
    padding-top:40px; 
    clear:both;
    color:#666666;
}
 
div#footer a {
    color : #666666;
    text-decoration:none;
}
 
div#left {
    width:273px;
	float:left;
	margin:0px;
}
 
div#right {
    margin-left: 273px;
	margin-right: 61px;
}
 
div.left_haut {
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/left-top.jpg) no-repeat;
}
 
div.left_haut h3 {
    padding-top:13px;
	text-align:center;
	font-size: 1.2em;
	color:#FFFFFF;
	margin:0px;
}
 
div.leftbk {
    margin-left:62px;
	width: 211px;
	background: url(images/left-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 5px;
	position: relative;
}
 
div.left_bas {
    margin-left:62px;
	height: 15px;
	width: 211px;
	background: url(images/left-bottom.jpg) repeat-y;
	position: relative;
}
 
#right_haut {
    margin-left:0px;
	height: 20px;
	width: 665px;
	position: relative;
	background: url(images/right-top.jpg) no-repeat;
}
 
#right_bas {
    margin-left:0px;
	height: 15px;
	width: 665px;
	position: relative;
	background: url(images/right-bottom.jpg) no-repeat;
	margin-bottom:3px;
}
 
#rightbk {
    margin-left:0px;
	width: 665px;
	background: url(images/right-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 5px;
	position: relative;
}
 
#rightbk h2 {
    font-size: 1.3em; 
    color: #2366a7;
    margin: 0; 
	padding: 0;
    margin-bottom: 10px;
	padding-bottom: 0.3em; 
	border-bottom: 1px dashed #C0C0C0;
}
 
#left h2 { 
    margin-bottom: 10px;
	padding-left: 0.5em;
	padding-bottom: 0.3em;  
	border-bottom: 1px dashed #C0C0C0; 
	border-left: 3px solid #C0C0C0; 
}
 
ul#navbar{
    list-style:none;
    text-align:center;
    padding-left:140px;
    padding-top:180px; 
    font-size:10px;
	margin:0px;
}
 
ul#navbar li{
    float:left;
    width:135px;
    margin:0 14px 0 0;
    text-align:center;
    font-size:9px;
}
 
ul#navbar li a, ul#navbar li a:link{
    font-family:Verdana;
    font-size:9px;
    text-decoration:none;
    color:#0D627E;
}
 
ul#navbar li a:hover, ul#navbar li a:active, ul#navbar li a:focus {
    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    color:#0D627E;
}

++

Winjet

**HiRoN** · 23/04/2009, 10h32

Dans ce cas, je tenterai (à tester) :
- Remplacer "div.left_haut" par ".left_haut" (exemple)
- Modifier le nom des images "top-left", c'est pas top comme appellation

À défaut, repostes l'intégralité du code (X)HTML & CSS

**Winjet** · 23/04/2009, 10h50

Çà ne fonctionne toujours pas, je reposte l'intégralité du 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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" lang="fr">
     <head>
          <title>Bienvenue</title>
          <meta http-equiv="Content-Language" content="fr" />
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
 
     <body>
 
          <div id="site">
               <div id="header">
	            <ul id="navbar">
		         <li><a title="Lien" href="index.php">Accueil</a></li>
		    </ul>
	       </div>
 
	       <div id="left">
	            <div class="left_haut"><h3>Connexion</h3></div>
	            <div class="leftbk">
		         <p>Vous n'êtes pas identifié</p>
 
                         <form action="login.php" method='post'>
                              <p>Identifiant :</p>
			      <p><input type="text" name="login" maxlength="250"/></p>
			      <p>Mot de passe :</p>
			      <p><input type="password" name="pass" maxlength="30"/></p>
			      <p><input type="submit" value="Connexion"/></p>
 
			      <p><a href="register.php">Inscription</a></p>
			      <p><a href="lostpassword.php">Mot de passe perdu ?</a></p>
                         </form>
	            </div>
	            <div class="left_bas"></div>		
 
                   <div class="left_haut"><h3>Menu</h3></div>
		   <div class="leftbk">
		         <a title="Lien" href="../index.php">Accueil</a><br />
                         <a title="Lien" href="../games/adresse.php">Adresse</a><br />
                         <a title="Lien" href="../games/arcade.php">Arcade</a><br />
                         <a title="Lien" href="#">Aventure</a><br />
                         <a title="Lien" href="#">Casino</a><br />
                         <a title="Lien" href="#">Débile</a><br />
                         <a title="Lien" href="#">Divers</a><br />
                         <a title="Lien" href="#">Guerre</a><br />
                         <a title="lien" href="../games/puzzle.php">Puzzle</a><br />
                         <a title="Lien" href="#">Réflexion</a><br />
                         <a title="Lien" href="#">Sport</a><br />	
                    </div>
		    <div class="left_bas"></div>	    
	       </div>
 
               <div id="right">	
	            <div id="right_haut"></div>
	            <div id="rightbk">
		         <h2>Bienvenue</h2>
		         <p>Les administrateurs vous souhaitent la bienvenue.</p>
                    </div>
		    <div id="right_bas"></div>	    
	       </div>
 
	       <div id="footer">
	            <p>Flash Online © 2009 - Reproduction interdite</p>
               </div>
          </div>					
     </body>
</html>

et voici la feuille de style associé :

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
body {
    font-family: verdana;
    font-size: 10px;
	color: #000000;
	background: #5c8eb1 url(images/fond.jpg) repeat-x;
	text-align: center;
    margin: 0 auto 0;
	position: relative;
}
 
div#site {
    text-align:left;
    background: url(images/site.jpg) repeat-y 0 0;
    width: 1000px;
    margin : auto
}
 
div#header {
    background: url(images/header.png) no-repeat 0 0;
    height : 205px;
    margin : 0;
    padding:0
}
 
img { border: 0; }
 
a {
    color : #000000;
    font-family:verdana;
    text-decoration:none;
}
 
a:hover , a:active , a:focus {
    color : #0D627E;
    font-weight : bold;
    text-decoration:none;
}
 
div#footer {
    background:url(images/footer.jpg) no-repeat 0 0;
    height : 101px;
	clear:both;
}
 
div#footer p {
    text-align: center;
    font-size: 0.9em;
    padding-top:40px; 
    clear:both;
    color:#666666;
}
 
div#footer a {
    color : #666666;
    text-decoration:none;
}
 
div#left {
    width:273px;
	float:left;
	margin:0px;
}
 
div#right {
    margin-left: 273px;
	margin-right: 61px;
}
 
.left_haut {
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/LeftTop.jpg) no-repeat;
}
 
.left_haut h3 {
    padding-top:13px;
	text-align:center;
	font-size: 1.2em;
	color:#FFFFFF;
	margin:0px;
}
 
.leftbk {
    margin-left:62px;
	width: 211px;
	background: url(images/LeftBk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 5px;
	position: relative;
}
 
.left_bas {
    margin-left:62px;
	height: 15px;
	width: 211px;
	background: url(images/LeftBottom.jpg) repeat-y;
	position: relative;
}
 
#right_haut {
    margin-left:0px;
	height: 20px;
	width: 665px;
	position: relative;
	background: url(images/RightTop.jpg) no-repeat;
}
 
#right_bas {
    margin-left:0px;
	height: 15px;
	width: 665px;
	position: relative;
	background: url(images/RightBottom.jpg) no-repeat;
	margin-bottom:3px;
}
 
#rightbk {
    margin-left:0px;
	width: 665px;
	background: url(images/RightBk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 5px;
	position: relative;
}
 
#rightbk h2 {
    font-size: 1.3em; 
    color: #2366a7;
    margin: 0; 
	padding: 0;
    margin-bottom: 10px;
	padding-bottom: 0.3em; 
	border-bottom: 1px dashed #C0C0C0;
}
 
#left h2 { 
    margin-bottom: 10px;
	padding-left: 0.5em;
	padding-bottom: 0.3em;  
	border-bottom: 1px dashed #C0C0C0; 
	border-left: 3px solid #C0C0C0; 
}
 
ul#navbar{
    list-style:none;
    text-align:center;
    padding-left:140px;
    padding-top:180px; 
    font-size:10px;
	margin:0px;
}
 
ul#navbar li{
    float:left;
    width:135px;
    margin:0 14px 0 0;
    text-align:center;
    font-size:9px;
}
 
ul#navbar li a, ul#navbar li a:link{
    font-family:Verdana;
    font-size:9px;
    text-decoration:none;
    color:#0D627E;
}
 
ul#navbar li a:hover, ul#navbar li a:active, ul#navbar li a:focus {
    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    color:#0D627E;
}

Edit : Voici ce que je devrais obtenir et ce que j'obtiens en faisant des <div id="quelquechose">

Voici ce que j'obtiens quand j'utilise des <div class="quelquechose"> :

**HiRoN** · 23/04/2009, 11h00

Sauf erreur bête de ma part, je ne vois pas vraiment...

- Soit le chemin vers les images n'est pas bon (mais bon...)
- Soit le position:relative; crée un problème (mais bon... j'y crois pas...

)

Toutes tes images ne s'affichent pas ?
Seulement celles-là ?

**Winjet** · 23/04/2009, 11h07

Ben quand j'utilise <div id="..."> les images apparaissent mais dés que je passe par <div class="..."> ben là, elles disparaissent et en résumé, seul le texte apparait, la mise en forme imposée par le css passe à la trappe.

Pourtant tout est bon dans ma feuille de style css, enfin à ma connaissance ^^.

Le problème est que je peux pas utiliser deux fois le même id dans la même page, c'est pour çà je veux utiliser les classes.

Et je souhaite vraiment faire valider mon site par http://validator.w3.org/

Il me reste plus que cette histoire d'id à corriger.

**HiRoN** · 23/04/2009, 11h11

Sinon, essaye :
- Remplaces div#left par #left et tente
- Sinon testes avec #left .left_haut

**devyan** · 23/04/2009, 11h15

Normalement si tu as bien remplacé TOUS les id="leftxxx" et id="rightxxx" par class="..." dans le HTML et que tu as remplacé dans le CSS TOUTES les Références à #leftxxx et #rightxxx par .leftxxx et .rightxxx cela devrai fonctionner.

Je ne vois donc maintenant que 2 possibilités :
* tu en as oublié au moins une
* tu as modifier trop de choses

EDIT : Non au temps pour moi ...

Je pense avoir trouvé ... ENCORE les problèmes de priorités entre ID et CLASS... (Edit 2 : apparemment ce n'est pas non plus cela, je viens de tester)

EDIT 2 : j'ai fait un copier/coller du code fourni en exemple et ne reproduit pas le problème (avec FF3)
Avec quel navigateur as-tu le souci ?

**Winjet** · 23/04/2009, 12h15

J'utilise Firefox 3.0.9

**devyan** · 23/04/2009, 12h29

Envoyé par Winjet

J'utilise Firefox 3.0.9

Moi également et voici ce que j'obtiens :

**Winjet** · 23/04/2009, 12h33

Tu as bien utiliser et tester les deux derniers fichiers que j'ai mis ?

**devyan** · 23/04/2009, 12h41

Envoyé par Winjet

Tu as bien utiliser et tester les deux derniers fichiers que j'ai mis ?

Oui, j'ai utilisé ceux de ton message avec les copies d'écran...

**Winjet** · 23/04/2009, 12h46

Ben je comprends pas pourquoi çà ne fonctionne pas j'ai fait beau faire tous les tutoriels que j'ai trouvé sur le net pour créer une classe en css et aucun ne fonctionne avec moi.

C'est incompréhensible

**HiRoN** · 23/04/2009, 12h54

Envoyé par Winjet

C'est incompréhensible

Je vois bien, comme l'a dit devyan, des problèmes de priorités entre ID et CLASS. Mais où...

Sinon passe par un #id... (en groupant ensuite les lignes dans le css, afin que la taille reste correcte)

**Winjet** · 23/04/2009, 12h55

Tu peux faire un exemple Hiron stp ?

Merci

**devyan** · 23/04/2009, 12h58

Envoyé par HiRoN

Je vois bien, comme l'a dit devyan, des problèmes de priorités entre ID et CLASS. Mais où...

Sinon passe par un #id... (en groupant ensuite les lignes dans le css, afin que la taille reste correcte)

J'ai bien peur d'être dans un premier temps parti dans la mauvaise direction HiRoN (je suis un peu fatigué aujourd'hui ^^)

Je n'ai pas rencontré de problème de priorité avec son exemple...

A moins que le souci ne provienne d'une partie qui a été enlevée pour le forum

Besoin d'aide pour réaliser une classe avec du css

CSS

Discussions similaires

Partager

Partager