[DW] posicionamiento de capas a la parte inferior

[javiestufa]

Hola foreros... tengo un problemilla que llevo todo el fin de semana sin poder solucionar, seguro que es de lo mas sencillo... pero no puedo.
Tengo creadas 2 capas en dreamweaver, con 2 imágenes cada una. Cada capa tiene el mismo ancho y alto que la imágen que contiene. El problema viene a la hora de poscionarlas, ya que cada una de las capas esta en una esquina del navegador.

En el código tengo esto:

<style type="text/css">
<!--
#Capa1 {
position:absolute;
left:0px;
bottom:0px;
width:91px;
height:238px;
z-index:1;
}
#Capa2 {
position:absolute;
right:0px;
bottom:0px;
width:267px;
height:341px;
z-index:2;
}
-->
</style>

.../...

<div id="Capa1 ">
<img src="imagenes/izqda.jpg" width="314" height="668" />
</div>

<div id="Capa2 ">
<img src="imagenes/dcha.jpg" width="267" height="341" />
</div>

El problema me viene en que a la hora de visualizarlo, NO SE POSICIONAN IGUAL al fondo de la página (la Capa2 se queda un poco mas arriba que la otra, todavía mas apreciable al hacer el navegador mas pequeño de tamaño)
Hay alguna solución? Me gustaría poder resolverlo, ya que estas capas van a ser el fondo de la pantalla que pide el cliente, y tendrían que estar siempre en la parte inferior de la pantalla.
Gracias.

[javiestufa]

He conseguido solucionarlo mediante una tabla y redimensionando un poco las imágenes en vez de capas... pero me gustaría no tener que usarlas, preferiría usar las capas. Este es el código:

<div align="center" class="Estilo1"></div>

<table width="100%" height="100%" bottom="0"; border="0" cellspacing="0" id="tablafondo">
<tr>
<td width="29%" rowspan="2" align="left" valign="bottom" bgcolor="#EBD4AA"><img src="imagenes/izqda.jpg" width="290" height="617" align="bottom" /></td>
<td height="21%" colspan="2" align="right" valign="top"><img src="imagenes/sup.jpg" width="411" height="93" /></td>
</tr>
<tr>
<td width="50%" height="79%">&nbsp;</td>
<td width="21%" align="right" valign="bottom"><img src="imagenes/dcha.jpg" width="206" height="262" /></td>
</tr>
</table>
Hola foreros... tengo un problemilla que llevo todo el fin de semana sin poder solucionar, seguro que es de lo mas sencillo... pero no puedo.
Tengo creadas 2 capas en dreamweaver, con 2 imágenes cada una. Cada capa tiene el mismo ancho y alto que la imágen que contiene. El problema viene a la hora de poscionarlas, ya que cada una de las capas esta en una esquina del navegador.

En el código tengo esto:

<style type="text/css">
<!--
#Capa1 {
position:absolute;
left:0px;
bottom:0px;
width:91px;
height:238px;
z-index:1;
}
#Capa2 {
position:absolute;
right:0px;
bottom:0px;
width:267px;
height:341px;
z-index:2;
}
-->
</style>

.../...

<div id="Capa1 ">
<img src="imagenes/izqda.jpg" width="314" height="668" />
</div>

<div id="Capa2 ">
<img src="imagenes/dcha.jpg" width="267" height="341" />
</div>

El problema me viene en que a la hora de visualizarlo, NO SE POSICIONAN IGUAL al fondo de la página (la Capa2 se queda un poco mas arriba que la otra, todavía mas apreciable al hacer el navegador mas pequeño de tamaño)
Hay alguna solución? Me gustaría poder resolverlo, ya que estas capas van a ser el fondo de la pantalla que pide el cliente, y tendrían que estar siempre en la parte inferior de la pantalla.
Gracias.

[Andres Cayon]

Javi:
Las alturas para cada capa son diferentes:
Capa1: 238px;
Capa2: 341px

He probado a igualarlos y comienzo a verlo bien: ¿Puede ser ese el problema?

Saludos!
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------


"javiestufa" <***@gmail.com> escribió en el mensaje de noticias news:gmmmta$9qk$***@forums.macromedia.com...
He conseguido solucionarlo mediante una tabla y redimensionando un poco las imágenes en vez de capas... pero me gustaría no tener que usarlas, preferiría usar las capas. Este es el código:

<div align="center" class="Estilo1"></div>

<table width="100%" height="100%" bottom="0"; border="0" cellspacing="0" id="tablafondo">
<tr>
<td width="29%" rowspan="2" align="left" valign="bottom" bgcolor="#EBD4AA"><img src="imagenes/izqda.jpg" width="290" height="617" align="bottom" /></td>
<td height="21%" colspan="2" align="right" valign="top"><img src="imagenes/sup.jpg" width="411" height="93" /></td>
</tr>
<tr>
<td width="50%" height="79%">&nbsp;</td>
<td width="21%" align="right" valign="bottom"><img src="imagenes/dcha.jpg" width="206" height="262" /></td>
</tr>
</table>
Hola foreros... tengo un problemilla que llevo todo el fin de semana sin poder solucionar, seguro que es de lo mas sencillo... pero no puedo.
Tengo creadas 2 capas en dreamweaver, con 2 imágenes cada una. Cada capa tiene el mismo ancho y alto que la imágen que contiene. El problema viene a la hora de poscionarlas, ya que cada una de las capas esta en una esquina del navegador.

En el código tengo esto:

<style type="text/css">
<!--
#Capa1 {
position:absolute;
left:0px;
bottom:0px;
width:91px;
height:238px;
z-index:1;
}
#Capa2 {
position:absolute;
right:0px;
bottom:0px;
width:267px;
height:341px;
z-index:2;
}
-->
</style>

.../...

<div id="Capa1 ">
<img src="imagenes/izqda.jpg" width="314" height="668" />
</div>

<div id="Capa2 ">
<img src="imagenes/dcha.jpg" width="267" height="341" />
</div>

El problema me viene en que a la hora de visualizarlo, NO SE POSICIONAN IGUAL al fondo de la página (la Capa2 se queda un poco mas arriba que la otra, todavía mas apreciable al hacer el navegador mas pequeño de tamaño)
Hay alguna solución? Me gustaría poder resolverlo, ya que estas capas van a ser el fondo de la pantalla que pide el cliente, y tendrían que estar siempre en la parte inferior de la pantalla.
Gracias.

[javiestufa]

Gracias Andrés, probaré a ver si puedo ir solucionándolo, pero cada imagen es de un tamaño diferente.
¿Para posicionarlas bien deben de ser todas las capas de igual algura?

"Andres Cayon" <***@hotmail.com> escribió en el mensaje news:gmppv2$3jb$***@forums.macromedia.com...
Javi:
Las alturas para cada capa son diferentes:
Capa1: 238px;
Capa2: 341px

He probado a igualarlos y comienzo a verlo bien: ¿Puede ser ese el problema?

Saludos!
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------


"javiestufa" <***@gmail.com> escribió en el mensaje de noticias news:gmmmta$9qk$***@forums.macromedia.com...
He conseguido solucionarlo mediante una tabla y redimensionando un poco las imágenes en vez de capas... pero me gustaría no tener que usarlas, preferiría usar las capas. Este es el código:

<div align="center" class="Estilo1"></div>

<table width="100%" height="100%" bottom="0"; border="0" cellspacing="0" id="tablafondo">
<tr>
<td width="29%" rowspan="2" align="left" valign="bottom" bgcolor="#EBD4AA"><img src="imagenes/izqda.jpg" width="290" height="617" align="bottom" /></td>
<td height="21%" colspan="2" align="right" valign="top"><img src="imagenes/sup.jpg" width="411" height="93" /></td>
</tr>
<tr>
<td width="50%" height="79%">&nbsp;</td>
<td width="21%" align="right" valign="bottom"><img src="imagenes/dcha.jpg" width="206" height="262" /></td>
</tr>
</table>
Hola foreros... tengo un problemilla que llevo todo el fin de semana sin poder solucionar, seguro que es de lo mas sencillo... pero no puedo.
Tengo creadas 2 capas en dreamweaver, con 2 imágenes cada una. Cada capa tiene el mismo ancho y alto que la imágen que contiene. El problema viene a la hora de poscionarlas, ya que cada una de las capas esta en una esquina del navegador.

En el código tengo esto:

<style type="text/css">
<!--
#Capa1 {
position:absolute;
left:0px;
bottom:0px;
width:91px;
height:238px;
z-index:1;
}
#Capa2 {
position:absolute;
right:0px;
bottom:0px;
width:267px;
height:341px;
z-index:2;
}
-->
</style>

.../...

<div id="Capa1 ">
<img src="imagenes/izqda.jpg" width="314" height="668" />
</div>

<div id="Capa2 ">
<img src="imagenes/dcha.jpg" width="267" height="341" />
</div>

El problema me viene en que a la hora de visualizarlo, NO SE POSICIONAN IGUAL al fondo de la página (la Capa2 se queda un poco mas arriba que la otra, todavía mas apreciable al hacer el navegador mas pequeño de tamaño)
Hay alguna solución? Me gustaría poder resolverlo, ya que estas capas van a ser el fondo de la pantalla que pide el cliente, y tendrían que estar siempre en la parte inferior de la pantalla.
Gracias.

[Andres Cayon]

Puedes crear una capa contenedora y añadir dentro las imágenes: Pero ten en
cuenta que en ese caso, te aparecerá un espacio por debajo de la foto más
pequeña:

<style type="text/css">
<!--
#footer {
position: absolute;
bottom: 0px;
width:100%;
margin:0;
padding:0;
border:0;
}
#footer .foto1 { float: left;}
#footer .foto2 { float: right;}
-->
</style>


Y el html:

<div id="footer">
<img src="imagen_1.jpg" width="114" height="228" class="foto1" />
<img src="imagen_2.jpg" width="72" height="72" class="foto2" />
</div>


La otra solución podría ser añadir la imagen como fondo, de manera que
desaparezca el fragmento de imagen que supere el tamaño de tus capas.

Saludos!
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------


"javiestufa" <***@gmail.com> escribi� en el mensaje de noticias news:gms84q$6c2$***@forums.macromedia.com...
Gracias Andrés, probaré a ver si puedo ir solucionándolo, pero cada imagen
es de un tamaño diferente.
¿Para posicionarlas bien deben de ser todas las capas de igual algura?

"Andres Cayon" <***@hotmail.com> escribi� en el mensaje news:gmppv2$3jb$***@forums.macromedia.com...
Javi:
Las alturas para cada capa son diferentes:
Capa1: 238px;
Capa2: 341px

He probado a igualarlos y comienzo a verlo bien: ¿Puede ser ese el problema?

Saludos!
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------


"javiestufa" <***@gmail.com> escribi� en el mensaje de noticias news:gmmmta$9qk$***@forums.macromedia.com...
He conseguido solucionarlo mediante una tabla y redimensionando un poco las
imágenes en vez de capas... pero me gustaría no tener que usarlas,
preferiría usar las capas. Este es el código:

<div align="center" class="Estilo1"></div>

<table width="100%" height="100%" bottom="0"; border="0" cellspacing="0"
id="tablafondo">
<tr>
<td width="29%" rowspan="2" align="left" valign="bottom"
bgcolor="#EBD4AA"><img src="imagenes/izqda.jpg" width="290" height="617"
align="bottom" /></td>
<td height="21%" colspan="2" align="right" valign="top"><img
src="imagenes/sup.jpg" width="411" height="93" /></td>
</tr>
<tr>
<td width="50%" height="79%">&nbsp;</td>
<td width="21%" align="right" valign="bottom"><img
src="imagenes/dcha.jpg" width="206" height="262" /></td>
</tr>
</table>
Hola foreros... tengo un problemilla que llevo todo el fin de semana sin
poder solucionar, seguro que es de lo mas sencillo... pero no puedo.
Tengo creadas 2 capas en dreamweaver, con 2 imágenes cada una. Cada capa
tiene el mismo ancho y alto que la imágen que contiene. El problema viene a
la hora de poscionarlas, ya que cada una de las capas esta en una esquina
del navegador.

En el código tengo esto:

<style type="text/css">
<!--
#Capa1 {
position:absolute;
left:0px;
bottom:0px;
width:91px;
height:238px;
z-index:1;
}
#Capa2 {
position:absolute;
right:0px;
bottom:0px;
width:267px;
height:341px;
z-index:2;
}
-->
</style>

.../...

<div id="Capa1 ">
<img src="imagenes/izqda.jpg" width="314" height="668" />
</div>

<div id="Capa2 ">
<img src="imagenes/dcha.jpg" width="267" height="341" />
</div>

El problema me viene en que a la hora de visualizarlo, NO SE POSICIONAN
IGUAL al fondo de la página (la Capa2 se queda un poco mas arriba que la
otra, todavía mas apreciable al hacer el navegador mas pequeño de tamaño)
Hay alguna solución? Me gustaría poder resolverlo, ya que estas capas van a
ser el fondo de la pantalla que pide el cliente, y tendrían que estar
siempre en la parte inferior de la pantalla.
Gracias.

[javiestufa]

Bueno Andrés, gracias por tu ayuda... supongo que la solución será un
poquito heterodoxa, pero aquí esta con lo que he conseguido lo que pretendía
(también he hecho un poco de trampa reduciendo el tamaño de las imágenes,
;) ):

<style type="text/css">
<!--
#capaIzqd {
position:absolute;
bottom:0px;
width:100%;
margin-left:-10px;
padding:0;
border:0;
z-index:2;
}
#capaDcha {
position:absolute;
bottom:0px;
width:100%;
margin:0px;
right:0px;
padding:0px;
border:0;
z-index:1;
}
#capaSup {
position:absolute;
top:0px;
width:100%;
margin:0px;
right:0px;
padding:0px;
border:0;
z-index:0;
}
-->

y en el HTML:

<div id="capaIzqd">
<img src="imágenes/izqda.jpg" align="left" width="290" height="617" />
</div>

<div id="capaDcha">
<img src="imágenes/dcha.jpg" align="right" width="206" height="262" />
</div>

<div id="capaSup">
<img src="imágenes/sup.jpg" align="right" width="411" height="93" />
</div>

[Andres Cayon]

Si funciona, ni lo toques! 8-D

Lo que yo haría sería eliminar el margin-left:-10px de #capaIzqd: El margen
te aparece por los valores por defecto del navegador y estos pueden variar
(de hecho, lo que en unos es margin, en otros es padding):

Por lo tanto:

body{margin:0; padding:0;}

#capaIzqd {
position:absolute;
bottom:0px;
width:100%;
margin:0;
padding:0;
border:0;
z-index:2;
}
--
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------

Post by javiestufa
Bueno Andrés, gracias por tu ayuda... supongo que la solución será un
poquito heterodoxa, pero aquí esta con lo que he conseguido lo que
pretendía (también he hecho un poco de trampa reduciendo el tamaño de las
<style type="text/css">
<!--
#capaIzqd {
position:absolute;
bottom:0px;
width:100%;
margin-left:-10px;
padding:0;
border:0;
z-index:2;
}
#capaDcha {
position:absolute;
bottom:0px;
width:100%;
margin:0px;
right:0px;
padding:0px;
border:0;
z-index:1;
}
#capaSup {
position:absolute;
top:0px;
width:100%;
margin:0px;
right:0px;
padding:0px;
border:0;
z-index:0;
}
-->
<div id="capaIzqd">
<img src="imágenes/izqda.jpg" align="left" width="290" height="617" />
</div>
<div id="capaDcha">
<img src="imágenes/dcha.jpg" align="right" width="206" height="262" />
</div>
<div id="capaSup">
<img src="imágenes/sup.jpg" align="right" width="411" height="93" />
</div>

[javiestufa]

Tomo buena nota de nuevo.
Por el momento lo he probado como lo dejé en IExporer7, Safari (versión PC,
Mac e iPod), Google Chrome, Opera y Firefox...
No mentaré de momento a las brujas.
;)