Foros del Web - Ver Mensaje Individual

willyfc · #6 (**permalink**) 03/04/2009, 18:57

claro que si se puede hacer con css, tienes 2 opciones,si te fijas las paginas que se ve bien a 800x600 o es por que están hechas con medidas porcentuales o con medidas fijas donde el limite máximo de ancho se lo que entre en la resolución.

Cuando yo trabajo con medidas fijas hago las webs a 770px de ancho para que se vean bien ya que de los 800px tienes que descontar barras de scroll y ventana del navegador. Aquí un ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
*{margin:0; padding:0;}
#contenedor{width:770px; height:auto; overflow:auto; margin:0 auto;}
#cabecera{width:770px; height:100px; background-color:#333;text-align:center;}
#contenido{width:770px; height:auto; overflow:auto;}
#izq{width:150px; height:300px; float:left; background-color:#666;}
#der{width:150px; height:300px; float:right; background-color:#666;}
#centro{width:470px; height:300px; float:left; background-color:#999;}
#pie{width:770px; height:50px; background-color:#CCC; clear:both; text-align:center;}
</style>
</head>
 
<body>
<div id="contenedor">
    <div id="cabecera">Cabecera</div>
    <div id="contenido">
        <div id="izq"></div>
        <div id="centro"></div>
        <div id="der"></div>
    </div>
    <div id="pie">pie</div>
</div>
</body>
</html>

La otra es trabajar un diseño líquido o sea en porcentajes, o sea que se ajuste a la medida del usuario.Un ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
*{margin:0; padding:0;}
#contenedor{ width:100%; height:auto; overflow:auto;}
#cabecera{width:100%; height:100px; background-color:#333;text-align:center;}
#contenido{width:100%; height:auto; overflow:auto;}
#izq{width:150px; height:300px; float:left; background-color:#666;}
#der{width:150px; height:300px; float:right; background-color:#666;}
#centro{height:300px;background-color:#999;}
#pie{width:100%; height:50px; background-color:#CCC; clear:both; text-align:center;}
</style>
</head>
 
<body>
<div id="contenedor">
    <div id="cabecera">Cabecera</div>
    <div id="contenido">
        <div id="der"></div>
        <div id="izq"></div>
        <div id="centro"></div>     
    </div>
    <div id="pie">pie</div>
</div>
</body>
</html>

espero te sirva