problemas con el centrado y las distintas resoluciones

[foroworld]

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;

}

[AlbertoGarcia]

Hola, el vertical-align: middle; sobra y pon position:absolute;
Salud!

[foroworld]

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.

[Mikmoro]

Iniciado por foroworld

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.

[foroworld]

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?

[Mikmoro]

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.

[AlbertoGarcia]

Iniciado por foroworld

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.

[foroworld]

Iniciado por Mikmoro

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.

[Mikmoro]

Iniciado por foroworld

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?

[Mikmoro]

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.

[foroworld]

Iniciado por Mikmoro

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!!!

[Mikmoro]

Iniciado por foroworld

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?

[foroworld]

Iniciado por Mikmoro

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;


}

[adriancitov7]

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

[Mikmoro]

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

<!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>

[foroworld]

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.

[foroworld]

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.

[foroworld]

Iniciado por foroworld

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.

[adriancitov7]

Iniciado por foroworld

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 ;)

[baccxus]

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> 

[foroworld]

Iniciado por adriancitov7

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?

[foroworld]

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

[baccxus]

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

Saludos

[AlbertoGarcia]

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! ;)

[Mikmoro]

Iniciado por foroworld

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.

[foroworld]

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!!!

[opzina]

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

[Mikmoro]

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.

[foroworld]

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

Funciona my bien en todos los navegadores que he probado.

Un millón de gracias.

[foroworld]

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?