Foros del Web » Creando para Internet » CSS »

Optimización de código

Estas en el tema de Optimización de código en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/10/2005, 19:30
Avatar de webser  
Fecha de Ingreso: septiembre-2004
Ubicación: Santiago de Chile
Mensajes: 31
Antigüedad: 13 años, 2 meses
Puntos: 0
Optimización de código

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
__________________
<div class "webser"> Hola </div>
  #2 (permalink)  
Antiguo 12/10/2005, 20:25
 
Fecha de Ingreso: agosto-2005
Mensajes: 35
Antigüedad: 12 años, 4 meses
Puntos: 0
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
__________________
Saludos
Erik©
(Antes loco_erik ... por reflexion de lo feo que suena me cambie de nick ;) ) :si:
  #3 (permalink)  
Antiguo 12/10/2005, 22:26
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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)
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 13/10/2005, 06:44
Avatar de webser  
Fecha de Ingreso: septiembre-2004
Ubicación: Santiago de Chile
Mensajes: 31
Antigüedad: 13 años, 2 meses
Puntos: 0
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)
__________________
<div class "webser"> Hola </div>
  #5 (permalink)  
Antiguo 13/10/2005, 16:07
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
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
  #6 (permalink)  
Antiguo 13/10/2005, 18:17
Avatar de webser  
Fecha de Ingreso: septiembre-2004
Ubicación: Santiago de Chile
Mensajes: 31
Antigüedad: 13 años, 2 meses
Puntos: 0
CORE Muchas Gracias :D



WS
__________________
<div class "webser"> Hola </div>
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 12:11.