DIV siempre al centro de la pagina

juandedios · #1 (**permalink**) 26/06/2008, 08:16

Hola:

Desearia saber como hacer para que un DIV aparezca siempre al medio de la pagina, asi se mueva el Scroll de la pagina.

Eh visto un efecto de lo que quiero ne badoo.com, pero ni idea de como hacerlo.

Espero que alguien pueda darme una pista de como hacerlo, gracias.

DragonX · #2 (**permalink**) 26/06/2008, 08:41

debes ponerle a tu div una ubicación fija!

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
#centrado{
position:fixed;
width:200px;
height:200px;
border:1px solid #000;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
</head>
<body>
<div id="centrado">Hola!!!</div>
</body>
</html>

Espero te sirve

daPhyre · #3 (**permalink**) 26/06/2008, 09:29

DragonX, ¿Intentaste probarlo en IE7? Quizá sea solo yo, pero no me ha funcionado...

DragonX · #4 (**permalink**) 26/06/2008, 09:37

Ups! tenés razón.....en IE7 no anda.....ahora lo veo.

DragonX · #5 (**permalink**) 26/06/2008, 09:40

date una vueltita por aca.....

espero te sirva!

Mikmoro · #6 (**permalink**) 26/06/2008, 09:42

Cita:

Iniciado por juandedios

Desearia saber como hacer para que un DIV aparezca siempre al medio de la pagina, asi se mueva el Scroll de la pagina.

No entiendo esto. ¿Que si se mueve el scroll se mantenga en el medio? ¿en vertical? sólo es posible con javascript. ¿En horizontal? no creo que tenga nada que ver con el scroll. Vamos, que no lo entiendo.

Mikel.

daPhyre · #7 (**permalink**) 26/06/2008, 09:44

Hace cinco años, IE5.5 y como toda la vida, deseosos que IE muriera (Y henos aquí, dos versiones después, con un mejor IE, pero que aun sale con sus cosas x-x)

Por supuesto, esta solución usa de JS. Estoy seguro de haber visto una forma de hacerlo solo con CSS, pero tendría que encontrar el hilo

Mikmoro · #8 (**permalink**) 26/06/2008, 09:46

Cita:

Iniciado por daPhyre

Estoy seguro de haber visto una forma de hacerlo solo con CSS, pero tendría que encontrar el hilo

¿Pero hacer exactamente el qué?

Mikel.

daPhyre · #9 (**permalink**) 26/06/2008, 09:48

Esperaba verlo en el link, pero no encontré lo que él deseaba... No fue específico en qué...

A mi entender, lo que busca es algo así, pero no estoy seguro:
http://www.forosdelweb.com/f53/image...1/#post2384486

juandedios · #10 (**permalink**) 26/06/2008, 10:45

muchas gracias, con su ayuda e podido resolverlo, son lo maximo

daPhyre · #11 (**permalink**) 26/06/2008, 10:50

Pues veo que el compañero ya lo logró. Yo que ya había hecho uno fusionando el código de DragonX con el del link que había puesto Mikel tiempo atrás.

Bueno, por si acaso alguien más lo necesita, aquí dejo como se ve el CSS al final:

Código HTML:

<style type="text/css">
* {margin:0; padding:0;}
html, body {
 width:100%; 
 height:100%; 
 overflow:auto; 
}
#fijo{ 
 position:absolute;
 width:200px;
 height:200px;
 border:#000 solid 1px;
 background:#cff;
 left:50%;
 top:50%;
 margin-left:-100px;
 margin-top:-100px;
} 
html>body #fijo { 
 position:fixed; 
} 
#todo{ 
 position:absolute; 
 top:0; 
 left:0; 
 width:100%; 
 height:100%; 
 overflow:auto; 
} 
html>body #todo{ 
 position:static; 
 top:auto; 
 left:auto; 
 width:auto; 
 height:auto; 
 overflow:visible; 
}
</style>

El ejemplo lo dejo en esta página: http://mx.geocities.com/daphyreweb/w...div-fixed.html

Edición: He agregado un par de correcciones a cargo de Mikel para futuras referencias, pues al parecer no funciona la forma original con IE6- ...

DragonX · #12 (**permalink**) 26/06/2008, 11:29

muy bueno daPhyre

Mikmoro · #13 (**permalink**) 26/06/2008, 15:30

Ah, muy bueno, daPhyre. Me quedaré sin saber si era eso lo que buscaba pero de todas maneras es muy buena idea que servirá a otra gente en el futuro.

Mikel.