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

**Winjet** · 23/04/2009, 13h01

Non rien a été enlevé du forum

Ce que vous avez vu c'est l'intégralité du code HTML et de la feuille de style

Il n'y a rien a cacher ^^

**HiRoN** · 23/04/2009, 13h01

Au vue de ton problème, si tu es obligé de dupliquer les "id" pour faire un truc du genre :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="id1">balblabla</div>
<div id="id2">balblabla</div>
</div>
 
<div id="container2">
<div id="id3">balblabla</div>
<div id="id4">balblabla</div>
</div>

Mais que container == container2, id1 == id3 & id2 == id4 (donc avec des id mais ont le même CSS)

Au niveau CSS :

Code CSS :

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

1
2
3
#container1, #container2 { XXX }
#id1, #id3 { XXX }
#id2, #id4 { XXX }

Afin "d'alléger" le CSS...

**Winjet** · 23/04/2009, 13h16

J'ai effectué ceci comme modification :

Pour left_haut, leftbk et left_bas, çà fonctionne avec les id

mais pour left_haut1, leftbk1 et left_bas1, çà ne fonctionne pas (une petite erreur dans la feuille de style peut être ^^ mais je crois pas)

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 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_haut1"><h3>Menu</h3></div>
		   <div id="leftbk1">
		         <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_bas1"></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 pour 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
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, #left_haut1 {
    margin-left:62px;
	height: 37px;
	width: 211px;
	position: relative;
	background: url(images/left-top.jpg) no-repeat;
}
 
#left_haut h3 , #left_haut1 h3{
    padding-top:13px;
	text-align:center;
	font-size: 1.2em;
	color:#FFFFFF;
	margin:0px;
}
 
#leftbk, #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;
}
 
#left_bas, #left_bas1 {
    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;
}

**Macmillenium** · 23/04/2009, 13h37

Bonjour,

Vu que tu as que des id, je pense qu'il y a un problème d'héritage quelque part, les id étant prioritaires.
Essayes en transformant toutes les id en classe.

**Winjet** · 23/04/2009, 13h47

J'ai transformé tous mes id en class aussi bien dans le code html que la feuille de style.

Mais là, je n'ai plus que le texte, je n'ai plus la mise en forme ni les images.

A croire que la feuille de style n'autorise l'utilisation des styles que si on se sert d'un id, je sais c'est idiot mais j'ai l'impression que c'est çà.

Ou alors, c'est peut être moi qui me suis trompé donc si avec les codes sources que j'ai donné, quelqu'un pouvait faire la transformation des id en class, je pourrais comparer avec ce que j'ai fait et je lui en serais très reconnaissant

Merci beaucoup,

**Macmillenium** · 23/04/2009, 14h10

Un petit effort pour nous proposer une page en ligne ou un fichier zip/rar avec tes fichiers et tes images

?

**HiRoN** · 23/04/2009, 14h12

Envoyé par Macmillenium

Un petit effort pour nous proposer une page en ligne ou un fichier zip/rar avec tes fichiers et tes images

?

+1... Au vu du problème plutôt incompréhensible...

**Winjet** · 23/04/2009, 17h12

Je vous fait çà tout de suite

Edit : Voici l'archive avec les fichiers nécessaires (css, images, ...). Il devrait avoir tous les fichiers nécessaires s'il manque quelque chose, faite le savoir ^^

**Winjet** · 24/04/2009, 00h49

J'ai fini par trouver la solution

, il m'en a fallut du temps ^^

Voici comment la feuille de style était codé :

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
div#left {
    width:273px;
	float:left;
	margin:0px;
}
 
#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;
}

Et maintenant voici la bonne version opérationnelle :

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

Mon site est maintenant reconnu conforme W3C XHTML 1.1
Ma feuille de style a la recommandation CSS Niveau 2.1

Le problème venait du fait qu'une classe ne peut pas contredire une ID. Or l'ID left était plus forte que les classes left_haut, leftbk et left_bas. Voici la raison pourquoi çà ne fonctionnait pas.

En tout cas c'est grâce à vous tous , en potassant bien à fond les exemples et les solutions que vous m'avez donné, que j'ai pu apercevoir la solution.

Vous êtes

.

Merci beaucoup.

Winjet

**devyan** · 24/04/2009, 11h01

Le problème venait du fait qu'une classe ne peut pas contredire une ID. Or l'ID left était plus forte que les classes left_haut, leftbk et left_bas. Voici la raison pourquoi çà ne fonctionnait pas.

En fait pas tout à fait...

Il est possible de "forcer" une déclaration en ajoutant le mot clef !important dans la déclaration.

Code exemple :

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

.toto{ background-color: red !important; }

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

CSS

Discussions similaires

Partager

Partager