La Capa se estira mas de lo que debe

JuJoGuAl · #1 (**permalink**) 27/07/2011, 09:39

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&iacute;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>

ArturoGallegos · #2 (**permalink**) 27/07/2011, 10:14

tu problema es que estas mezclando porcentajes con pixeles y eso esta mal echo ya que no siempre la pantalla sera del mismo tamaño

y en segunda el div de la parte de abajo que según tu quieres empiece un 10% después del primer div y termine al 80% le has puesto la medida en 80% y se te alarga de mas por que

80% de ancho + 10% de margen al inicio (tu pusiste 300px y algo) + 20% de margen a la derecha para que termine antes

80+10+20 = 110%

ñ.ñ te presto una calculadora si no te sale la cuenta

JuJoGuAl · #3 (**permalink**) 27/07/2011, 10:18

-.- jajajaja esq estoy trabajando con div es la primera vez q lo uso puesto yo siempre use tablas, pero e leido q los div son mejores... ahora bien tengo un rollo xD mi meno (vertical) es dinamico es decir lo jala de una BD, ahora como hago para que el en ese DIV yo dibujo el DIV y le doy su fondo pero en el DIV coloque una tabla y le puse el bucle pero el DIV no se estira (coloque heigh=100% y toma toda la pagina) asi que que valor tengo que colocar para q el div se estire a medida que se estira la tabla, (agrego que coloque la tabla dentro del DIV)

ArturoGallegos · #4 (**permalink**) 27/07/2011, 10:35

si es un menú no debe estar en una tabla sino en una lista

<ul>
<li>...</li>
</ul>

y el que no crezca es por que seguramente tu menú esta flotando (eg. float:left) esto se corrige limpiando el float con overflow:hidden o auto sobre el elemento padre en tu caso el div que contiene al menú

otra forma es agregando un elemento al final de tu menú y aplicarle clear:both

por ultimo trata de no usar tablas bajo ninguna circunstancia salvo que los datos a mostrar lo requieran

JuJoGuAl · #5 (**permalink**) 27/07/2011, 10:54

Bueno use tablas porq como te dije es mi costumbre ahora hablas de overflow y floats y me enredas bastante nose si te quito tiempo pero trata de explicarme cosas mas detallasdas porque en el tema de capas estoy como NULO, ahora una pregunta general ya tengo un MEDIO diseno de la pagina devidida en capas, como hago para q los tamanos de esta sea REAJUSTABLE pero no modifiquen el contenido... es decir si tengo un texto q abarca 2 lineas, que siga abarcando las 2 lineas... osea que el tamano MINIMO sea uno determinado y el maximo estirable.. no se si me explico y se puede hacer

ArturoGallegos · #6 (**permalink**) 27/07/2011, 10:59

mmm como son preguntas demasiado básicas omitiré mi respuesta y te remito a algunos enlaces para que leas y trates de aprender tu mismo

http://www.araudi.net/migracion/migr...sin_dolor.html

http://www.araudi.net/migracion/migr..._parte_II.html

http://librosweb.es/ -> en este lee todo lo de xhtml y css

JuJoGuAl · #7 (**permalink**) 27/07/2011, 11:18

Bueno estoy leyendo y tomando las sugerencias pero aun no consigo hacer lo que busco xD

ArturoGallegos · #8 (**permalink**) 27/07/2011, 11:19

muestra el código completo tal cual lo tienes ahorita para poder revisar

nota: el código que se muestra en el navegador, php o asp no nos sirve de nada para ayudarte

JuJoGuAl · #9 (**permalink**) 27/07/2011, 11:27

Bueno este es el codigo que veo cuando le doy (VER CODIGO FUENTE)

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&iacute;tulo</title>

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

<style type="text/css">

<!--

* {margin: 0; padding: 0;}

html, body {width: 100%; height: 100%;}

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	

}

#Azul {

	position:absolute;

	left:0%;

	top:0px;

	width:100%;

	height:104px;

	z-index:1;

	background-color: #1b1464;

}

#Amarillo {

	position:absolute;

	left:94px;

	top:86px;

	width:90%;

	height:55px;

	z-index:2;

	background-color: #f4cf08;

}

#LogoBest {

	position:absolute;

	left:37px;

	top:1px;

	width:231px;

	height:150px;

	z-index:3;

}

#Botonera {

	position:absolute;

	left:9px;

	top:191px;

	width:131px;

	height:171px;

	z-index:4;

	background-color: #F4CF08;

}

#Layer1 {

	position:absolute;

	left:26%;

	top:156px;

	width:50%;

	height:auto;

	z-index:4;

	background-color: #CCCCCC;

}

#Layer2 {

	position:absolute;

	left:1%;

	top:156px;

	width:25%;

	height:auto;

	z-index:5;

	background-color: #99FF00;

	overflow: visible;

}

#Layer3 {

	position:absolute;

	left:76%;

	top:156px;

	width:24%;

	height:auto;

	z-index:6;

	background-color: #663300;

}

-->

</style>

</head>

<body>

<div id="Azul"></div>

<div id="Amarillo"></div>

<div id="LogoBest"><img src="Imagenes/BestShop.png" width="95%" height="95%" /></div>

<div id="Layer1"><br><p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

<p>AQUI VA EL HOME</p>

AQUI VA EL HOME</div>

<div id="Layer2">MENU DINAMICO </div>

<div id="Layer3">Publicidad ACA SI SERA DE UN TAMANO FIJO </div>

</body>

</html>

para decirte lo q yo hago cuando le doy a restaurar ala ventana y la voy reduciendo los dIV se reducen y modifican los texto q llevan adentro y en el caso de las IMG no las hacer y se ve algo feo por eso busco q exista un tamano MINIMO establecido y el maximo si sea algo estirable...

ArturoGallegos · #10 (**permalink**) 27/07/2011, 12:38

bueno exceptuando por el hecho que no puedo ver el contenido de

Código HTML:

Ver original<link href="/Estilos.css" rel="stylesheet" type="text/css" />

no veo grandes cosas en tu html pensé que ya tenias algo mas definido, aunque si no to algunas mejoras con respecto a tu css original...

1.- el usar divs para maquetar no implica que debas usar position absolute a cada rato y para cada elemento de hecho a la larga te complica la vida si no los manejas adecuadamente.

2.- define el ancho mínimo y máximo en pixeles con -> min-width y max-width

3.- cuando usas porcentajes estos toman su tamaño con respecto al elemento padre

4.- el float y clear que te mencione es lo que se usa para colocar un elemento tipo bloquee al lado de otro

por ejemplo

Código HTML:

Ver original<div style="width: 300px;background:#ccc;">
    <div style="width:100px;float:left;background:#fe0;"><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#f00;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#036;"><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#03f;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
</div>

si observas los elementos hijo están flotando a la izquierda y se coloca uno junta al otro y el div padre (color gris) no crece y el cuarto div hijo se coloca debajo del 3 div en lugar de colocarse en una nueva fila

para solventarlo coloco overflow:hidden al div padre para que creesca y clear:left al 4 div hijo para que tome posision en una nueva linea

Código HTML:

Ver original<div style="width: 300px;background:#ccc;overflow:hidden;">
    <div style="width:100px;float:left;background:#fe0;"><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#f00;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#036;"><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#03f;clear:left;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
</div>

1.- use float left en lugar de position absolute que tu usas
2.- use clear left porque use float left si hubiese usado float right tendría que usar clear right o si uso ambos float left y right usaría clear both
3.- use los estilos en linea juto con el html solo para ilustrar un ejemplo no es recomendable usarlos asi siempre lo mejor es separar estilos en un archivo aparte

Nota: tu cuando usas position absolute el elemento padre no crece porque estas sacando del flujo los elementos hijo... para solventarlo no estoy muy seguro como hacerlo haber si alguien mas nos ilustra con una solución

Nota 2: min-width y max-width no funciona en IE6, solo lo comento como dato meramente informativo no porque debas dar soporte a este navegador

JuJoGuAl · #11 (**permalink**) 27/07/2011, 13:29

Ok bueno la hoja de estlo la creee y la adjunte pero esta vacia, ahora los posicion absolute los use porq por ejemplo la barra amarrilla tiene q tener el efecto que esta sobre la azul, es decir que esta montada sobre la azul, usare tus ideas de los float.. haber q tal me va no encontre la propieda de min with y max with o por lo menos dreamweaver 8 no me la muestra, ok dices entonces que debo encerrar todo en un DIV padre, cosa que hare y le colocare las capas dentro de el... ahora como me va, disculpa q moleste tanto pero en verdad soy super nuevo en esto, puedo programarte una pagina con facilidad pero me cuesta muchoo disenarla...