[Résolu] Aide pour rendre mon CSS valide

[Emm']

Bonjour,

Ca bosse dur sur ce site

Je viens de passer mes pages xhtml 1.0 strict et j'ai réussi à rectifier les erreur Maintenant, elles sont valide !

Par contre le css... Je ne sais pas quoi faire des messages d'erreurs (à peu près toujours les mêmes) :

Css:

body {	font-family: trebuchet ms, verdana, tahoma,arial, sans-serif;
font-size: 90%;
color: #333333;
background-color: white;
line-height: 180%;
margin: 0;
padding: 0;
text-align: center;}
/* Set the page width */
#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {	width: 85%;
margin: 0 auto;
text-align: left;}
#wrapper-menu-top {	background: white url('images/bg02-white-left.png') no-repeat left top;
background-color: #ffffcc;}
#menu-top {	background: transparent url('images/bg02-white-right.png') no-repeat right top;
overflow: hidden; /* no idea why this works, but it fixes a FF problem */}
#menu-top ul {	margin: 0 20px;
padding: 1em 0 0 0;
list-style: none;
font-size: 85%;
float: left;}
#menu-top li {	display: inline;
float: left;}
#menu-top a {	float: left;
background:url(images/menuleft.png) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
line-height: 1.5em;}
#menu-top a span {	background: transparent url(images/menuright.png) no-repeat right top;
padding:5px 15px 4px 6px;
color:#5b8fbe;
display: block;
float: left;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */}
#menu-top a:hover { background-position:0% -42px; }
#menu-top a:hover span {	background-position:100% -42px; }
#wrapper-header {	background: transparent url('images/bg.png') top center repeat-x;}
#header {background: #eee url('images/banner_mountains.jpg') no-repeat center top;}
#logo {	float: left;
height: 110%;
margin-top: 2.5em;
margin-left: 2em;	}
#title {	float: right;
height: 100%;
margin-top: 2.5em;
margin-right: 2em;}
#wrapper-header2 {	background: transparent url('images/bg02-blue-left.png') top left no-repeat;}
#wrapper-header3 {	background: transparent url('images/bg02-blue-right.png') top right no-repeat;}
#header h1 {	margin: 0 20px;
padding: 0;
height: 192px;
line-height: 3em;
color: #c72d96;
font-size: 260%;
text-align: right;}
#wrapper-content {	background: white url('images/barre13left.png') no-repeat left top;
background-color: #ffffcc;}
* html #wrapper-content { height: 1%; }
#content {	background: transparent url('images/barre14right.png') no-repeat right top;
padding: 5px 245px 5px 40px;}
#wrapper-menu-page {	float: right;
width:180px;
margin: 20px 30px 3em 2em;
background: transparent url('images/menu_web.png') no-repeat;
text-align: center;
line-height: 140%;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}
* html #wrapper-menu-page { margin-right: 15px; }
#menu-page { 	padding-top: 5px;}
#menu-page ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;}
#menu-page h3 {	font-size: 75%;
text-transform: uppercase;
margin: 1em 0 0.3em 0;
color: #11a54f;
font-weight: normal;
letter-spacing: 0.15em;}
#menu-page a:link, #menu-page a:visited { color: #c72d96; }
#menu-page a:hover { color: #57db7a; }
#piedpage {	font-size: 85%;
text-align: center;
text-decoration: underline;
color: #5b8fbe;}
#wrapper-footer {	margin-top: 1em;
text-align: center;}
#footer {	margin: 0 20px;
background-color: #e5f0fc;
border: 1px solid #ccc;
border-bottom: 0;
clear: both;}
h2 { 	font-size: 140%;
color: #c72d96;	}
h3 { font-size: 110%;
color: #11a54f;
padding-left: 20px;}
h4 { 	font-size: 110%;
color: #000000;
text-align: left;}
h5 {	font-size: 110%;
color: #5b8fbe;}	
a:link, a:visited { color: #5b8fbe; text-decoration: none; }
a:hover{ color: #993399; text-decoration: none; }

et le message d'erreurs (il est joli, n'est-ce pas !) :

	* Line : 6 (Level : 1) Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. : body
* Line : 26 (Level : 1) You have no color with your background-color : #wrapper-menu-top
* Line : 26 (Level : 2) Redefinition of background-color : #wrapper-menu-top
* Line : 59 (Level : 1) You have no background-color with your color : #menu-top a span
* Line : 73 (Level : 1) You have no color with your background-color : #header
* Line : 104 (Level : 1) You have no background-color with your color : #header h1
* Line : 111 (Level : 1) You have no color with your background-color : #wrapper-content
* Line : 111 (Level : 2) Redefinition of background-color : #wrapper-content
* Line : 147 (Level : 1) You have no background-color with your color : #menu-page h3
* Line : 152 (Level : 1) You have no background-color with your color : #menu-page a:visited
* Line : 152 (Level : 1) You have no background-color with your color : #menu-page a:visited
* Line : 153 (Level : 1) You have no background-color with your color : #menu-page a:hover
* Line : 159 (Level : 1) You have no background-color with your color : #piedpage
* Line : 169 (Level : 1) You have no color with your background-color : #footer
* Line : 171 (Level : 2) Redefinition of border-bottom-width : #footer
* Line : 177 (Level : 1) You have no background-color with your color : h2
* Line : 180 (Level : 1) You have no background-color with your color : h3
* Line : 185 (Level : 1) You have no background-color with your color : h4
* Line : 190 (Level : 1) You have no background-color with your color : h5
* Line : 194 (Level : 1) You have no background-color with your color : a:visited
* Line : 194 (Level : 1) You have no background-color with your color : a:visited
* Line : 195 (Level : 1) You have no background-color with your color : a:hover

 

Merci !!

[Dylav]

J'avoue que je ne comprends pas bien la numérotation des lignes. En effet, ton source ne comporte que 106 lignes, alors que des messages référencent jusqu'à la ligne 195 !

 

Ceci dit,

• le premier message t'indique qu'il est préférable d'insérer entre guillemets les noms des polices qui contiennent des espaces, mais que, si tu ne le fais pas, il ignorera les espaces de début et de fin et, au milieu du nom de la police, il remplacera tout groupe d'espaces par un espace unique,
  
• le message le plus fréquent (You have no background-color with your color) t'alerte sur le fait que tu as décrit une couleur de texte sans définir la couleur de fond, d'où un risque d'absence de contraste entre les deux (par exemple, écrite en blanc sur blanc),
  
• les messages (Redefinition of...) ne doivent être que des Warnings, mais il faudrait que tu nous donnes les véritables lignes qui les déclenchent, pour une analyse plus pertinente.
  

Petite remarque qui n'a rien à voir : pour les passages de [code] particulièrement copieux, il est assez élégant de remplacer la balise BBCode [code] par [codebox], qui limite la taille de la fenêtre en ajoutant un ascenseur. Je trouve ça beaucoup plus agréable à manipuler, pour ma part. Pour te montrer ce que ça donne, je me permets de l'appliquer à ta liste d'anomalies.

[Emm']

Pour prendre moins de place, j'ai retiré plein d'espace sur le css !! Normal, les N° ne collent plus

Si j'ai tout compris, il faut que je signale une couleur de fond un peu partout.

Ca ne changera l'aspect de mes pages ? Ou plutot que faire pour que ce soit intelligent et ne modifie pas l'aspect de mes pages... Qui sont bien contrastées ?

[Dylav]

Pour le 3ème type de message, il s'agit effectivement d'un warning, qui t'indique que tu dis deux fois la même chose...

 

Exemple :

 

#wrapper-menu-top {background: white url('images/bg02-white-left.png') no-repeat left top;
			   background-color: #ffffcc;}

Tu indiques d'abord, dans l'ordre global, que la couleur de fond doit être blanche (background: white), puis dans l'ordre explicite, qu'elle doit être jaune pâle (background-color: #ffffcc).

 

Tu dois pouvoir arranger ça ?;o)

 

Voili voilou.

 

@+

[Dylav]

Si j'ai tout compris, il faut que je signale une couleur de fond un peu partout.

Nos posts se sont télescopés.

 

Pour la couleur de fond, il s'agit juste d'une alerte. Ton source CSS reste correct. Mais il faut que tu t'assures de la pertinence entre la couleur que tu imposes (ici, celle du texte), et l'autre (ici, celle du fond), prise par défaut égale à celle du conteneur de niveau supérieur et, pour le body lui-même, le blanc.

 

Finalement, aucune des anomalies signalées n'est grave mais, si tu veux produire un code CSS parfaitement clean, tu sais quoi faire...

[Emm']

c'est bon.

Juste je suis surpris: quand j'ai testé le Xhtml, une fois le test ok, le site w3c me donnait les lignes pour fiare apparaitre l'icone de validité & cette fois je ne la vois pas...

J'ai quand même trouvé le lien en m'inspirant de celle valide en xhtml !

 

Merci pour tes précisions précieuses !

[Dylav]

Voili voilou

 

Le problème semble avoir trouvé sa solution.

Ainsi, afin de signaler clairement à ceux qui ont un problème similaire qu'ils ont peut-être une solution toute trouvée (s'ils pensent à utiliser la fonction Recherche en indiquant le mot-clé "résolu" auparavant), et afin de signaler aux autres contributeurs qu'il est inutile de continuer à se creuser la tête sur le problème (à moins d'avoir des suppléments d'informations à apporter pour mieux comprendre ce qui posait problème), un modérateur a préfixé le titre du topic avec la mention [résolu].

Merci, à l'avenir, de bien vouloir prendre à votre charge cette mise à jour quand vous estimez que votre problème a été résolu de manière satisfaisante (et parallèlement, si le problème a disparu "mystérieusement", inutile d'induire les gens en erreur ) Pour cela, votre premier message