Foros del Web » Creando para Internet » CSS »

Alinear capa en centro de la pantalla

Estas en el tema de Alinear capa en centro de la pantalla en el foro de CSS en Foros del Web. Hola es posible alinear un capa en el centro de la pantalla? las dimensiones de mi capa son w:400px y h:125px y kiero k se ...
  #1 (permalink)  
Antiguo 31/01/2006, 10:16
 
Fecha de Ingreso: enero-2006
Mensajes: 9
Antigüedad: 11 años, 10 meses
Puntos: 0
Alinear capa en centro de la pantalla

Hola es posible alinear un capa en el centro de la pantalla?
las dimensiones de mi capa son w:400px y h:125px y kiero k se posicione al centro de la pantalla.

gracias
  #2 (permalink)  
Antiguo 31/01/2006, 12:49
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
margin: auto;
  #3 (permalink)  
Antiguo 03/11/2006, 08:55
Avatar de marquin  
Fecha de Ingreso: junio-2003
Ubicación: Montevideo
Mensajes: 39
Antigüedad: 14 años, 6 meses
Puntos: 0
ok, pero no anda para IE

Gracias, a mi me funcionó para fx el margin:auto pero no para ie... se mantiene incambiado. Como se puede hacer?
__________________
__________________________________________________ ____
"Necesitamos el dinero para vivir pero trabajamos porque nos gusta".
(F.A. filósofo contemporáneo)
  #4 (permalink)  
Antiguo 03/11/2006, 10:09
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola,

Aquí dejo te dejo un link que creo te servirá de mucho

http://www.forosdelweb.com/f53/quiero-pagina-centrada-437880/
__________________
_______
Jorge Rojas.
  #5 (permalink)  
Antiguo 11/11/2006, 15:34
Avatar de marquin  
Fecha de Ingreso: junio-2003
Ubicación: Montevideo
Mensajes: 39
Antigüedad: 14 años, 6 meses
Puntos: 0
Anda... a medias

Gracias! Ahora, lo que hice fue por en body text-align:center y la capa "madre" contenedora de todo en posición relativa. Anduvo para IE, sin embargo, para Firefox con este seteo pierdon la visibilidad de la capa y su contenido. Cambio a posición absoluta y vuelvo a recuperar la visión en FX pero en IE vuelve a la izquierda...

Será que solo detectando el navegador y colocando diferentes .css para cada uno logre mismo comportamiento?
__________________
__________________________________________________ ____
"Necesitamos el dinero para vivir pero trabajamos porque nos gusta".
(F.A. filósofo contemporáneo)
  #6 (permalink)  
Antiguo 13/11/2006, 11:01
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola marquin,

No sé que estarás haciendo mal amigo yo así lo he venido haciendo siempre y me funca bien en EI y FX e incluso en Opera ... todo sin problemas... no veo xq hacer una hoja de estilos aparte para declarar eso, sería ilógico y además de por gusto

Pon tu código y veremos como solucionar eso va?
__________________
_______
Jorge Rojas.
  #7 (permalink)  
Antiguo 14/11/2006, 06:00
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 11 años, 2 meses
Puntos: 0
no se porque me da que es esto lo que buscas... ;)

intensivstation.ch/files/templates/temp11.html

(eso con las www delante, que no me deja)
  #8 (permalink)  
Antiguo 15/11/2006, 07:01
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años
Puntos: 0
Cita:
Iniciado por putokender Ver Mensaje
no se porque me da que es esto lo que buscas... ;)

intensivstation.ch/files/templates/temp11.html

(eso con las www delante, que no me deja)
Hola a todos
He logrado centrar mi página web en el navegador, gracias a la plantilla de intensivstation, que por cierto me parecen bastante interesantes. El problema surge cuando quieres anidar capas dentro de la web que has centrado, pues ninguna de las capas quedan en su sitio si no que se dsipersan hacia un lado o hacia otro según la resolución de la pantalla . Hay alguna forma de solucionar esto.
Les agrradecería mucho la ayuda
  #9 (permalink)  
Antiguo 22/11/2006, 05:41
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 11 años, 2 meses
Puntos: 0
No tengo muy claro cual es tu problema. Creo qu te refieres a que aunque las capas esten dentro de esa "madre" centrada, no se posicionan en relacion a ella, ¿es asi? En tal caso (y siempre que otros de los gurus no me corrijan a collejas virtuales) creo que la movida va porq la capa "madre" esta posicionada relativamente, y las capas no la reconoces como origen.

Creo qeu el tema va por ahi. Espero no equivocarme y liarte aun mas
  #10 (permalink)  
Antiguo 22/11/2006, 06:27
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años
Puntos: 0
Es todo lo contrario.o sea las capas (todas ellas con valor absoluto) anidadas o contenidas en la capa madre se encuentran bien situadas, mientras que es la capa madre la que se descentra según la resolución de pantalla. No obstante he probado a poner un valor relativo a la capa madre, y es entonces cuando esta keda centrada, pero las capas anidadas se descentran por completo. He probado a poner como valor relativo las capas anidadas, pero el efecto es mucho peor.

Solucion: Es dura pero es así. Lo que he hecho es colocar la capa madre en posicion left 0 y top 0. Solo así keda completamente centrada a una resolución de 800 x 600. A resoluciones de pantalla mas alta, siempre se verá situada en el margen izquierdo de la pantalla.
No es lo mas estético..... pero que le vamos a hacer si no hay otra solución
  #11 (permalink)  
Antiguo 22/11/2006, 08:22
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2035
Cita:
Iniciado por renderonesio Ver Mensaje
Es todo lo contrario.o sea las capas (todas ellas con valor absoluto) anidadas o contenidas en la capa madre se encuentran bien situadas, mientras que es la capa madre la que se descentra según la resolución de pantalla. No obstante he probado a poner un valor relativo a la capa madre, y es entonces cuando esta keda centrada, pero las capas anidadas se descentran por completo. He probado a poner como valor relativo las capas anidadas, pero el efecto es mucho peor.

Solucion: Es dura pero es así. Lo que he hecho es colocar la capa madre en posicion left 0 y top 0. Solo así keda completamente centrada a una resolución de 800 x 600. A resoluciones de pantalla mas alta, siempre se verá situada en el margen izquierdo de la pantalla.
No es lo mas estético..... pero que le vamos a hacer si no hay otra solución
El problema es que las posiciones absolutas de las capas toman como referencia a la "pantalla", por lo tanto "ignoran" a la capa madre. Lo que tienes que hacer es situarlas con respecto a la capa contenedor (madre) mediante etiquetas como margin, padding...

Mira este enlace a ver si te ayuda a ver la diferencia. Para poder entender como maquetar páginas sin tablas

Al principio es un poco lioso hasta que captas la idea.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #12 (permalink)  
Antiguo 22/11/2006, 11:03
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años
Puntos: 0
Hola RBZ :

Muy interesante el tutorial que me has pasado, pero no me soluciona el problema, pues no menciona nada de posiciones absolutas o relativas para las capas.

Aqui el problema es poner una capa de posicion absoluta centrada independientemente de la resolución de pantalla.

He oido por ahí que existe un código para evitar que la resolución de pantalla descentre el contenido de la web, pero no tengo ni idea de donde poder encontrar dicho codigo y de que tipo de codigo se trata (html, java, php etc etc)
Alguien sabe algo?
  #13 (permalink)  
Antiguo 29/11/2006, 13:01
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 11 años, 2 meses
Puntos: 0
Si kieres "centrar" una capa absoluta, tienes uqe meterla dentro de otra relativa que este centrada. Asi es como lo hago yo y funciona...

Para centrarla horizontalmente basta con poner a la capa relativa:
margin:0px auto 0px auto;

Y eso si, para el tema vertical, es otro tema. Si quieres centrarla exactamente en el centro hay un hilo por aki donde lo explican muy bien (pero no se cual es, sorry), pero si kieres colocarla a una distancia concreta o algo asi... javascript.
  #14 (permalink)  
Antiguo 29/11/2006, 13:23
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años
Puntos: 0
Acabo de probar lo que me comentas putokender y si es cierto que la web se keda bien centrada a resolución de pantalla 1024 x 768 pero prueba a hacerlo con resolución 1152 x 864 en pantalla y verás que se te descentra la misma.

No hay forma de conseguirlo. Por ahí he escuchado que hay un script que te permite mantener la posición centrada de la web independientemente de la resolucion de pantalla que tengas. La cosa es saber donde puede encontrar uno ese script
  #15 (permalink)  
Antiguo 09/12/2006, 17:39
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años
Puntos: 0
Re: Alinear capa en centro de la pantalla

Soledad digame?
  #16 (permalink)  
Antiguo 09/12/2006, 18:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Alinear capa en centro de la pantalla

Aupa.
No sé qué habrás encontrado en los tutoriales que te han recomendado, pero yo lo que uso es:

<style>
body {
margin: 0;
padding: 0;
}
#centro {
background-color: rgb(51, 153, 153);
position: absolute;
width: 400px;
height: 126px;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -63px;
}
</style>

Funciona de maravilla en todos los navegadores que conozco.

De todas maneras, es más sencillo y pones aquí tú código completo y lo podemos ver.

Mikel.
  #17 (permalink)  
Antiguo 13/12/2006, 08:00
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2035
Re: Alinear capa en centro de la pantalla

Cita:
Iniciado por renderonesio Ver Mensaje
Acabo de probar lo que me comentas putokender y si es cierto que la web se keda bien centrada a resolución de pantalla 1024 x 768 pero prueba a hacerlo con resolución 1152 x 864 en pantalla y verás que se te descentra la misma.

No hay forma de conseguirlo. Por ahí he escuchado que hay un script que te permite mantener la posición centrada de la web independientemente de la resolucion de pantalla que tengas. La cosa es saber donde puede encontrar uno ese script
Hola renderonesio:
El enlace que te puse era para que vieras como se comportan los elementos cuando los posicionas con valores relativos, pero para eso necesitas poner todos en valores relativos... No puedes anidar capas con valores absolutos a una con valor relativo para que se centren.
Si existe un script que haga lo que pides lo desconozco.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:17.