Validation XHTML / CSS, 7 erreurs..

Version imprimable

04/09/2007, 11h35
{F-I}

Validation XHTML / CSS, 7 erreurs..

Salut à tous,

Je souhaite que vous m'aidez à valider en XHTML / CSS, il reste maintenant 7 erreurs.

J'ai essayé de comprendre pour les corriger, mais je n'ai pas bien trop compris donc je fais appel à vous...

Voici ce que donne la validation avec validator.w3.org, voir 7 erreurs détectés

Je vous remercie en avance de vos réponses.
04/09/2007, 11h53
MasterOfChakhaL

Salut,

Manifestement, tu as un problème avec une liste...

Dans une liste ul, tu n'as le droit que d'avoir des éléments li (qui peuvent contenir ce que tu veux - ou presque).

Sans code, difficile de t'en dire plus...

Par contre je te suggère fortement de jeter un oeil sur cette page qui indique les enfants autorisés pour chaque élément.
http://giminik.developpez.com/xhtml/ (a bookmarké absolument selon moi)

Ta liste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="rubrique">
   <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />
   <li><a href="#">Accueil</a></li>
   <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />
   <li><a href="#">Qui suis-je ?</a></li>
   <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />
   <li><a href="#">Mes réalisations</a></li>
   <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />
   <li><a href="#">Mes services</a></li>
   <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />
   <li><a href="#">Contactez-moi</a></li>
   <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />
</ul>

Comme le dit MasterOfChakhaL, dans un élément ul tu ne peux avoir que des éléments li.

07/09/2007, 09h49
{F-I}

Bonjour,

Je m'excuse pour mon retard, j'avais pas mal à faire :)

Bon, alors qu'est-ce que vous pouvez me conseiller afin de pouvoir valider ma page ?

A la place de <img src="design/separation.png" style="width: 169px; height: 1px;" alt="Petit barre de séparation" />, qu'est-ce que je pourrai remplacer ?

J'avais déjà essayé avec CSS mais je n'arrive pas bien, cette fois je veux bien réessayer mais avec vos conseils / guides ;)

Merci beaucoup d'avance

Tu peux essayer de gérer ça simplement en CSS en faisant un truc du style :

Code:

1
2
3
4
5
6
<ul>
   <li id="first"><a>Lien</a></li>
   <li><a>Lien</a></li>
   <li><a>Lien</a></li>
   <li><a>Lien</a></li>
</ul>

Code:

1
2
3
4
5
6
ul li#first{
   border-top:1px dotted #fff;
}
ul li{
   border-bottom:1px dotted #fff;
}

voici une manière de rendre ta page valide, en remplaçant l'image qui était dans la liste par une bordure en pointillé. La feuille de style 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
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
/* CSS Document */
 
*
	{
	margin: 0;
	padding: 0;
	}
 
body
	{
	background-color: #808080;
	}
 
#cadre_principal
	{
	position: relative;
	width: 1029px;
	height: 625px;
	margin: auto;
	margin-top: 30px;
	background-color: #FFFFFF;
	}
 
#gauche
	{
	position: absolute;
	left: 0px;
	background-image: url(partie_gauche.png);
	width: 277px;
	height: 580px;
	}
 
#logo_H
	{
	color: #AFC642;
	font-size: 24px;
	font-style: oblique;
	margin-top: 50px;
	margin-left: 40px;
	}
 
#logo_B
	{
	color: #fff;
	font-size: 18px;
	font-style: oblique;
	margin-top: 10px;
	margin-left: 120px;
	}
 
#gauche li
	{
	list-style-type: none;
	margin-left: 20px;
	font-variant : small-caps;
	/*margin-bottom: -10px;*/
	}
 
div#rubrique
	{
	margin-top: 75px;
	margin-left: 10px;
	}
 
div#rubrique a
	{
	color: #fff;
	text-decoration: none;
	}
 
#rubrique a:hover
	{
	color: #AFC642;
	text-decoration: none;
	}
 
#header
	{
	position: absolute;
	left: 277px;
	background-image: url(partie_header.png);
	width: 514px;
	height: 256px;
	}
 
#center
	{
	position: absolute;
	left: 277px;
	margin-top: 180px;
	width: 490px;
	text-align: justify;
	}
 
h2
	{
	margin-left: 50px;
	}
 
.articles
	{
	margin-top: 20px;
	margin-left: 25px;
	}
 
.titre
	{
	color: #AFC642;
	font-weight: bold;
	font-size: 18px;
	}
 
.articles p
	{
	padding-top: 10px;
	color: #808080;
	font-size: 14px;
	}
 
#droite
	{
	position: absolute;
	right: 0px;
	background-image: url(partie_droite.png);
	width: 238px;
	height: 580px;
	}
 
#news_droite
	{
	margin-top: 255px;
	margin-left: 30px;
	}
 
.titre_news
	{
	color: #899A35;
	font-size: 14px;
	}
 
#news_droite p
	{
	margin-top: 10px;
	width: 130px;
	text-align: justify;
	color: #808080;
	}
 
#footer
	{
	position: absolute;
	background-image: url(footer.png);
	width: 1029px;
	height: 45px;
	left: 0px;
	top: 580px;
	}
div#rubrique ul li{width : 160px;border-top :dotted;}

et la page html valide :

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
<!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>
 
 
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
			<meta http-equiv="Content-Style-Type" content="text/css" />
			<meta http-equiv="Content-Language" content="fr" />
			<link href="Le_fichiers/style.css" rel="stylesheet" type="text/css" /><title>Le portfolio de Böz</title></head><body>
			<div id="cadre_principal">
				<div id="gauche">
					<div id="logo_H">
						Le portfolio
					</div>
					<div id="logo_B">
						de Böz
					</div>
					<div id="rubrique"><ul>
						<li><a href="#">Accueil</a></li>
						<li><a href="#">Qui suis-je ?</a></li>
						<li><a href="#">Mes réalisations</a></li>
						<li><a href="#">Mes services</a></li>
						<li><a href="#">Contactez-moi</a></li>
						</ul></div>
				</div>
				<div id="header">
				</div>
				<div id="center">
					<h2>Accueil</h2>
					<div class="articles">
						<span class="titre">
							Bienvenue
						</span>
						<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper
suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te
feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
					</div>
			  </div>
				<div id="droite">
				  <div id="news_droite">
				  	<span class="titre_news">
						Newsletter
					</span>
					<p>Inscrivez-vous à la newsletter pour vous tenir au courant de l'évolution du site.<br/><br/>
					S'inscrire</p>
 
				</div>
				<div id="footer">
				</div>
			</div></div>
		</body></html>

08/09/2007, 12h40
{F-I}

C'est ce que je faisais mais le petit souci c'est que dotted est trop petit à ce que je trouve, ça rend moins joli...

http://images2.hiboox.com/vignettes/3607/wgovm4wh.jpg

J'ai mis à votre disposition un petit morceau d'image avec 2 entourés en rouge...

En haut, c'est ok, et celui en bas avec "dotted" c'est trop petit, comment règler ? Peut-t-on espacrer un peu ?