Foros del Web » Creando para Internet » CSS »

DIV siempre al centro de la pagina

Estas en el tema de DIV siempre al centro de la pagina en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/06/2008, 09:16
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
DIV siempre al centro de la pagina

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.
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 26/06/2008, 09:41
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: DIV siempre al centro de la pagina

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
  #3 (permalink)  
Antiguo 26/06/2008, 10:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: DIV siempre al centro de la pagina

DragonX, ¿Intentaste probarlo en IE7? Quizá sea solo yo, pero no me ha funcionado...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 26/06/2008, 10:37
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: DIV siempre al centro de la pagina

Ups! tenés razón.....en IE7 no anda.....ahora lo veo.
  #5 (permalink)  
Antiguo 26/06/2008, 10:40
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: DIV siempre al centro de la pagina

date una vueltita por aca.....

espero te sirva!
  #6 (permalink)  
Antiguo 26/06/2008, 10:42
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: DIV siempre al centro de la pagina

Cita:
Iniciado por juandedios Ver Mensaje
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.
  #7 (permalink)  
Antiguo 26/06/2008, 10:44
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: DIV siempre al centro de la pagina

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 26/06/2008, 10:46
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: DIV siempre al centro de la pagina

Cita:
Iniciado por daPhyre Ver Mensaje
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.
  #9 (permalink)  
Antiguo 26/06/2008, 10:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: DIV siempre al centro de la pagina

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 26/06/2008, 11:45
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Respuesta: DIV siempre al centro de la pagina

muchas gracias, con su ayuda e podido resolverlo, son lo maximo
__________________
El aprendiz.
  #11 (permalink)  
Antiguo 26/06/2008, 11:50
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: DIV siempre al centro de la pagina

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- ...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Última edición por daPhyre; 22/10/2008 a las 11:38 Razón: Codigo mejorado
  #12 (permalink)  
Antiguo 26/06/2008, 12:29
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: DIV siempre al centro de la pagina

muy bueno daPhyre


  #13 (permalink)  
Antiguo 26/06/2008, 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: DIV siempre al centro de la pagina

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.
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 11:23.