Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: AlejoSketch en 13 de Diciembre de 2011, 22:11:49 pm
-
Hola, que tal? :)
Tengo una duda, casi problema con CSS y es que no logro mi prometido... tengo un 'momento' en mi página en que se aparecerá un recuadro blanco con x contenido y el resto de la página se tornara con un recubrimiento opaco.. todo logrado y trabajando bien hasta aquí.
La idea es que el recuadro ya mencionado quede en medio de la pantalla del visitante, este centro variando claro a partir de la resolución de cada visitante. de forma horizontal ya lo logré fácilmente con margin: auto; pero no logro hacerlo con vertical align.
Aquí una imagen para apreciarlo mejor:
(http://cubodi.com/lala.png)
y Aquí el CSS:
div#fade {
background: url(../images/fade.png) repeat !important;
height: 100%;
width: 100%;
position: fixed;
bottom: 0;
z-index: 99;
}
div#f_content {
width: 500px;
height: 300px;
background-color: #FFF;
margin: auto;
margin-top: 200px;
}
Como ven tengo margin-top pero no quiero fijar un valor (200px en este caso) ya que si por ejemplo el monitor del visitante es considerablemente grande se verá más hacia arriba y no como en esta imagen basada en otro monitor más pequeño y con la medida ajustada al caso.
Aclaro que #fade es el "recubrimiento" opaco de la página otrogado a travéz de una acción especifica, y #f_content es el recuadro blanco que quiero ALINEAR VERTICALMENTE.
Gracias desde ya! :D
-
Puedes usar JS para ello. Calculando la altura de la pantalla (window.screenY, si no me equivoco), restándole el alto del div (parseInt(document.getElementById('f_content').style.height)) y diviendolo por dos hayas el margin-top que has de ponerle, si usas jQuery o alguna libreria similar se te simplifica el trabajo.
-
Puedes usar JS para ello. Calculando la altura de la pantalla (window.screenY, si no me equivoco), restándole el alto del div (parseInt(document.getElementById('f_content').style.height)) y diviendolo por dos hayas el margin-top que has de ponerle, si usas jQuery o alguna libreria similar se te simplifica el trabajo.
Gracias por tu ayuda :)
Uso jQuery en la web, así que lo aprovecharé... puedes decirme cuales métodos debo aplicar? ... supongo que height() es una.
-
Con height() obtienes la altura, width() el ancho, con css('PROPIEDAD', 'VALOR') agregas los datos CSS.
-
Westwest.... Es "hallar" con "ll", no con "y" ._.
-
Westwest.... Es "hallar" con "ll", no con "y" ._.
Es un garrafal fallo que se me ha pasado... pero no da como para que crees un mensaje sólo para eso.
-
Es un garrafal fallo que se me ha pasado... pero no da como para que crees un mensaje sólo para eso.
Tampoco da para decir eso... xD pero bueno, no importa, te has equivocado y punto.
Ahora, vamos al problema:
Para hacer que quede centrado hay que hacer que el punto medio del div quede en el punto medio de la pantalla.
¿Cómo?
Pasos a seguir:
1.- Hallar el punto medio del div a centrar:
var divX = $('#f_content').width() / 2; // devuelve un numero, en PX
var divY = $('#f_content').height() / 2;
2.- Hallar el punto medio de la ventana actual:
var wX = $(window).width() / 2;
var wY = $(window).height() / 2;
3.- Poner el div en el centro:
$('#f_content').css({
top: (wY - divY) + 'px',
left: (wX - divX) + 'px',
position: 'absolute'
});
Con eso ya debería estar centrado. Si tienes alguna duda, no dudes en preguntar.
-
Tampoco da para decir eso... xD pero bueno, no importa, te has equivocado y punto.
Ahora, vamos al problema:
Para hacer que quede centrado hay que hacer que el punto medio del div quede en el punto medio de la pantalla.
¿Cómo?
Pasos a seguir:
1.- Hallar el punto medio del div a centrar:
var divX = $('#f_content').width() / 2; // devuelve un numero, en PX
var divY = $('#f_content').height() / 2;
2.- Hallar el punto medio de la ventana actual:
var wX = $(window).width() / 2;
var wY = $(window).height() / 2;
3.- Poner el div en el centro:
$('#f_content').css({
top: (wY - divY) + 'px',
left: (wX - divX) + 'px',
position: 'absolute'
});
Con eso ya debería estar centrado. Si tienes alguna duda, no dudes en preguntar.
:o Gracias a todos por sus respuestas, me han ayudado mucho... pero creo que me iré por esta opción! :D +k
-
Espero que no sea porque te di el código del ejemplo sino porque entendiste como hacerlo!
Y gracias por el karma.
-
Espero que no sea porque te di el código del ejemplo sino porque entendiste como hacerlo!
Y gracias por el karma.
Aunque mis conocimientos en programación web no son muy avanzados, jamás coloco una sola línea de código que no halla escrito yo mismo o como en este caso, me hallan facilitado pero que entiendo perfectamente.
Lo dejo claro porque se que en este foro la idea es aprender, no hacer trabajos por los demás :), gracias de nuevo!