Problemas con Capas

sied · #1 (**permalink**) 14/08/2010, 16:15

Hola amigos, soy nuevo en este sitio web. Mi pregunta o problema es el siguiente; estoy realizando un sitio web utilizando capas en Dreamweaver, en la resolucion de mi equipo se ve bien pero cuando pruebo la pagina en otras resoluciones toda la pagina se desconfigura. Mis dudas son: Como hago para que todo lo que hago en mi pagina guarde la misma estructura sin importar la resolucion de la pantalla donde se vea y la otra es que la pagina quede centrada.

Muchas gracias por la colaboracion prestada.

Este es el codigo de la pagina.

<!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ítulo</title>
<style type="text/css">

</style>
</head>

<body>
<table width="900" height="550" border="1" align="center" bgcolor="#BFD2F2">
<tr>
<td><div id="Layer2" style="position: absolute; left: 56px; top: 76px; width: 380px; height: 30px; z-index: 2; vertical-align: middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="379" height="28">

<param name="movie" value="Menu Flash/mnuquienessomos1.swf" />
<param name="quality" value="high" />
<embed src="Menu Flash/mnuquienessomos1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="379" height="28"></embed>
</object>
</div>
<div id="Layer3" style="position: absolute; left: 200px; top: 120px; width: 432px; height: 323px; z-index: 3; vertical-align: middle; background-image: url(Fotos%20Rep/mnufotos.swf); layer-background-image: url(Fotos%20Rep/mnufotos.swf); border: 1px none #000000;">
<p><img src="../Hoy/Fotos/1a.jpg" width="430" height="322" /></p>
</div>
<div id="Layer4" style="position: absolute; left: 700px; top: 291px; width: 214px; height: 77px; z-index: 4; vertical-align: middle">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="214" height="76">
<param name="movie" value="Menu Flash/mnunoticias1.swf" />
<param name="quality" value="high" />
<embed src="Menu Flash/mnunoticias1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="214" height="76"></embed>
</object>
</div>
<div class="Estilo7" id="layer2" style="position: absolute; left: 700px; top: 125px; width: 213px; height: 159px; z-index: 4; vertical-align: middle">
<div align="justify" class="Estilo8">En este espacio voy a colocar la información de los Proyectos. Asi como aparece en la página de la Fundación Carvajal. </div>

</div>
<div id="Layer6" style="position: absolute; left: 59px; top: 500px; width: 892px; height: 40px; z-index: 6; vertical-align: middle">
<div align="center" class="Estilo1">
<form id="form1" name="form1" method="post" action="">
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>

<p class="Estilo3">Calle 90 N° 65 - 61 Torre 8 Oficina 502 - Telefonos 300 772 7233 - 320 546 0327 www.amigosparatodos.com - email: [email protected] </p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</form>

</div>
</div>
<div style="position: absolute; left: 720px; top: 421px; width: 174px; height: 21px; z-index: 1; vertical-align: middle"><span class="Estilo6">Siguenos en</span> <a href="http://www.facebook.com"><img src="../Hoy/Fotos/Iconos/F.png" alt="a" width="20" height="17" border="0" /></a> <a href="http://www.twitter.com"><img src="../Hoy/Fotos/Iconos/T.png" alt="s" width="21" height="18" border="0" /></a> <a href="http://www.youtube.com"><img src="../Hoy/Fotos/Iconos/Y.png" alt="d" width="48" height="17" border="0" /></a></div>
<div id="layer" style="position: absolute; left: 692px; top: 52px; width: 257px; height: 21px; z-index: 1; vertical-align: middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="255" height="24">
<param name="movie" value="Menu Flash/mnuregistrese.swf" />
<param name="quality" value="high" />

<embed src="Menu Flash/mnuregistrese.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="255" height="24"></embed>
</object>
</div>
<div id="layer4" style="position: absolute; left: 57px; top: 20px; width: 441px; height: 56px; z-index: 1; vertical-align: middle"><img src="Iconos/logo fundacion web.jpg" width="455" height="55" /></div>
<div id="layer3" style="position: absolute; left: 436px; top: 76px; width: 251px; height: 30px; z-index: 2; vertical-align: middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="379" height="28">
<param name="movie" value="Menu Flash/mnuquienessomos2.swf" />
<param name="quality" value="high" />
<embed src="Menu Flash/mnuquienessomos2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="379" height="28"></embed>

</object>
</div>
<div id="layer5" style="position: absolute; left: 815px; top: 76px; width: 127px; height: 30px; z-index: 2; vertical-align: middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="129" height="28">
<param name="movie" value="Menu Flash/mnuquienessomos3.swf" />
<param name="quality" value="high" />
<embed src="Menu Flash/mnuquienessomos3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="129" height="28"></embed>
</object>
</div>

<div id="layer6" style="position: absolute; left: 700px; top: 369px; width: 214px; height: 45px; z-index: 4; vertical-align: middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="214" height="52">
<param name="movie" value="Menu Flash/mnunoticias2.swf" />
<param name="quality" value="high" />
<embed src="Menu Flash/mnunoticias2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="214" height="52"></embed>
</object>
</div></td>
</tr>
</table>

</body>
</html>

ElJavista · #2 (**permalink**) 14/08/2010, 17:23

Hacer una web con solamente capas con posición absoluta es muy mala idea, ya lo probaste por qué. Simplemente vuelve a hacerlo, pero no con capas, hazlo mediante un ancho fijo y centrado. No uses capas, usa simplemente DIV y lo demás, lo ordinario. Nada más que eso te queda, volver a hacerlo, o talvez hacer que esas capas se vuelvan DIVs normales. No me preguntes como hacerlo con Dreaweaber, porque lo ignoro, solo te digo que no debes hacer tu web diagramandolo con capas. Suerte!

sied · #3 (**permalink**) 15/08/2010, 18:03

Gracias por tu sugerencia, pero me surge una duda que manual o como puedo hacer mi pagina web de la forma que me dices.
Ya que lo que quiero es hacer una pagina que el contenido quede centrado y se vea igual en cualquier resolucion.
De antemano muchas gracias por tu colaboracion.

ElJavista · #4 (**permalink**) 15/08/2010, 18:05

Yo solo conozco de código puro, no tanto de las herramientas del Dream, a lo mucho he usado el Dream como editor y para dibujar algunas cosas, casi nada. No podría ayudarte en ese sentido.

leac3 · #5 (**permalink**) 15/08/2010, 23:10

Yo tambien hago las paginas a puro código.

Existen dos tipos de diseños: Fijo y fluido.
Para los diseños fijos debes primero fijar un ancho con el que vas a trabajar por siempre, teniendo en cuenta que aquellos usuarios con una resolución de pantalla inferior a la que decidas usar, no prodrán ver el site de una forma cómoda.

Las pantallas 640x480 prácticamente no existen, y es muy poco probable que estén en equipos que tengan conexión a Internet.

Las pantallas 800x600 aún se usan, y es muy probable que estén en equipos con conexión a Internet, sin embargo este segmento es muy reducido como para sacrificar tu site a un ancho tan reducido.

Las pantallas 1024x720 ó 1024x600 son muy usadas actualmente, en base a este ancho es que hago mis sites. Por lo que cada DIV tendría las siguientes propiedades en el style del DIV, o en la hoja CSS de la página (recomiendo que uses hojas CSS por favor, te simplifica mucho el trabajo y hace la página más rápida):
width:980px; /*no pongo 1024 porque los browsers tienen scroll, y eso consume ancho en la pantalla*/
height:auto;
padding:10px;
margin: 10px auto 10px auto; /*aqui esta el secreto, al usar auto a los lados, logras que el DIV se centre automaticamente en cualquier tipo de pantalla, y sirve en todos los browsers.*/

Eso es basicamente lo que tienes que hacer, recuerda que los DIV por defecto tienen el atributo position en relative, lo que significa en términos prácticos que solo puedes poner un DIV por "linea". Si colocas dos DIV seguidos, con las mismas caracteristicas que puse anteriormente, verás que el 2do se coloca debajo del 1ro, ya que solo puede haber un DIV por "linea".

También recuerda que el atributo width no es el ancho total del DIV, solo representa el ancho del area editable dentro del DIV. Es decir, que si tengo un width de 980px, y un padding de 10px a cada lado, el DIV en total mide 1000px exactos. Si quisieras poner adentro del DIV una imagen que abarque todo el DIV, la imagen deberia de tener un ancho máximo de 980px.

---

Para diseños fluidos, es muy fácil y solo debes aprenderte esto, no le coloques el atributo width al DIV. ¿Simple no? Fijate, si le colocas width:100% (que seria para que abarque el 100% de la pantalla, cualquiera que esta sea), el DIV se expandira perfectamente al 100% de la pantalla, pero el texto dentro de él estaria pegadisimo a los bordes, por lo que te verias tentado a agregarle el atributo padding, supongamos unos 10px a cada lado, esto traería como consecuencia que el DIV tenga un ancho total del 100% + 20px, por lo que se saldría de la pantalla, y no caigas en el error de muchos tutoriales de colocarle al width un 95%, al fin y al cabo no vas a quedar satisfecho con los resultados.

Lo que debes hacer es omitir el width, no se lo pongas, el se va a ajustar igual al ancho de la pantalla, y puedes ponerle sin ningun problema un padding de 10px a cada lado. Entonces el CSS de ese DIV quedaria asi:
height:auto;
padding:10px;
margin: 10px;

El margin es para que el DIV como tal no quede pegado de los bordes del browser, solo por estética, pero si quieres lo omites.

Si quisieras hacer un diseño fluido donde un DIV sea de ancho fijo y el otro fluido; el CSS del DIV1 sería:
width:150px;
height:auto;
padding:10px;
float:left; /*esto es importante, recuerda que no pueden haber dos DIV en una misma "linea".*/

El CSS del DIV2 sería asi: (fijate que omití el width):
height:auto;
margin:0px 0px 0px 180px;
padding:10px;

El margin es 180px por lo siguiente, ¿cuanto es el ancho del DIV1? 150+20=170px. Pero yo quiero que haya 10px de separacion entre un DIV y el otro, por lo que se le suma 10px mas, quedando una separacion de 180px. Esto se debe a que el DIV2 no es flotante, y él en realidad debería de aparecer justo debajo del DIV1, por eso se le da un margin desde el borde izquierdo del browser.

Espero ayude esta explicación.

Saludos.