18073 sujets

Questions générales et questions de débutants

[RESOLU]Validation feuille de style CSS2

Salut,
tout a l'air bon a la validation de ma feuille de style mais je suis averti de ça (w3c...):
# Ligne : 60 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : strong
# Ligne : 72 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : a.menu:link
# Ligne : 73 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : a.menu:visited
# Ligne : 74 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : a.menu:hover
# Ligne : 75 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : a.menu:active

Faut donc que je renseigne ça pour la validation...
Mais j'en suis pas capable...
Merci d'avance.

Ma feuille : 

div#fond1 {  /* Pour mon fond global avec "texture" */
	background-position: center top;
	background-image: url(./images/fondbleuraye.jpg);
	background-repeat: repeat-y;}

div#header  {   /* Pour mon header avec line qui se repette */
          background-position: center top;
		  background-image: url(./images/header.jpg);}
		  
div#header2  {border:0px ;
          position:relative;
          width:100% ; 
          text-align:center;
          margin:0px; 
          padding:0px;}

div#header3  {border:0px ;
          position:relative;
          width:100% ; 
          text-align:center;
          margin:0px; 
          padding:0px;}

div#conteneur {   /* Liste pour bloc avec texte centré */
	position:relative;
	background-image: url(http://img522.imageshack.us/img522/8397/bacgtest10ph.png);
	background-position: center top;
	width: 1024px;
	height: 140px;
	border: 0px;}

ul {

     margin : 0;
     padding : 0;}
li {

     margin : 0;
     padding : 0;
     float : left;
     text-align : center;}

div#lienmenu{ 
              width: 100%;
              height : 100%;
			   margin: 0;
                padding: 0;
				text-align: center;}

/* BALISES*/

body {border:0; margin:0; padding:0;}

p {font-size:15px; font-family:Verdana, Arial, Helvetica, sans-serif; 
   margin:8px 4px 26px 4px;}

h1  {font-size:17px; font-family:Verdana, Arial, Helvetica, sans-serif; 
   margin:8px 4px 21px 4px;}
		  
strong   {color:black; background-color:no; 
          font-size:11px ;}
		  
img  {border:0px ;
      margin:0px 2px 5px 0px;} 

	    
/* Mes classes */ 
    
/* liens du menu*/  

/* liens du menu*/  
a.menu:link {color: #993333; text-decoration: none;font-size: 15px} /* lien non-visité */
a.menu:visited { color: #993333 ; text-decoration: none; font-size: 15px  } /* de base */
a.menu:hover { color: #996666; text-decoration: underline;font-size: 15px} /* lien survolé */
a.menu:active { color: #996633; text-decoration: none;font-size: 15px} /* lien activé */
                        

/*MON CADRE EXTENSIBLE */
						 	  
.img2  {border:0px ;
      text-align:justify;
	  margin-top:20px;} 	  
	  
.centrer {text-align:center;
          font-family:Verdana, Arial, Helvetica, sans-serif;}

.italic { font-style:italic;}

.bord {   width:520px ;
          padding-left:7px;
		  padding-right:7px;
          border:groove; 
          border-width:medium;
          color:#919191;}
		  
.bciel {  color:#66ccff;}

.papertest {
	background-image: url(./images/bacgtest1.png);
	background-repeat: no-repeat;
	background-position: center;
	text-align:center;
	width:100%;
	height:180px;
	padding-top:50px;
	padding-left:5px;
	visibility: visible;
	z-index: 1;}

/* justifié a droite ( ou pour page suivante...)*/
a.lienpageb:link {color: #FFCC00;; text-decoration: none;font-size: 8px; float:right;} /* lien non-visité */
a.lienpageb:visited { color: #ff9900 ; text-decoration: none; font-size: 8px ; float:right; } /* de base */
a.lienpageb:hover { color: #ff6600; text-decoration: underline;font-size: 8px; float:right;} /* lien survolé */
a.lienpageb:active { color: #FFCC00; text-decoration: none;font-size: 8px; float:right;} /* lien activé */

Modifié par Hum (12 Jan 2006 - 01:22)
C'est un problème assez classique mais assez pénible,
tu dois ajouter un background a tes liens 'de la couleur du fond)
En fait ça fait parti des plus dans l'accessibilité puiqu'un internaute qui a configuré ses liens dans des préférences de browser avec un fond de couleur
verra tous les liens avec cette couleur de fond excepté ceux qui ont été déféni par l'auteur de la css, auquel cas ils sont prioritaires.
Il se pourrait tres bien qu'il choisisse une couleur de fond qui soit la même que tes lien et donc invisible pr l'utilisateur
Modifié par Hermann (11 Jan 2006 - 20:16)
Bonsoir Hermann,
Merci pour cette info ...
car je pensais que ce n'était pas grave ... Smiley confused
yvo
yvo a écrit :

Bonsoir Hermann,
Merci pour cette info ...
car je pensais que ce n'était pas grave ... Smiley confused
yvo

En fait ce n'est pas grave dans le sens qu'il ne s'agit que d'un avertissement.

Cependant, il est conseillé pour une meilleure accessibilité de spécifier une couleur de fond lorsque l'on a spécifié une couleur. Dans le cas d'un débordement par exemple (en augmentant la taille du texte), celà évite que le texte qui déborde ne se confonde avec le fond sur lequel il déborde.
Bonsoir Stephan,
en fait c'est bien comme un avertissement que j'avais interpreté la chose
mais je m'étais arreté à ça
... mais il est peut "visiblement" etre utile pour certains de definir cette valeur
et ça je viens de le decouvrir car je n'y avais pas pensé
...c'est le coté genial de alsacreations (avec un "s" Smiley cligne )
yvo
Merci a tout le monde pour vos reponses !

Vous m'avez bien eclairé.
J'ai donc rajouter:
background-color: #FFFFFF;

et ça passe pleinement disons maintenant.
Salut Hum,
Sinon une autre solution plus judicieuse à mon avis est de définir la valeur par default (transparent) à ton background pour ecraser la valeur defini par l'utilisateur. Si tu utilise par la suite ce lien sur un fond pastel par exemple, le fond blanc ressortira.
D'ailleur c'est sans doute la seule utilité de l'existence des valeurs initiales.
Modifié par Hermann (12 Jan 2006 - 11:16)
Bonjour Hum,
Perso j'ai testé ça
background-color: transparent;

mais l'avertissement reste présent ...
si cela peut t'aider il y a ce post http://forum.alsacreations.com/topic.php?fid=4&tid=7401
pas facile de resoudre ce problème;
il semble bien qu'il faille definir une "vraie" couleur...
ce qui pour moi génère un gros problème dans le cas d'un menu
avec une image survolée...
yvo
Sujet clos
Aller à