Foros del Web » Creando para Internet » CSS »

Optimizar el css de este diseño

Estas en el tema de Optimizar el css de este diseño en el foro de CSS en Foros del Web. Un cordial saludo. Alguien seria tan amable de corregirme los errores css de esta plantilla. Tengo 6 errores y 32 advertencias Código HTML: .box_content a ...
  #1 (permalink)  
Antiguo 19/01/2011, 19:24
(Desactivado)
 
Fecha de Ingreso: diciembre-2010
Ubicación: TR0LLA
Mensajes: 39
Antigüedad: 13 años, 4 meses
Puntos: 2
Optimizar el css de este diseño

Un cordial saludo.

Alguien seria tan amable de corregirme los errores css de esta plantilla.

Tengo 6 errores y 32 advertencias

Código HTML:
.box_content a {
	color: #0000FF;
}
.box_content a:focus, a:hover {
	color: #00FF;
	text-decoration: underline;
}
#pre_header {
	display: none;
}
#post_header {
	display: none;
}
#header_container {
	display: none;
}
lli.nav_element {
	display: none;
}
li.nav_element a {
	display: none;
}
h1#title {
	display: none;
}
h2#title span {
	display: none;
}
#header {
	display: none;
}
#title {
	display: none;
}
#nav_container {
	display: none;
}
table {
	margin-left: auto;
	margin-right: auto;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit inherit 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table, td, th {
	vertical-align: middle;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: none;
}
html {
	height: 100%;
	padding-bottom: 1px;
}
body {
	background: #0B3861 url(" ");
	background-attachment: repeat-x;

	color: #444;
	font: normal 80% sans-serif;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
	color: #555;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.3em;
}
h4, h5, h6 {
	font-weight: bold;
}
h1 {
	font-size: 2.6em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.25em;
}
h5 {
	font-size: 1.1em;
}
h6 {
	font-size: 1em;
}
p {
	margin-bottom: 1em;
}
a:focus, a:hover {
	color: #000;
}
a {
	color: #357;
	text-decoration: underline;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
}
address {
	margin-bottom: 1.5em;
}
blockquote {
	margin: 1.5em;
}
del, blockquote {
	color: #666;
}
em, dfn, blockquote, address {
	font-style: italic;
}
strong, dfn {
	font-weight: bold;
}
sup, sub {
	line-height: 0;
}
pre {
	margin: 1.5em 0;
	white-space: pre;
}
pre, code, tt {
	font: 1em monospace;
	line-height: 1.5;
}
li ul, li ol {
	margin-left: 1.5em;
}
ul, ol {
	margin: 0 1.5em 1.5em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
dl {
	margin: 0 0 1.5em;
}
dl dt {
	font-weight: bold;
}
dd {
	margin-left: 1.5em;
}
ul.tabbed {
	display: inline;
	margin: 0;
}
ul.tabbed li {
	float: left;
	list-style: none;
	margin: 0;
}
textarea {
	overflow: auto;
}
.text, textarea, select {
	background: #FCFCFC;
	border: 1px inset #AAA;
	padding: 4px 5px;
}
.text:focus, textarea:focus, select:focus {
	background: #FFFFF5;
}
.button {
	background: #F9F9F3;
	border: 1px outset #AAA;
	padding: 4px 5px;
}
.button:active {
	border-style: inset;
}
.form_property, .form_value {
	float: left;
}
.form_property {
	text-align: right;
	width: 110px;
}
.form_value {
	padding-left: 24px;
}
.form_row_submit .form_value {
	padding-left: 132px;
}
.center, .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.bordered, img.alignleft, img.alignright, img.aligncenter {
	border: 1px solid #DDD;
	padding: 3px;
	background: #FFF;
}
img.alignleft, img.left {
	margin: 0 1.5em 1em 0;
}
img.alignright, img.right {
	margin: 0 0 1em 1.5em;
}
.left, .alignleft {
	float: left;
}
.right, .alignright {
	float: right;
}
.clear, .clearer {
	clear: both;
}
.clearer {
	display: block;
	font-size: 0;
	line-height: 0;
}
.content_separator, .archive_separator {
	background: #D5D5D5;
	clear: both;
	color: #FFE;
	display: block;
	font-size: 0;
	height: 1px;
	line-height: 0;
	margin: 12px 0 24px;
}
.archive_separator {
	margin: 0 0 14px;
}
.post {
	margin-bottom: 24px;
}
.post_title a, .post_meta a, .post_date a {
	text-decoration: none;
}
.post_title a:hover, .post_meta a:hover, .post_date a:hover {
	text-decoration: underline;
}
.post_date {
	border-top: 1px solid #D5D5D5;
	color: #777;
	font-size: 0.9em;
	padding: 8px 0 12px;
}
.post_date a {
	color: #444;
}
.post_meta {
	background: #E7E7E7;
	border: 1px solid #D7D7D7;
	color: #777;
	font-size: 0.9em;
	padding: 6px 10px;
}
.post_meta a {
	color: #345;
}
.post_meta a:hover {
	color: #001;
}
.archive_pagination {
	margin-bottom: 1.6em;
}
.archive_post {
	margin-bottom: 14px;
}
.archive_post_title {
	padding-top: 3px;
}
.archive_post_date {
	background: #FAFAFA;
	border-bottom: 1px solid #C5C5C5;
	border-right: 1px solid #CFCFCF;
	float: left;
	margin-right: 12px;
	padding: 2px 0 5px;
	text-align: center;
	width: 46px;
}
.archive_post .post_date {
	border: none;
	padding: 3px 0 0;
}
.archive_post_day {
	font: normal 1.6em Georgia, serif;
}
.thumbnails {
	margin: 0 0 1em -8px;
}
.thumbnails a.thumb {
	background: #D5D5D5;
	display: block;
	float: left;
	margin: 0 0 8px 8px;
	padding: 3px;
}
.thumbnails a.thumb:hover {
	background: #C0C0C0;
}
.thumbnails .thumb img {
	display: block;
}
.box {
	margin-bottom: 0.6em;
}
.box_title {
	background: url("http://img.webme.com/pic/c/*********/menuazul.gif") repeat center top;
	border-bottom: 1px solid #C6C9CB;
	color: #e0e0e0;
	font: bold 1.3em sans-serif;
	padding: 7px 10px 6px;
}
.box_content {
	padding: 8px 0 8px;
}
.box li:first-child {
	border-top: none;
}
div.comment_list {
	border-top: 1px solid #D6D6D6;
	margin: 1em 0 2em;
}
.comment {
	border-bottom: 1px solid #D6D6D6;
	padding-top: 10px;
}
.comment_date {
	font-size: 0.9em;
}
.comment_date a {
	color: #567;
	text-decoration: none;
}
.comment_date a:hover {
	color: #001;
	text-decoration: underline;
}
.comment_body {
	padding-top: 4px;
}
.comment_gravatar {
	width: 48px;
}
.comment_gravatar img {
	background: #FFF;
	border: 1px solid #DDD;
	padding: 2px;
}
#layout_wrapper {
	background: url("") fixed;
	padding-bottom: 16px;
}
#layout_wrapper2 {
	background: url("") no-repeat center top;
	padding-top: 10px;
}
#layout_wrapper3 {
	background: #FFF;
	margin: 0 auto;
	width: 992px;
}
#layout_wrapper4 {
	padding: 6px;
}
#header_wrapper {
	height: 150px;
}
#head {
	padding: 48px 48px 0;
}
#site_title h1 {
	color: #A0C3D0;
	font-size: 2.5em;
}
#site_title h1 a {
	color: #A0C3D0;
	text-decoration: none;
}
#site_title h1 a:hover {
	color: #DDD;
}
#site_title h2 {
	color: #999;
	font-size: 1.3em;
}
#navigation {
	background: #fff url("http://img.webme.com/pic/c/*********/menunegro.png") repeat-x;
	margin-bottom: 3px;
	padding-top: 1px;
}
#navigation a {
	color: #fff;
	display: block;
	font-weight: bold;
	text-decoration: none;
}
#navigation a:hover {
	color: #fff;
}
#nav li {
	border-right: 1px solid #fff;
}
#nav a {
	font-size: 1.0em;
	padding: 3px 6px;
}
#nav a:hover {
	background: url("http://img.webme.com/pic/c/*********/menuazul.gif") repeat-x;
}
#nav li.current_page_item a {
	background: #fff;
	color: #000;
}
#subnav {
	border-top: 1px solid #cdcdcd;
	background: url("http://img.webme.com/pic/c/*********/menuazul.gif") repeat-x;
}
#subnav {
	color: #fff;
	display: block;
	font-weight: bold;
	text-decoration: none;
}
#subnav li {
	border-right: 1px solid #fff;
}
#subnav a {
	font-size: 1.0em;
	padding: 4px 7px;
}
#subnav a:hover {
	background: url("http://img.webme.com/pic/c/*********/menunegro.png") repeat-x;
}
#main_wrapper {
	background: url("http://img.webme.com/pic/c/cssplantillas/ngloom6.gif") repeat-y;
	border-bottom: 1px solid #C3C4C1;
	margin-bottom: 3px;
}
#main {
	background: url("http://img.webme.com/pic/c/cssplantillas/ngloom7.gif") no-repeat;
	padding: 24px 0;
}
#content_wrapper {
	width: 690px;
}
#content {
	padding: 0 20px;
}
#sidebar_wrapper {
	width: 290px;
}
#sidebar {
	padding: 0 18px;
}
#dashboard {
	background: #C9CDCF url("http://img.webme.com/pic/c/cssplantillas/ngloom8.gif") repeat-x;
	border: 1px solid #ACAFB0;
	color: #404448;
	margin-bottom: 3px;
	padding: 16px;
}
#dashboard .col3 {
	width: 288px;
}
#dashboard .col3mid {
	width: 370px;
}
#dashboard .col3mid .col3_content {
	border-left: 1px solid #B0B4B8;
	border-right: 1px solid #B0B4B8;
	margin: 0 20px;
	padding: 0 20px;
}
#dashboard .col_title {
	color: #606669;
	font-size: 1.5em;
}
#dashboard ul {
	margin: 0;
}
#dashboard li {
	border-bottom: 1px solid #BABEBF;
	list-style: none;
	padding: 5px 0;
}
#dashboard li a {
	color: #404448;
	text-decoration: none;
}
#dashboard li a:hover {
	color: #202428;
	text-decoration: underline;
}
#footer {
	background: #DDD;
	border: 1px solid #CCC;
	padding: 8px 12px;
}
#footer .right, #footer .right a {
	color: #777;
	text-decoration: none;
}
#footer .right a:hover {
	color: #223;
	text-decoration: underline;
}
* html #main, * html #dashboard {
	height: 0.01%;
	min-height: 0.01%;
}
input {
	background: url(http://img.webme.com/pic/c/cssplantillas/inputimg.gif);
	border: solid #999 1px;
}
input {
	background: url(http://img.webme.com/pic/c/cssplantillas/inputimg.gif) repeat-x #fff;
	border: solid #999 1px;
}
textarea {
	background: url(http://img.webme.com/pic/c/cssplantillas/inputimg.gif) repeat-x #fff;
	border: solid #999 1px;
	margin-bottom: 10px;
}
  #2 (permalink)  
Antiguo 19/01/2011, 23:13
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Optimizar el css de este diseño

Hola
Aquí tienes la dirección del validador de css:
http://jigsaw.w3.org/css-validator/

Suerte

PD: perdón no habia leido lo de los errores y advertencias.
En el validador te dice donde están los errores ¿o no?
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 20/01/2011, 06:55
(Desactivado)
 
Fecha de Ingreso: diciembre-2010
Ubicación: TR0LLA
Mensajes: 39
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: Optimizar el css de este diseño

Si hay muestra los errores pero no se como arreglarlos, soy nuevo en esto
  #4 (permalink)  
Antiguo 20/01/2011, 10:01
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Optimizar el css de este diseño

Esto es lo que muestra el validador. Los números del principio de cada línea son la línea de tu código. No te fíes de los que aparecen abajo porque no se corresponderán con tu archivo.
A continuación te pone el error o advertencia seguido del código erroneo. Sólo tienes que corregir lo que está mal.

Los errores (3):
5 .box_content a:focus, a:hover Propiedad no válida : color #00ff no es un color válido de 3 o 6 cifras hexadecimales #00FF Sustituye el color por uno de 3 cifras o 6. El que pones tienes 4
47 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select Propiedad no válida : font Faltan valores o no se reconocen los valores : inherit inherit 100% inherit inherit 100%
Revisa la manera de declarar esa propiedad. Puedes dar las propiedades también por separado en lugar de todas dentro de font.
75 body Propiedad no válida : background-attachment repeat-x no es un valor de background-attachment : repeat-x repeat-x Los posibles valores de background-attachment son fixed scroll e inherit. Repeat-x no es valor válido.
He encontrado además un selector lli en lugar de li que tampoco funcionará.

Las Advertencias (31)
Todas son iguales. Te advierten de que se está usando el mismo color para el fondo que para el texto por lo que no se podrá leer. No sé si será lo que quieres.
402 Color de primer plano y color de fondo iguales en dos contextos #footer y #site_title h1 a:hover
414 Color de primer plano y color de fondo iguales en dos contextos #layout_wrapper3 y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos img.aligncenter y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos input y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos .comment_gravatar img y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos img.bordered y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos #navigation y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos #nav li.current_page_item a y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos img.alignleft y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos img.alignright y #navigation a
414 Color de primer plano y color de fondo iguales en dos contextos textarea y #navigation a
420 Color de primer plano y color de fondo iguales en dos contextos textarea y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos input y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos img.alignright y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos img.bordered y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos .comment_gravatar img y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos img.alignleft y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos #navigation y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos #nav li.current_page_item a y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos #layout_wrapper3 y #navigation a:hover
420 Color de primer plano y color de fondo iguales en dos contextos img.aligncenter y #navigation a:hover
441 Color de primer plano y color de fondo iguales en dos contextos img.alignleft y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos img.aligncenter y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos #navigation y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos img.bordered y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos input y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos #nav li.current_page_item a y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos textarea y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos img.alignright y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos #layout_wrapper3 y #subnav
441 Color de primer plano y color de fondo iguales en dos contextos .comment_gravatar img y #subnav

Etiquetas: diseño
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




La zona horaria es GMT -6. Ahora son las 03:34.