28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous, j'aurais aimer un peu d'aide pour une validation W3C en CSS.
J'ai corriger pas mal de mes fautes mais quelque une persistes !

a écrit :
360 #MB_caption La propriété text-shadow n'existe pas en CSS niveau 2.1. mais existe en [css2, css3] : #fff 0 1px 0
387 #MB_frame La propriété -webkit-border-radius n'existe pas : 7px
388 #MB_frame La propriété -moz-border-radius n'existe pas : 7px
389 #MB_frame La propriété border-radius n'existe pas en CSS niveau 2.1. mais existe en Smiley css3 : 7px
394 #MB_window La propriété -webkit-box-shadow n'existe pas : 0 8px 64px #000
395 #MB_window La propriété -moz-box-shadow n'existe pas : 0 0 64px #000
396 #MB_window La propriété box-shadow n'existe pas en CSS niveau 2.1. mais existe en Smiley css3 : 0 0 64px #000
398 #MB_window La propriété -webkit-border-radius n'existe pas : 7px
399 #MB_window La propriété -moz-border-radius n'existe pas : 7px
400 #MB_window La propriété border-radius n'existe pas en CSS niveau 2.1. mais existe en Smiley css3 : 7px


mon code css de cette parti est :
#MB_overlay {
	position: absolute;
	margin: auto;
	top: 0;	left: 0;
	width: 100%; height: 100%;
	z-index: 9999;
	background-color: #000!important;
}
#MB_overlay[id] { position: fixed; }

#MB_window {
	position: absolute;
	top: 0;
	border: 0 solid;
	text-align: left;
	z-index: 10000;
}
#MB_window[id] { position: fixed!important; }

#MB_frame {
	position: relative;
	background-color: #ADBECE;
	height: 100%;
}

#MB_header {
	margin: 0;
	padding: 0;
}

#MB_content {
	padding: 6px .75em;
	overflow: auto;
}

#MB_caption {
	font: bold 100% "Lucida Grande", Arial, sans-serif;
	text-shadow: #FFF 0 1px 0;
	padding: .5em 2em .5em .75em;
	margin: 0;
	text-align: left;
}

#MB_close {
	display: block;
	position: absolute;
	right: 5px; top: 4px;
	padding: 2px 3px;
	font-weight: bold;
	text-decoration: none;
	font-size: 13px;

}


#MB_loading {
	padding: 1.5em;
	text-indent: -10000px;
	background: transparent url(connexion/spinner.gif) 50% 0 no-repeat;
}

/* Color scheme */
#MB_frame {
	padding-bottom: 7px;
	[b]-webkit-border-radius: 7px; [/b]
	[b]-moz-border-radius: 7px;[/b]
	border-radius: 7px;
}
#MB_window {
	background-color: #EFEFEF;
	color: #000;
	[b]-webkit-box-shadow: 0 8px 64px #000; [/b]
	[b]-moz-box-shadow: 0 0 64px #000; [/b]
	[b]box-shadow: 0 0 64px #000;[/b]
	
	[b]-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border-radius: 7px;[/b]
}
#MB_content { border-top: 1px solid #08416B; }
#MB_header {
  background: url('connexion/header.png');
  border-bottom: 1px dotted #52759C;
}
#MB_caption { color: #000 }
#MB_close { color: #777 }
#MB_close:hover { color: #000 }


/* Alert message */
.MB_alert {
	margin: 10px 0;
	text-align: center;
}



J'ai mis les parti d'erreur en GRAS afin de vous aider.
Quand j'utilise le code css corriger de W3C les angle ne sont plus arrondi

(http://wolfsite.fr/lol/ cliquez sur "se connecter" pour voir)


MERCI ! Smiley biggrin
Bonjour,

Les réponses du validateur sont assez limpides Smiley cligne

Tu utilises des propriétés css propres à des navigateur (-moz et -webkit) qu'il n'est pas possible de valider. Tu tentes également l'utilisation de propriétés de CSS3 qui n'est pas encore publiée.

ps: pas pu me connecter
Modifié par Igor (30 Aug 2008 - 20:00)
D'accord, mais comment je fais pour ca marche et que sa soit validée ?

(pour la connexion c'est normale que sa ne marche pas , c'est pas encore créer)
Maxime44710 a écrit :
D'accord, mais comment je fais pour ca marche et que sa soit validée ?

Les supprimer Smiley cligne
D'abord ta css est tout ce qu'il y a de plus valide. C'est juste que tu as utilisé des propriétés que seul Firefox (-moz) et safari (-webkit, text-shadow) reconnaissent.
Mais si tu veux vraiment avoir tes bords arrondis et une css qui valide à 100% alors deux solutions :
- passer par du javascript (mais alors bonjour la surcharge de ton code, ,généralement il te crée autant de <span> que nécessaire pour effectuer l'arrondi)
- ou passer par des images

L'avantage de ces deux dernières solutions est que tu auras un résultat semblable sur IE, ce qui n'est pas le cas avec les propriétés css propriétaires Smiley smile
Everholt a écrit :
L'avantage de ces deux dernières solutions est que tu auras un résultat semblable sur IE, ce qui n'est pas le cas avec les propriétés css propriétaires Smiley smile

Notons tout de même que text-shadow (introduite dans CSS 2, supprimée dans CSS 2.1, réintroduite en CSS 3) et border-radius (introduite en CSS 3) ne sont pas des propriétés «propriétaires». Ce sont juste des propriétés:
1. inexistantes en CSS 2.1 (d'où les erreurs retournées par le validateur);
2. non implémentées par certains navigateurs.

Igor a écrit :
Les réponses du validateur sont assez limpides Smiley cligne

+1

La marche à suivre lorsqu'on utilise un validateur HTML ou CSS est de lire les résultats de validation. Se contenter de regarder si la page affiche du rouge ou du vert est une erreur, et signifie tout simplement que l'on n'a pas bien compris l'intérêt des outils que sont les validateurs.

Les validateurs ne viennent pas poser un sceau de respectabilité aux pages web. Ils donnent des informations techniques à propos des pages web, à destination des concepteurs de ces pages. Rien de plus.
Modifié par Florent V. (30 Aug 2008 - 19:33)