Foros del Web » Creando para Internet » Diseño web »

Problemas con Capas

Estas en el tema de Problemas con Capas en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/08/2010, 17:15
 
Fecha de Ingreso: agosto-2010
Mensajes: 2
Antigüedad: 7 años, 4 meses
Puntos: 0
Problemas con Capas

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&iacute;tulo</title>
<style type="text/css">
<!--
.Estilo1 {
font-size: 12px;
color: #0033CC;
}
.Estilo3 {
font-size: 12px;
color: #000000;
}
.Estilo7 {
color: #0033CC;
font-style: italic;
}
.Estilo6 {font-size: 14px; color: #000000; }
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:7;
}
.Estilo8 {color: #000000}
-->
</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&oacute;n de los Proyectos. Asi como aparece en la p&aacute;gina de la Fundaci&oacute;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&deg; 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>
  #2 (permalink)  
Antiguo 14/08/2010, 18:23
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Problemas con Capas

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!
  #3 (permalink)  
Antiguo 15/08/2010, 19:03
 
Fecha de Ingreso: agosto-2010
Mensajes: 2
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Problemas con Capas

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.
  #4 (permalink)  
Antiguo 15/08/2010, 19:05
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Problemas con Capas

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.
  #5 (permalink)  
Antiguo 16/08/2010, 00:10
Avatar de leac3  
Fecha de Ingreso: abril-2007
Ubicación: Valencia, pero mi mente y corazon estan en San Francisco.
Mensajes: 147
Antigüedad: 10 años, 8 meses
Puntos: 4
Respuesta: Problemas con Capas

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.

Etiquetas: capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:33.