Foros del Web » Creando para Internet » CSS »

Validacion CSS

 Estas en el tema de Validacion CSS en el foro de CSS en Foros del Web. Hola, estoy validando mi CSS y me salta el siguiente error y warnings Cita: 177 #information La propiedad opacity no existe en CSS versión 2.1 ...
  #1 (permalink)  
Antiguo 15/06/2009, 09:40
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Validacion CSS
Hola, estoy validando mi CSS y me salta el siguiente error y warnings

Cita:
177 #information La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0.7
177 #information Error de análisis sintáctico opacity=70)
185 #imglink La propiedad opacity no existe en CSS versión 2.1 pero existe en [css3] : 0.4
185 #imglink Error de análisis sintáctico opacity=40)
Cita:
7 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y body
7 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y body
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:active
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:visited
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:visited
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:active
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:link
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:link
47 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu a:hover
47 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu a:hover
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:hover
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:active
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:link
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:active
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:visited
62 Color de primer plano y color de fondo iguales en dos contextos #slideleft:hover y #menu-inf a:hover
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:visited
62 Color de primer plano y color de fondo iguales en dos contextos #slideright:hover y #menu-inf a:link
el css es el siguiente:

Código css: 
Ver original
  1. body {
  2.     background-image:url(../img/fondo.gif);
  3.     margin:0;
  4.     padding:0;
  5.     font-family:Verdana, Geneva, sans-serif;
  6.     font-size:9pt;
  7.     color:#333333;
  8. }
  9.  
  10. #contenido {
  11.     margin:0 auto 0 auto;
  12.     width:773px;
  13.     background-image:url(../img/fondo2.gif);
  14.     background-repeat:repeat-y;
  15. }
  16.  
  17. #cabecera {
  18.     margin:0px 10px 0px 10px;
  19.     height:110px;
  20. }
  21.  
  22. #cabecera img {
  23.     border:0;
  24.     float:left;
  25.     margin-left:250px;
  26.     margin-top:4px;
  27. }
  28.  
  29.  
  30. #menu {
  31.     width:736px;
  32.     height:31px;
  33.     background-image:url(../img/fons-menu.jpg);
  34.     background-repeat:no-repeat;
  35.     margin-left:19px;
  36.     padding-left:20px;
  37. }
  38.  
  39. #menu img {
  40.     margin:0 20px 0 20px;
  41.     vertical-align:middle;
  42. }
  43.  
  44. #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
  45.     text-decoration:none;
  46.     font-size:11pt;
  47.     color:#333333;
  48. }
  49.  
  50. #menu-inf {
  51.     border-top:1px solid #333333;
  52.     width:736px;
  53.     margin-left:19px;
  54.     text-align:center;
  55.     padding:8px 0 8px 0;
  56.     margin-top:0;
  57. }
  58.  
  59. #menu-inf a:link, #menu-inf a:visited, #menu-inf a:hover, #menu-inf a:active {
  60.     text-decoration:none;
  61.     font-size:11pt;
  62.     color:#333333;
  63. } 
  64.  
  65. #cos {
  66.     margin:10px 40px 40px 40px;
  67.     min-height:400px;
  68. } 
  69.  
  70. #cos #titol {
  71.     font-family:Verdana, Geneva, sans-serif;
  72.     color:#5A1011;;
  73.     font-size:16pt;
  74.     border-bottom:3px double #5A1011;
  75.     margin-bottom:20px;
  76. }
  77.  
  78. #cos #titol .primera-lletra {
  79.     font-size:25pt;
  80. }
  81.  
  82. #cos p {
  83.     text-align:justify;
  84. }
  85.  
  86. #tit-index {
  87.     font-size:11pt;
  88.     font-weight:bold;
  89.     margin-top:20px;
  90. }
  91.  
  92. p.principal {
  93.     text-align:justify;
  94.     width:600px;
  95.     margin-left:20px;
  96. }
  97.  
  98. img.principal {
  99.     padding:1px 1px 1px 1px;
  100.     border:1px solid #cccccc;
  101.     margin-right:20px;
  102. }
  103.  
  104. #promocions{
  105.     margin-top:25px;
  106.     border:1px solid #cccccc;
  107.  
  108. }
  109.  
  110. #imatges-portada{
  111.     margin-top:50px;
  112.     width:800px;
  113.     border:0px solid #cccccc;
  114.  
  115. }
  116. #cont-tendes {
  117.     width:672px;
  118.     margin:auto;
  119.     overflow:auto;
  120. }
  121.  
  122. .tenda{
  123.     padding:0;
  124.     width:210px;
  125.     float:left;
  126.     background:transparent;
  127.     height:auto;
  128.     margin-right:10px;
  129.     margin-bottom:10px;
  130. }
  131.  
  132.  
  133. img.principal {
  134.     padding:1px 1px 1px 1px;
  135.     border:1px solid #cccccc;
  136.     margin-right:5px;
  137. }
  138.  
  139.  
  140. #bottom {
  141.     background-image:url(../img/bottom.gif);
  142.     background-repeat:no-repeat;
  143.     width:774px;
  144.     height:9px;
  145.     margin:0 auto 0 auto;
  146.     padding:0;
  147. }
  148.  
  149. #validator {
  150.     margin-left:900px;
  151. }
  152.  
  153. #contacte{
  154.     width:250px;
  155.     margin-left:30px;
  156.     overflow:auto;
  157. }
  158.  
  159.  
  160. /**************************************************************************************************************/
  161.  
  162. a span {visibility:hidden;color:white;text-align:center;font:bold 14px "Trebuchet MS",arial;position:absolute;top:105px;left:325px;visibility:hidden;border:5px solid #fff;z-index:10;}
  163. a:hover img.min {z-index:100;border:1px solid red;}
  164. a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
  165. a:hover span {visibility:visible;border:5px solid #fff;background:#000000;z-index:100;}
  166. a:hover span img {visibility:visible;z-index:100;}      
  167. a:focus span , a:active span  {visibility:visible;z-index:10;background:#000000;}
  168. a img.fotos {border:1px solid white;margin:5px;}
  169.  
  170.  
  171. /**************************************************************************************************************/
  172. #slideshow {list-style:none; color:#fff}
  173. #slideshow span {display:none}
  174. #wrapper {width:506px; margin:50px auto; display:none}
  175. #wrapper * {margin:0; padding:0}
  176. #fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
  177. #information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter: alpha(opacity=70)}
  178. #information h3 {padding:4px 8px 3px; font-size:14px}
  179. #information p {padding:0 8px 8px}
  180. #image {width:500px}
  181. #image img {position:absolute; z-index:25; width:auto}
  182. .imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
  183. #imgprev {left:0; background:url(../img/left.gif) left center no-repeat}
  184. #imgnext {right:0; background:url(../img/right.gif) right center no-repeat}
  185. #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter: alpha(opacity=40);}
  186. .linkhover {background:url(../img/link.gif) center center no-repeat}
  187. #thumbnails {margin-top:15px}
  188. #slideleft {float:left; width:20px; height:81px; background:url(../img/scroll-left.gif) center center no-repeat; background-color:#222}
  189. #slideleft:hover {background-color:#333}
  190. #slideright {float:right; width:20px; height:81px; background:#222 url(../img/scroll-right.gif) center center no-repeat}
  191. #slideright:hover {background-color:#333}
  192. #slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
  193. #slider {position:absolute; left:0; height:81px}
  194. #slider img {cursor:pointer; border:1px solid #666; padding:2px}
  195.  
  196. /**************************************************************************************************************/

Como puedo superar la prueba sin que se vea afectado mi diseño?

Saludos y gracias de antemano
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #2 (permalink)  
Antiguo 15/06/2009, 11:05
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Validacion CSS
Hola Sergi.
El primer error (relativo a opacity) está muy claro.
Esa propiedad no existe en CSS 2.1 Es una propiedad de las propuestas para CSS 3, que de momento es eso, una propuesta.
2 posibles soluciones:
--> o la retiras de tu hoja de estilo o
--> Validas bajo css 3 y no con css 2.1
Pero si vas a validar también la accesibilidad, entonces no tendrás otra que sacar opacity de tu css.

Sobre el segundo bloque, creo que me explicaré mejor ( lo entenderás también mejor) con un ejemplo:
Tengamos un contenedor con fondo negro (#000) y dentro de él otra caja con el fondo formado por una imagen de tonos muy claros y el color de texto negro (o muy oscuro, #444)
En ese caso te marcará el error del segundo bloque.

Pero si en este mismo ejemplo, al div interior (el que tiene de fondo la imagen) le añades a sus propiedades del fondo un color (background: #fff url(tu_ruta.jpg)...;} el error desaparece.

Por qué. Porque entre el color del texto oscuro y el fondo del primer contenedor (de fondo negro) hay un elemento que el validador sí puede valorar (un fondo blanco) como apropiado para que el texto resalte.

¿Me expliqué?

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 16/06/2009, 00:42
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Respuesta: Validacion CSS
Hola, si te explicaste aunque me surgen una duda.

en mi caso tengo lo siguiente:

Código css: 
Ver original
  1. #menu {
  2.     width:736px;
  3.     height:31px;
  4.     background-image:url(../img/fons-menu.jpg);
  5.     background-repeat:no-repeat;
  6.     margin-left:19px;
  7.     padding-left:20px;
  8.     background-color:#FFF;
  9. }
  10.  
  11. #menu img {
  12.     margin:0 20px 0 20px;
  13.     vertical-align:middle;
  14. }
  15.  
  16. #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
  17.     text-decoration:none;
  18.     font-size:11pt;
  19.     color:#333;
  20. }

que es el css de mi menu. un menu siemple con una imagen que hace el efecto de degradado, enteonces si no pongo el background debajo de color me da error, pero sino quiero background-color? como lo hago? ya q si le pongo un background me jode lel efecto.

da error en la linia: color:#333

gracias por la respuesta, y gracias de antemano por la siguiente! :D

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #4 (permalink)  
Antiguo 16/06/2009, 00:46
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Respuesta: Validacion CSS
a #menú prueba de ponerle también la propiedad color, que sirve apra especificar el color del texto,a demás de optimizar todas las propiedades bg.

background:url(../img/fons-menu.jpg) no-repeat #FFF;
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 16/06/2009, 00:56
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Respuesta: Validacion CSS
mmmm, aunque le ponga el backgrounf en menu, me da el error en

Código css: 
Ver original
  1. #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
  2.     text-decoration:none;
  3.     font-size:11pt;
  4.     color:#333; // Aqui le tendria q poner el background... pero me jode la imgen de fondo
  5. }

no ser como solucionarlo... y sino se puede lo dejo con el warning porque la pagina ya esta validada!

PD: aunque me gustaria dejar el tema zanjado
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #6 (permalink)  
Antiguo 16/06/2009, 05:09
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Respuesta: Validacion CSS
mmmm, alguien me saca de la duda? de como dejarlo sin q afecte a mi imagen de fondo?
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #7 (permalink)  
Antiguo 16/06/2009, 05:11
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Respuesta: Validacion CSS
y si donde esta la iamgen de fondo también le pones las propiedades de bg?

PD: Edita y no postees dos veces seguidas.
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 16/06/2009, 05:37
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Validacion CSS
Pon un enlace a la página, seguro que habrá una forma de quitar ese aviso si tan importante es, aunque sea colocando un div oculto (display:none) que contenga un fondo sólido. Nunca lo utilicé y no se si el validador se lo tragará con papas o no.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:47.