Les cuento estoy haciendo un sitio desde 0 y estoy usando capas para hacer un diseno agradable, ahora quiero q una capa tenga un 100% y una capa ubicada debajo de ella de otro color empieze desde el 10% de la capa de arriba y termine en el 80% (osea la 2da capa no ocupara todo el ancho de la pagina)
el problema esq cuando a la de arriba le doy 100 en el explorador sale mas largo q el ancho de la web, y a la de abajo le coloque 80% (haciendo un calculo) y queda mas grande que la de arriba..
esto lo hago porq e visto paginas q cuando le das restaurar o se abren en pcs con otras resoluciones estas se adaptan y quiiero hacer eso el problema esq si pongo una imgen sobre una capa queda montada y no quiero eso, es decir se puede tener un tamano MINIMO (que se adapte al contenido) y si se puede estirar lo haga???
estoy guiandome con la pagina de AMAZON que veo que usan capas, pues cuando restauro no queda nada montado pero ami si... alguien me ayuda???
aca el codigo:
Código HTML:
<!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=utf-8" />
<title>Documento sin título</title>
<link href="/Estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#BannerAzul1 {
position:absolute;
left:1px;
top:1px;
width:336px;
height:129px;
z-index:1;
background-color: #1b1464;
visibility: visible;
}
#BannerAmarilloBusqueda {
position:absolute;
left:354px;
top:107px;
width:80%;
height:54px;
z-index:3;
background-color: #F3C910;
visibility: visible;
}
#LogoBest {
position:absolute;
left:91px;
top:10px;
width:165px;
height:131px;
z-index:5;
visibility: visible;
}
#BannerAzul2 {
position:absolute;
left:6px;
top:1px;
width:99%;
height:129px;
z-index:2;
background-color: #1B1464;
visibility: visible;
}
#Banneramarillo {
position:absolute;
left:136px;
top:107px;
width:218px;
height:54px;
z-index:4;
background-color: #F3C910;
visibility: visible;
}
#Layer4 {
position:absolute;
left:972px;
top:104px;
width:151px;
height:58px;
z-index:6;
}
-->
</style>
</head>
<body>
<div id="BannerAzul1"></div>
<div id="BannerAmarilloBusqueda">AQUI VA EL BUSCADOR DE PRODUCTOS </div>
<div id="LogoBest"><img src="Imagenes/BestShop.gif" width="254" height="172" /></div>
<div id="BannerAzul2"></div>
<div id="Banneramarillo"></div>
</body>