Foros del Web » Creando para Internet » CSS »

Centrar una capa en diferentes resoluciones...

Estas en el tema de Centrar una capa en diferentes resoluciones... en el foro de CSS en Foros del Web. Hola tengo una capa con el siguiente code. <DIV id="Layer1" style="position:absolute; top:923px; z-index:1; left: 442px;"><IMG src="imagenes/finalizado_comunicaciones.gif" width="390" height="386"></DIV> La cuestión es que es una imagen ...
  #1 (permalink)  
Antiguo 10/10/2005, 17:30
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 21 años, 4 meses
Puntos: 2
Centrar una capa en diferentes resoluciones...

Hola tengo una capa con el siguiente code.

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

La cuestión es que es una imagen que contiene un imagen que aparece encima de un formulario, el cual esta desactivado y ya no se pueden enviar comunicaciones, en la resolución que he editado el archivo (1280x1024) se ve bien, pero cuando lo pruebo en otras resoluciones la capa sale desplazada, la web esta editada con una tabla centrada que contiene otras muchas tablas, de tal forma que se ve igual en 800x600 que en 1280x1024, un poco más pequeño, pero el diseño es exactamente igual.

¿Cómo podría insertar la capa para que siempre estuviese en la posición que quiero, o si esto no se puede para que quede centrada en el página sea cual sea la resolución?

Gracias desde ya!!!

Un saludo.
  #2 (permalink)  
Antiguo 10/10/2005, 17:50
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 18 años, 11 meses
Puntos: 0
tienes que usar porcentajes en ves de pixeles, en esta web hay varios modelos de centrado
http://www.tierradenomadas.com/tw003.phtml#a
  #3 (permalink)  
Antiguo 10/10/2005, 17:55
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 593
Antigüedad: 19 años, 5 meses
Puntos: 3
prueba centrar con:
Código:
#conenido{
width:390px;
margin:auto;
}
con el código anterior sera suficiente para firefox para iexplorer hay un truco que puedes usar:
Código:
body{
text-align:center;
}
#conenido{
text-align:left;
}
esto último hace que explorer centre el conenido y despues lo que este adentro de contenido se alineará normalmente.
  #4 (permalink)  
Antiguo 11/10/2005, 08:04
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 21 años, 4 meses
Puntos: 2
Gracias fullmental y RoQ por vuestra ayuda, la única forma que he conseguido que no se desplaze horizontalmente (verticalmente no lo he conseguido) es la siguiente

en el css
DIV#contenido {
position:absolute; top:50%; left:50%; width:390px; height:386px; margin-left:-175px; margin-top:505px;
}

en el html
<DIV id="contenido"><IMG src="imagenes/finalizado_comunicaciones.gif" width="390" height="386"></DIV>

en teoría en margin-left y margin-top tenía que poner la mitad de la capa en negativo pero como realmente no esta en el centro de la página he ido añadiendo o quitando pixels para colocarla, de tal forma que me sale bien colocada horizontalmente pero verticalmente en resoluciones diferentes a la que la editado (1280x1024) se desplaza hacia arriba.

fullmental probe con la forma que me comentabas pero no sé porque no me salía centrada ni en el explorer ni el firefox, puse el siguiente code.

en el css
DIV#contenido {
width:390px; margin:auto;
}

en el html
<DIV id="contenido"><IMG src="imagenes/finalizado_comunicaciones.gif" width="390" height="386"></DIV>

Sabéis alguna forma para que la capa salga en todas la resoluciones donde la coloque en la resolución 1280x1024???

Gracias, un saludo.
  #5 (permalink)  
Antiguo 11/10/2005, 09:32
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 593
Antigüedad: 19 años, 5 meses
Puntos: 3
mnmn me parece raro lo que dices, a mi me funciona perfectamente

puedes verlo aplicado en http://www.wdinamo.com/
en donde:
Código:
#cbox{
	margin:50px auto;
width:400px;
text-align:left;
}
el primer atrubuto de margin es margin-top=50px y el siguiente es automático (izquierda, abajo, derecha).

saludos
PD. intenta quitar DIV en tu css y dejar a partir de #
  #6 (permalink)  
Antiguo 11/10/2005, 09:38
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 19 años, 1 mes
Puntos: 0
No le funciona con margin:auto porque su bloque tiene posicionamiento absoluto ;)

Suerte
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #7 (permalink)  
Antiguo 13/10/2005, 06:42
 
Fecha de Ingreso: noviembre-2002
Mensajes: 571
Antigüedad: 21 años, 4 meses
Puntos: 2
Hola fullmental, probé a crear un archivo solo con el code que me pasaste, y efectivamente te centra la capa perfectamente, utulize el siguiente code.

en css:

body{
text-align:center;
}
DIV#contenido {
width:390px;
margin:100px auto;
text-align:left;
}

en html
<div id="contenido"><IMG src="imagenes/finalizado_comunicaciones.gif" width="390" height="386"></div>

El problema viene cuando le añado más contenido al archivo..., entonces me desplaza la tabla principal (que tiene anidadas muchas mas tablas) para abajo creando margen con ella, de tal forma que la capa queda en la parte superior del archivo, y más para abajo la tabla principal con el resto del contenido de la página, por lo que no me sirve.

¿Sabes cómo colocar una capa encima del contenido de página (tablas, imagenes, etc...), y que se vea en la misma posición en todas las resoluciones????

Esto con posición absoluta lo consigo en la resolución que edito el archivo (1280x1024) pero claro cuando la veo en otra resolución..., me desplaza la capa a otra posición al ser un resolución diferente.

Bueno si alguien me puede ayudar le estaría muy agradecido.

Un saludo y Gracias.
  #8 (permalink)  
Antiguo 16/10/2005, 13:17
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 593
Antigüedad: 19 años, 5 meses
Puntos: 3
me parece un desperdicio seguir usando tablas cuando estas usando css.. todo lo que las tablas puedan hacer (visualmente) lo pueden hacer los divs...

intenta no utilizar tablas a menos que sea absolutamente necesario (no para efector gráficos)... las tablas sirven para tabular datos y nadamas, el resto se puede hacer perfectamente con css y divs...

si tienes el ejemplo a la mano para revisarlo seria mas fácil ayudarte.
  #9 (permalink)  
Antiguo 16/10/2005, 19:55
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Supongo que es parte del otro post:

http://www.forosdelweb.com/f53/ver-capa-misma-posicion-todas-las-resoluciones-341803/

Revisa quien va andidado dentro de quién.
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 09:41.