Optimización de código

webser · #1 (**permalink**) 12/10/2005, 18:30

Hola Amigos como están? Bueno aquí les muestro mi proyecto web que hago con CSS plz le pueden pone runa miradita ayúdenme que soy principiante yap? se los agradecería infinitamente :) quiero saber que errores cometo? que le pondrían que le sacarían, como hacerlo más optimo para todos los navegadores :D

CSS:

Código:

body {
	background-image:url(../imagenes/img_84.gif);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	height: 100%;
	width: 100%;
}
.tabla1 {
	height: auto;
	width: 766px;
	background-color:#E8441E;
	border-style: solid;
	border-width: 4px;
	border-color: #ffffff;
}
.tabla2 {
	height: 102px;
	width: 766px;
	background-image: url(../imagenes/topsitio02.jpg);
}
.tabla3 {
	height: auto;
	width: 766px;
	background-image: url(../imagenes/bottomsitio02.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	text-align: right;
}
.contenido {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	height: auto;
	width: 500px;
	padding: 6px;
}
.contenido p {
	text-align: justify;
}
.pie {
	height: 15px;
	width: 766px;
	background-color:#B81007;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	/*border-top: 1px solid #ffffff;*/
}
.cuadroizquierda {
	float: left;
	height: 400px;
	width: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
	padding: 6px;
}
a:link {
	text-decoration:none;
	color:#ffffff;
}
a:visited {
	text-decoration:none;
	color:#ffffff;
}
a:active {
	text-decoration:none;
	color:#FFCC00;
}
a:hover {
	text-decoration:underline;
	color:#FFCC00;
	font-weight:bold;
	text-decoration:underline;
}

HTML

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>lala</title>
<link href="css/sitio.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="tabla1">
  <div class="tabla2"></div>
    <div class="tabla3">
      <div class="contenido"></div>
    </div>
<div class="pie"></div>
</div>
</body>
</html>

amigos eso es :) espero que me pueda ayudar Muchos saludos y Abrazos!!

WS

Erik© · #2 (**permalink**) 12/10/2005, 19:25

En una rápida vista a tu codigo puedo mostrarte algunas cosas que puedes reemplazar...
body {
margin: 0;
font:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
height: 100%;
width: 100%;
}
----
Aparte puedes eliminar de las clases la etiqueta:
font-family: Verdana, Arial, Helvetica, sans-serif;
ya que esta esta por defecto en el body ....
Por sierto por que el primer div que creaste no cambias la clase por un ID (#)

Espero que te guste el mundo del CSS layout!... (ya que a algunos les parece dificil :P)

Salu2

webosiris · #3 (**permalink**) 12/10/2005, 21:26

Cita:

border-style: solid;
border-width: 4px;
border-color: #ffffff;

todo esto lo puedes reescribir con una sola línea:

Código:

border:4px solid #FFFFFF;

puedes hacer lo mismo con

Cita:

background-image: url(../imagenes/bottomsitio02.jpg);
background-repeat: no-repeat;
background-position: left bottom;

y reescribirlo

Código:

background:url(../imagenes/bottomsitio02.jpg) no-repeat left bottom;

el estilo para los enlaces link y visited son idénticos, así que podés encadenarlos así:

Código:

a:link, a:visited{
text-decoration:none;
color:#ffffff;}

tenés repetido "text-decoration:underline;" en a:hover, y por último, todos los height:auto los podés eliminar ya que auto es el valor que toma por defecto (y la altura no se hereda)... el "text-decoration:none;" de a:active también lo podés eliminar ya que eso si se hereda, en este caso de la pseudo clase a:link
-----------------------
y algo importante que me acabo de dar cuenta:
si querés que el height del body te lo interprete realmente como 100%, deberás definir como 100% la altura de html ya que por las reglas de CSS, height:<porcentaje> "Especifica la altura según un porcentaje. El porcentaje es calculado con respecto a la altura del bloque de contención de la caja. Si la altura del bloque de contención no se especifica explícitamente (es decir, depende de la altura del contenido) el valor es interpretado como 'auto'. "
así que deberás sustituir:
body{bla bla bla} por html, body{bla bla bla}

Bueno, esto es todo lo que vi (a esta altura de la noche)

webser · #4 (**permalink**) 13/10/2005, 05:44

wow, Muchas Gracias

se pasaron :P
Cuando tenga listo mi proyecto se los muestro: P
si pueden seguir aportando correcciones o cositas nuevas para que el código bienvenido sea :)

WS (M)

CORE · #5 (**permalink**) 13/10/2005, 15:07

algunos tips

si vas a usar mucho un par de propiedades usa clases
si solo se usa una vez en el sitio usa identificadores
si ya definiste la tipografia en el body no es necesario ponerla como propiedad dentro de todos los bloques que contengan texto

si las propieadades se repiten como en el ejemplo de a:link. a:visited usa comas

depues el codigo te a de ver quedado con menos lineas y habras programado menos pero organizado mejor

el code queda igual asi con menos programacion y mejor estructurado

Código:

body {
	background-image:url(../imagenes/img_84.gif);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin:0;
	height: 100%;
	width: 100%;
}
div#tabla1 {
	height: auto;
	width: 766px;
	background-color:#E8441E;
	border:solid 4px :
}
div#tabla2 {
	height: 102px;
	width: 766px;
	background-image: url(../imagenes/topsitio02.jpg);
}
div#tabla3 {
	height: auto;
	width: 766px;
	background: url(../imagenes/bottomsitio02.jpg) no-repeat left bottom;
	text-align: right;
}
p#contenido {
	font:10px;
	color: #FFF;
	height: auto;
	width: 500px;
	padding: 6px;
	text-align: justify;
}
div#pie {
	height: 15px;
	width: 766px;
	background-color:#B81007;
	font:10px;
	color: #FFF;
	text-align: center;
}
div#cuadroizquierda {
	float: left;
	height: 400px;
	width: 200px;
	font:12px;
	color: white;
	text-align: left;
	padding: 6px;
}
a:link. a:visited {
	text-decoration:none;
	color:white;
}
a:active {
	text-decoration:none;
	color:#FC0;
}
a:hover {
	text-decoration:underline;
	color:#FC0;
	font-weight:bold;
	text-decoration:underline;
}

saludos

webser · #6 (**permalink**) 13/10/2005, 17:17

CORE Muchas Gracias :D

WS