Foros del Web » Creando para Internet » CSS »

problemas con el centrado y las distintas resoluciones

Estas en el tema de problemas con el centrado y las distintas resoluciones en el foro de CSS en Foros del Web. Hola, Tengo un problema con para centrar el div principal. El siguiente código funciona de maravilla, realiza un centrado horizontal y vertical de la capa. ...

  #1 (permalink)  
Antiguo 14/05/2009, 03:33
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
problemas con el centrado y las distintas resoluciones

Hola,

Tengo un problema con para centrar el div principal.
El siguiente código funciona de maravilla, realiza un centrado horizontal y vertical de la capa.
El único problema es que si la resolución de la pantalla es menor que el div, este se corta, es decir q no aparece completo, ni siquiera aparece el scroll para poder ver el div completo.
¿alguien conoce algún truco para solucionar este problemilla?

Muchas gracias.

#contenedor{

vertical-align: middle;
margin-top: -300px;
margin-left: -480px;
position: absolute;
top: 50%;
left: 50%;
width: 960px;
height: 600px;

}
  #2 (permalink)  
Antiguo 14/05/2009, 05:08
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: problemas con el centrado y las distintas resoluciones

Hola, el vertical-align: middle; sobra y pon position:absolute;
Salud!
  #3 (permalink)  
Antiguo 14/05/2009, 05:31
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Hola Alberto,

El "vertical-align: middle" es indiferente y la "position:absolute;" está puesta.
El código funciona correctamente, el problema es q cuando visualizas la página en una resolucion menor que el tamaño del div, este no se ve completo y ni siquiera aparecen los scrolls.

Tal vez, tenga que utilizar una tabla para corregir este error??? porque con capas no encuentro solución.

Muchas gracias.
  #4 (permalink)  
Antiguo 14/05/2009, 06:12
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
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
si la resolución de la pantalla es menor que el div, este se corta, es decir q no aparece completo, ni siquiera aparece el scroll para poder ver el div completo.
Claro que si es menor que el div no aparece completo. ¿Qué esperas que ocurra? y ¿qué es lo que quieres conseguir?

No aparece el scroll porque al tener posición absoluta no fuerza a crecer a body cuando este es menor que la caja.
No creo que eso tenga solución fácil. Si tuviera el código exacto, yo lo que intentaría sería poner una caja oculta del mismo ancho que la otra y centrada, de manera que obligara a la aparición del scroll al reducir la ventana.
  #5 (permalink)  
Antiguo 14/05/2009, 06:21
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Hola Mikmoro,

Muchas gracias por la respuesta.

La verdad es que la solución no parece sencilla, al final lo he logrado corregir con una asquerosa tabla. (cosa q no me gusta)

Una pregunta:
¿q propiedades le darias a la capa oculta?
  #6 (permalink)  
Antiguo 14/05/2009, 07:44
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
Respuesta: problemas con el centrado y las distintas resoluciones

Podría estar situada en cualqueir parte y tendría:

width: 960px;
height: 2px;
margin: 0 auto;
visibility: hidden;

Es decir: es tan ancha como la centrada, no es necesario que sea más alta que 2px, estaría centrada en la ventana (margin: 0 auto), y estaría presente pero invisible.
Esto provocaría que en el momento que la ventana tuviera menos de 960px de ancho aparecería el scroll horizontal.

De todos modos sería necesario conocer el caso concreto para saber si sería la mejor solución o no.
  #7 (permalink)  
Antiguo 14/05/2009, 08:27
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
El "vertical-align: middle" es indiferente y la "position:absolute;" está puesta.
El código funciona correctamente, el problema es q cuando visualizas la página en una resolucion menor que el tamaño del div, este no se ve completo y ni siquiera aparecen los scrolls.
Siento el error. He usado muchas veces esa técnica y nunca he tenido ese problema con el scroll.
  #8 (permalink)  
Antiguo 14/05/2009, 11:33
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por Mikmoro Ver Mensaje
Podría estar situada en cualqueir parte y tendría:

width: 960px;
height: 2px;
margin: 0 auto;
visibility: hidden;

Es decir: es tan ancha como la centrada, no es necesario que sea más alta que 2px, estaría centrada en la ventana (margin: 0 auto), y estaría presente pero invisible.
Esto provocaría que en el momento que la ventana tuviera menos de 960px de ancho aparecería el scroll horizontal.

De todos modos sería necesario conocer el caso concreto para saber si sería la mejor solución o no.
Lo he probado y no funciona.

el problema está en la altura, xq el scroll horizontal aparecía desde el primer momento... el problema es el vertical...el corte se produce en la parte superior del div.
  #9 (permalink)  
Antiguo 14/05/2009, 11:49
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
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
Lo he probado y no funciona.

el problema está en la altura, xq el scroll horizontal aparecía desde el primer momento... el problema es el vertical...el corte se produce en la parte superior del div.
Esto no lo habías dicho hasta ahora. ¿Cómo iba a funcionar? Es evidente que yo hablaba del scroll horizontal:

"que la ventana tuviera menos de 960px de ancho aparecería el scroll horizontal."

¿Y por qué no haces lo mismo pero al contrario, es decir, con un width de 2px y un height de 600px?
  #10 (permalink)  
Antiguo 14/05/2009, 11:54
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
Respuesta: problemas con el centrado y las distintas resoluciones

El problema es que llega un momento en que la ventana tiene digamos 300px de altura, así que el desplazamiento top del 50% es de 150px. Pues bien, si el margin-top negativo es de -300px, la caja tiene que desaparecer por arriba a la fuerza.

Debes hacer que el body nunca pueda ser menor de 600px de alto.
  #11 (permalink)  
Antiguo 18/05/2009, 03:41
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por Mikmoro Ver Mensaje
El problema es que llega un momento en que la ventana tiene digamos 300px de altura, así que el desplazamiento top del 50% es de 150px. Pues bien, si el margin-top negativo es de -300px, la caja tiene que desaparecer por arriba a la fuerza.

Debes hacer que el body nunca pueda ser menor de 600px de alto.
Hola Mikmoro,

Lo he intentado todo y no funciona.

Muchas gracias por todo, pero todavía no he logrado solucionar el problema.
Así que he tenido que recurrir a una asquerosa table.

Si por casualidad encuentras una solución, me avisas.

Grazie mile!!!
  #12 (permalink)  
Antiguo 18/05/2009, 04:32
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
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
Si por casualidad encuentras una solución, me avisas.
Muy bien. El único asunto es que para encontrar una solución primero tendré que entender el problema del todo:
¿cuando la ventana sea menjor de alta que el propio cuadro el cuadro debe verse entero, centrado, con scroll? no lo entiendo, la verdad. No podrá quedar centrado. Entonces: ¿pegado arriba y con scroll?
  #13 (permalink)  
Antiguo 18/05/2009, 05:01
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por Mikmoro Ver Mensaje
Muy bien. El único asunto es que para encontrar una solución primero tendré que entender el problema del todo:
¿cuando la ventana sea menjor de alta que el propio cuadro el cuadro debe verse entero, centrado, con scroll? no lo entiendo, la verdad. No podrá quedar centrado. Entonces: ¿pegado arriba y con scroll?

ok.

cuando la ventana es menor que el div, aparece el scroll pero no llega a la parte superior de la capa.

Aquí te dejo el código.

html:

<body>
<div id="contenedor">
</div>
</body>

css:

body{

margin: 0px;
background-color: #e9e9e9;
}


CSS:

#contenedor{

vertical-align: middle;
margin-top: -300px;
margin-left: -480px;
position: absolute;
top: 50%;
left: 50%;
width: 960px;
height: 600px;
background-color:#ffffff;


}
  #14 (permalink)  
Antiguo 18/05/2009, 08:01
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
De acuerdo Respuesta: problemas con el centrado y las distintas resoluciones

yo tambien queri saber eso pero no consigo hasta ahora pero puedes usar esto

los margenes laterales no aparecen a un ancho menor de 960px ya que es una tamaño fijo y ya necesitas usted poner medidas relativas si quieres que trabaje correctamente de todas formas te dejo

http://adriancito.co.cc/pruebas/jojo.html

lo pobre en firefox si funciona en ie mal me avisas, espero que pueda servirte

Última edición por adriancitov7; 19/05/2009 a las 09:13
  #15 (permalink)  
Antiguo 18/05/2009, 11:03
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
Respuesta: problemas con el centrado y las distintas resoluciones

A ver: por poder hacerse, se puede, pero siempre estará nuestro odiado IE6 para molestar y exprimirnos la sesera.
Esto es una adaptación de un ejemplo que ya tenía sobre centrado vertical, que funciona bien en IE6, pero en este caso aparece un scroll vertical aun cuando no es necesario:

http://www.araudi.net/forosdelweb/ce...vertical4.html
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centrado Vertical</title>
<style type="text/css">
html, body {height: 100%;margin: 0;}
#caja {display: table;
height: 100%;
width: 100%;
position: relative;
}
.centrado {display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
}
.texto {position: relative;
top: -50%;
display: block;
height: 400px;
width: 900px;
margin: 0 auto;
border: 1px solid #0f0;
}
</style>
</head>
<body>
<div id="caja">
<div class="centrado" style="*position: absolute;*top: 50%;">
<span class="texto">
Texto de prueba, más texto de prueba, otro texto de prueba y el último texto de prueba
</span>
</div>
</div>
</body>
</html>
  #16 (permalink)  
Antiguo 18/05/2009, 12:44
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Hola adriancitov7,

tu código no funciona bien, xq mantiene el margin-top fijo, en resoluciones mayores la capa no estará centrada verticalmente.

De todas formas, muchas gracias.
  #17 (permalink)  
Antiguo 18/05/2009, 12:48
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Muchas gracias, Mikmoro

Esto funciona de pm, la única pega es el scroll vertical en ie.

Aquí va un reto, a ver si hay forma de corregir ese problema.

Última edición por foroworld; 18/05/2009 a las 13:11
  #18 (permalink)  
Antiguo 18/05/2009, 13:07
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
Muchas gracias, Mikmoro

Esto funciona de pm, la única pega es el scroll vertical en ie.

Aquí va un reto, a ver si hay forma de corregir ese problema.
hola mikmoro,

Me he adenlantado, xq el código realmente no funciona en ie, ya que al poner style="*position: absolute ;*top: 50%;" está pasando lo mismo que antes e incluso peor x la barra de scroll.

Última edición por foroworld; 18/05/2009 a las 13:13
  #19 (permalink)  
Antiguo 18/05/2009, 13:11
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Sonrisa Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
hola mikmoro,

Me he adenlantado, xq el código realmente no funciona en ie, ya que al poner style="*position: absolute ;*top: 50%;" está pasando lo mismo que antes e incluso peor x la barra de scroll.
no hay problema de todas formas yo lo veia bien en 1650x1050 por el momento no tengo una resolucion mayor como 1920x1200 o 2560x1600 aunque creo que el usuario comun no pasa de los 1024x768

saludos ;)
  #20 (permalink)  
Antiguo 18/05/2009, 13:12
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: problemas con el centrado y las distintas resoluciones

foroworld: He probado con el código CSS que pusiste al principio y me funciona perfectamente sólo le quité vertical-align: middle, lo único es que no lo he probado en explorer 6 (mi XP en la máquina virtual tiene el 7), con los demás exploradores no tengo problemas.

Si sigues teniendo problemas con IE6 prueba con la librería javascript IE7 que está en googlecode.

Sólo una pregunta: Usas alguna DTD que valide tu documento o no?
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Probando que es gerundio!</title>
<style type="text/css" media="screen">
#contenedor{
background-color: #000000;
color: #FFFFFF;
margin-top: -300px;
margin-left: -480px;
position: absolute;
top: 50%;
left: 50%;
width: 960px;
height: 600px;
overflow: auto; //por si acaso tu contenido es más grade que esta área
}
</style>
</head>

<body>
<div id="contenedor">Aqui va el contenido centrado como lo quieres</div>
</body>
</html> 
__________________
Al final del día hablar es gratis, codificar no lo es
  #21 (permalink)  
Antiguo 18/05/2009, 13:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por adriancitov7 Ver Mensaje
no hay problema de todas formas yo lo veia bien en 1650x1050 por el momento no tengo una resolucion mayor como 1920x1200 o 2560x1600 aunque creo que el usuario comun no pasa de los 1024x768

saludos ;)
¿pero se queda perfectamente centrado?
  #22 (permalink)  
Antiguo 18/05/2009, 13:40
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Hola baccxus,

el código funciona perfectamente desde el principio en todos los navegadores, el problema es que si la resolución del monitor fuera menor (por ejemplo: 800x600)que el tamaño del div, la capa se corta.

ya sé que este tipo de resolución está en desuso, pero el problema es si alguién quiere ver la página a través de un móvil

Última edición por foroworld; 18/05/2009 a las 13:47
  #23 (permalink)  
Antiguo 18/05/2009, 14:00
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: problemas con el centrado y las distintas resoluciones

Lo probé en 800x600 y funcionó perfectamente, salieron las barras de scroll sin ningún problema

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #24 (permalink)  
Antiguo 18/05/2009, 15:23
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: problemas con el centrado y las distintas resoluciones

A ver, creo que este hilo se está yendo de madre. Si usas valores absolutos para el tamaño del contenedor se supone que eres consciente de que si alguien usa una resolución menor que ese tamaño se va a perder parte del contenido de tu página, este punto creo que ya está claro. Te aconsejo que uses valores relativos (%). Por otra parte si además pretendes usar una misma hoja de estilos que valga para todos los navegadores y además para dispositivos móviles lo vas a tener muuuy complicado, por no decir imposible.

A veces hay que ser más realistas en cuanto a las posibilidades de poder llevar a cabo una idea por muy fatástica que nos parezca en un principio.

Yo cuando tengo que centrar un contenido centro sólo verticalmente y horizontalmente maqueto a 1024x768 y el que tenga 800x600 que use scroll. De todos modos hay una forma que probé una vez y me funcionó y es algo como esto:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="generator"
        content="HTML Tidy, see www.w3.org" />
        <meta http-equiv="Content-type"
        content="text/html; charset=utf-8" />

        <title>Test contenido centrado X/Y con porcentajes</title>
<style type="text/css" media="screen">
    
    <!-- #contenedor {
        position: absolute;
        width: 90%;
        height: 80%;
        left: 50%;
        margin-left: -45%;
        height: 80%;
        margin-top: 5%;
        background-color: #000;
        color: #fff;
    }
    -->
    
</style>
    </head>

    <body>
        <div id="contenedor">
            <p>Contenido</p>
        </div>
    </body>
</html>
Esperoro que te sirva, Salud! ;)
  #25 (permalink)  
Antiguo 18/05/2009, 16:30
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
Respuesta: problemas con el centrado y las distintas resoluciones

Cita:
Iniciado por foroworld Ver Mensaje
Me he adenlantado, xq el código realmente no funciona en ie, ya que al poner style="*position: absolute ;*top: 50%;" está pasando lo mismo que antes e incluso peor x la barra de scroll.
Claro, ya te lo decía, y te explicaba la razón unos mensajes más arriba. Veremos si hay alguna solución factible para IE6.
  #26 (permalink)  
Antiguo 19/05/2009, 05:31
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Muchas gracias!!!

Parece que se puede hacer un apaño, utilizando porcentajes.

#contenedor {
position: absolute;
width: 60%;
height: 85%;
margin-left: 20%;
margin-top: 5%;
margin-botton: 10%;
background-color: #FFFFFF;

}


Aún así no queda del todo perfect, por lo que si os apetece seguimos luchando hasta la victoria final.

De nuevo, muchas gracias a todos!!!
  #27 (permalink)  
Antiguo 19/05/2009, 05:37
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: problemas con el centrado y las distintas resoluciones

no es suficiente con poner porcentajes en width y height? porq poner en margin?, no entiendo, yo estoy teniendo problemas en el header..ahora voy a probar algunas alternativas y ver si encuentro la solucion.

saludos
  #28 (permalink)  
Antiguo 19/05/2009, 06:10
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
Respuesta: problemas con el centrado y las distintas resoluciones

Bueno, qué tonto soy, lo tenía hecho desde septiembre de 2008 y no me acordaba que ese ejemplo funcionaba exactamente como tú quieres (creo).
en mi página, en la columna de la izquierda hay tres ejemplos de centrado vertical, y el primero de los 3 es el que funciona igual en IE6 que en FF2.

Míralo a ver.
  #29 (permalink)  
Antiguo 19/05/2009, 14:35
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Perfectooooooo, Mikmoro!!! Eres un crack!!!

Funciona my bien en todos los navegadores que he probado.

Un millón de gracias.
  #30 (permalink)  
Antiguo 20/05/2009, 14:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problemas con el centrado y las distintas resoluciones

Hola Mikmoro,

Esto parece la historia interminable, pero es q por último he probado tu ejemplo en el ie8 y no cuadra.

sabes algo de esta nueva versión de microsoft?
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 13:04.