Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Ver capa en la misma posición en todas las resoluciones... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/10/2005, 14:17
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 15 años, 1 mes
Puntos: 2
Ver capa en la misma posición en todas las resoluciones...

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.
  #2 (permalink)  
Antiguo 14/10/2005, 14:57
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
<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
  #3 (permalink)  
Antiguo 14/10/2005, 15:23
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Puedes utilizar <thead> que es la cabecera de la tabla.
  #4 (permalink)  
Antiguo 15/10/2005, 12:26
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 15 años, 1 mes
Puntos: 2
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.
  #5 (permalink)  
Antiguo 15/10/2005, 12:45
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
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
  #6 (permalink)  
Antiguo 15/10/2005, 17:05
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 15 años, 1 mes
Puntos: 2
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.
  #7 (permalink)  
Antiguo 16/10/2005, 02:39
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
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
  #8 (permalink)  
Antiguo 16/10/2005, 11:43
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 15 años, 1 mes
Puntos: 2
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.
  #9 (permalink)  
Antiguo 16/10/2005, 15:54
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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.
  #10 (permalink)  
Antiguo 16/10/2005, 18:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
En la misma posición...

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.

Última edición por Rafael; 16/10/2005 a las 22:57
  #11 (permalink)  
Antiguo 17/10/2005, 14:28
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 15 años, 1 mes
Puntos: 2
Hola Rafael, has probado el code que me indicas???, gracias por la ayuda pero no he conseguido que me funcione.

Un saludo.
  #12 (permalink)  
Antiguo 18/10/2005, 17:39
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
¿ 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 ?


  #13 (permalink)  
Antiguo 18/10/2005, 18:36
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.

Última edición por Rafael; 18/10/2005 a las 18:44
  #14 (permalink)  
Antiguo 18/10/2005, 18:47
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.

Última edición por Rafael; 18/10/2005 a las 19:07
  #15 (permalink)  
Antiguo 31/10/2005, 10:06
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 15 años, 1 mes
Puntos: 2
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.
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 19:30.