como hacer una pagina como esta..

#1 (**permalink**) 21/08/2011, 20:57

hola espero me puedan ayudar con esto:

+ quiero hacer una pagina web que tenga el encabezado y el pie de pagina al 100% de anchura

+ y el cuerpo (contenido) sea en medida de pixeles algo parecido a esta pagina [url]http://www.televisa.com/[/url]

-- el punto es que quiero medidas para que se vea bien mi pagina en la mayoria de resoluciones de pantalla..

gracias...

estoy usando este codigo de css

CSS

@charset "utf-8";
/* contenedor y capas */

* {margin:0px; padding:0px; border:0px;}

body {
text-align:center;
}

#contenedor {
width:100%;
height:100%;

}

#barrasuperior {
background-color:#00C;
width:100%;
height:20px;
border-left:black 1px solid;

}

#cabecera {
background-color: #FFF;
height:100px;
text-align:center;
}

/*estilo imagenes logo y publcidad*/

#logotipo {
background-color:#FF9;
width:269px;
height:80;
float:left;

}

#publicidad {
background-color:#F90;
width:300px;
height:80;
float:right;
}

/*fin logo y publicidad*/

#cuerpo {
background-color:#06F;
width:60%;
height:600px;
float:right;
text-align:center;

}

#bannerflash {
background-color:#3C6;
width:40%;
height:600px;
float:left;
text-align:center;

}

#piedepagina {
background-color:#333;
width:100%;
height:75px;
clear:both;
text-align:center;

}

y este html

HTML

<link href="estilos css/contenedorycapas.css" rel="stylesheet" type="text/css"/>
<link href="estilos css/estilos.css" rel="stylesheet" type="text/css">

<style type="text/css">

<html>

</style></head>

<body>

<div id="contenedor">
<div id="barrasuperior"></div>
<div id="cabecera">
<div id="logotipo"> <img src="imagenes/logo.png" alt="todoenloscabos"></div>
<div id="publicidad">Publicidad</div>

</div>

<div id="bannerflash"> bannerflash </div>
<div id="cuerpo"> cuerpo </div>
<div id="piedepagina"> piedepagina </div>

</div>

</body>
</html>

disenowebmexico · #2 (**permalink**) 22/08/2011, 14:52

hablas de un diseño dinamico donde los tamaños cambian con la resolucion del browser o de la pantalla (o si lo estas viendo en un celular o en un ipad)

De hecho hay dos formas de hacer lo. En vez de definir px por los tamaños puedes definir "em". em depende del tamaño de las letras que tiene el usario predefinida en su browser.

Pero talvez mas facil y mas modernos son "media queries". Simplemente busca en google. Es una funcion de CSS3 con que puedes incluir differentes stylesheets por differentes resoluciones o solo para celulares etc.

De hecho me gustan mas diseños con un tamaño fijo, si es dinamico debes definir en vez de "width:100%" un "min-width" y un "max-width" para que no se vea tan feo en resoluciones muy altas (por ejemplo en una pantalla de 27")

#3 (**permalink**) 23/08/2011, 19:15

muchas gracias me ah sido de utilidad tu informacion sabes de algun condigo ya echo para eso.. te lo qgradeceria mucho si me pudieras pasar alguno..