Ver capa en la misma posición en todas las resoluciones...

[Zertiko]

Hola alguien sabe como colocar una capa para que se vea en la misma posición en todas las resoluciones????

La cuestión es que la maquetación la tengo hecha con tablas (un tabla principal y monton de tablas anidadas en esta), la tabla principal esta centrada, y encima quiero colocar una capa a modo de mensaje de advertencia, con un swf, que se muestre encima de todo el contenido de la página, la página la he editado en 1280x1024, en esa resolución se ve pefecta pero cuando visualizo la página en otra resolución la capa sale desplazada del lugar en el que se ve en 1280x1024.

Por favor a ver si alguien me puede ayudar.

Gracias, un saludo.

[CORE]

<div style="width:100%;></div>
todas las demas capas que esten dentro tambien tienen que usarse porcentajes para poder verlas igual en cualquier resolucion

saludos

[programeitor]

Puedes utilizar <thead> que es la cabecera de la tabla.

[Zertiko]

Hola CORE, no consigo que las capas que utilizo se vean en la misma posición en todas la resoluciones, por favor dime que es lo que estoy haciendo mal, el code que utilizo es el siguiente:

Código HTML:

<div id="Layer1" style="width:100%;">
  <DIV id="Layer2" style="position:absolute; width:31%; height:55%; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"><IMG src="imagenes/imagen.gif" width="390" height="386"></DIV>
</div>
<TABLE width="800" height="1226" border="0" align="center" cellpadding="0" cellspacing="0">
  <TR>
      
    <TD width="399" height="1226" bgcolor="#0000FF">&nbsp;</TD>
      
    <TD width="400">&nbsp;</TD>
    </TR>
</TABLE> 

Progameitor no entendí la forma que me dijiste acerca de la etiqueta <thead>, por favor podrías explicarmelo mejor, no tengo mucha idea de css.

Un saludo gracias.

[CORE]

Hola de nuevo te pongo un ejemplo de como usar porcentajes en capas para que se vea en todas las resoluciones

Código HTML:

<div id="contenedora"  style="width:100%">
	<div id="1" style="width:33%; float:left; background-color:#FF0000">Capa 1</div>
	<div id="2" style="width:33%; float:left; background-color:#00FF00">Capa 2</div>
	<div id="3" style="width:33%; float:left; background-color:#0000FF">Capa 3</div>
</div> 

saludos

[Zertiko]

Hola CORE, te agradezco mucho el interés que has puesto en ayudarme, pero la verdad es no consigo nada..., mira el code que me funciona en 1280x1024

Código HTML:

<DIV id="Layer1" style="position:absolute; left:450px; top:946px; width:390; height:386; z-index:1;"><IMG src="imagenes/finalizado_plazo.gif" width="390" height="386"></DIV> 

¿Por favor podrías decirme como adaptar ese code para que se vea la capa en la misma posición en todas las resoluciones?

Gracias, un saludo.

[CORE]

hola zertiko

bueno pues yo quitaria el absolute, el left y el top los cambiaria a margin
para que quede algo asi, no es la mejor forma, pero a lo que quieres puede que funcione

Código HTML:

<DIV id="Layer1" style="margin-left:450px; margin-top:946px; width:390; height:386; z-index:1;"><IMG src="imagenes/finalizado_plazo.gif" width="390" height="386"></DIV> 

saludos

[Zertiko]

Hola CORE, siento decirte que el code que me has pasado no me funciona.

<DIV id="Layer1" style="margin-left:450px; margin-top:946px; width:390; height:386; z-index:1;"><IMG src="imagenes/finalizado_plazo.gif" width="390" height="386"></DIV>

Me desplaza la tabla principal hacia abajo y la capa en el archivo php si me sale colocada horizontalmente pero al subirla al servidor me sale desplazada a la derecha en la misma resolución 1280x1024.

Bueno gracias por ayuda, seguiré buscando información a ver si consigo de una vez que se vea colocada en todas las resoluciones.

Un saludo.

[programeitor]

Hola, la forma que te comente es añadir la imagen en la cabecera de la tabla:
<table>
<thead>
<img........>
</thead>

tendras que ajustar el tamaño supongo.

[Rafael]

Bueno si necesitas algo en la misma posición no debes usar porcentajes, los cuales son medidas relativas, si la pantalla está en 800x600 un 100% es 800x600 (un poco menos por los márgenes).

Tienes 2 opciones, o usas un JavaScript para que calcule el ancho que está usando el usuario en su navegador, y asigne una medida basada en ello, o asignas valores fijos a tu diseño.

Tienes tu tabla principal, métela dentro de un div align=center y a este asignale un width de digamos 780px (para que sea compatible a una resolución de 800x600), a partir de ahí ya asigna las posiciones absolutas dentro de este div.

Modifico un poco tu código:

Código PHP:

  <DIV id="Layer1" style="width:780px;"> 
 
<div id="Layer2" style="position:absolute; width:31%; height:55%; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"> 
<img src="imagenes/imagen.gif" width="390" height="386"> 
</div> 
 
<table width="100%" height="1226" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="399" height="1226" bgcolor="#0000FF">&nbsp;</td> 
<td width="400">&nbsp;</td> 
</tr></table> 
 
</DIV>  
   

Los valores de center y el ancho los pasé al div superior, entonces si asignas el 100% a la tabla pero 100% de esos 780px.

Le dejé por el momento al top y left porcentaje, pero mejor asigna números.
Para centrar todo ponle text-align: center; al body y ponle al div text-align: left; para que no herede el center.

[Zertiko]

Hola Rafael, has probado el code que me indicas???, gracias por la ayuda pero no he conseguido que me funcione.

Un saludo.

[programeitor]

¿ Puedes probar esto:

<table border=1>
<thead>
<img width=320 height=240>
</thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

y decirme site sirve ?

[Rafael]

Dejame revisarlo, por lo pronto el concepto es que esté andiado.

Voy a modificarlo y revisar unos codigos que tengo, ya que sí se debería de anidar la posición.

[Rafael]

A ver si así, a mí ya me funcionó.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html><head><title>Posici&#243;n</title></head> 
 
<body> 
<center> 
<DIV id="Layer1" style="width:400px; background-color: #CCC;">  
 
<div id="Layer2" style=" 
background-color: #F00; width:200; height:200; 
position:absolute; 
margin: 20px; 
z-index:1;> 
<img src="imagenes/imagen.gif" width="200" height="200">  
</div>  
 
<table width="100%" height="1000" border="0" cellpadding="0" cellspacing="0">  
<tr>  
<td width="200" height="1000" bgcolor="#006600">&nbsp;</td>  
<td width="400">&nbsp;</td>  
</tr></table>  
 
</DIV>  
</center> 
 
</body></html>  
   

Estoy haciendo un truco por el momento, posicionar tu cuadro flotante Rojo a través de su margen.

Luego dedico un rato, tengo un menú que si tiene anidada la posición... pero el código está complejo y ya ni me acuerdo como se hizo.

[Zertiko]

Hola Rafael, perdona que no halla respondido antes del mensaje, estaba de viaje, efectivamente ahora el code funciona perfectamente colocando la capa en el mismo lugar en todas las resoluciones, solo lo he probado en el explorer, pero me imagino que si funciona en el explorer..., funcionará bien en los demás navegadores.

Gracias, un saludo.