Popup con CSS DIV

[sonjeux]

Hola, queria saber como puedo hacer un popup en css que aparesca cuando se cree la pagina y que siga el scroll, no recuerdo bien como se hacia, era con div style position absolute, quiero hacer un popup como el que aparece en la pagina www.warianos.org/foros/index.php la que pide que te registres. Busque y busque y nada de nada, gracias por su ayuda

[daPhyre]

Seguro. Aquí te dejo como hacer un Div siempre en el centro:

http://mx.geocities.com/daphyreweb/w...div-fixed.html

Y aquí como hacer que se abra y se cierre con JS:

http://mx.geocities.com/daphyreweb/w...iv-pop-up.html

[sonjeux]

Muchas gracias, justo lo que busque y busque :P, primero hay que buscar, pero aveces se tarda mucho jajajjjaja

Respuesta super veloz, gracias, saludos

[sonjeux]

Hola de nuevo, el ejemplo anterior esta muy bueno, pero no funciona en Internet Explorer :(, alguien sabe como solucionarlo?, gracias

[kseso?]

Mira si este ejemplo de Mikmoro: Posición fija para IE6 (fixed) es de ayuda.
Si miras el código css verás que tiene las propiedades siguientes:

#fijo {
background:#CCFFFF none repeat scroll 0 0;
border:1px solid #000000;
height:200px;
left:50%;
margin-left:-100px;
margin-top:-100px;
position:absolute;
top:50%;
width:200px;
}

Claro está, que ese div va a estar siempre visible, no hay posibilidad de cerrarlo (bueno, sí. Con firefox y firebug eliminas el elemento jeje)

Un saludo

[daPhyre]

una pregunta kseso?, cual es la diferencia entre este y el mío, que no la noto.

@sonjeux, ¿Usase el hack que puse para IE dentro del código?

[Mikmoro]

Pues varias cosas:

1.- Al tenerlo en UTF-8, comienzas el documento con la cabecera de declaración de xml:

<?xml version="1.0" encoding="utf-8" ?>

lo que hace que no funcione en IE6

2.- Hay un pequeño error en el cierre del comentario condicional, que lo tienes como:

<![end if]-->, y debe ser <![endif]-->, lo que hace que se te vea en pantalla un <![end if]--> en texto arriba del todo.

3.- Como muestro en mi código, no es necesario usar el comentario condicional para nada, ya que lo que incluyes ahí no afecta al resto de navegadores, pudiendo así usar una forma compatible con todos en lugar de una para IE y otra para el resto.

Básicamente esas son las diferencias principales (creo).

[kseso?]

Iniciado por daPhyre

una pregunta kseso?, cual es la diferencia entre este y el mío, que no la noto.

@sonjeux, ¿Usase el hack que puse para IE dentro del código?

Hola DaPhyre.
Lo cierto es que no seguí tus enlaces. Al leer la respuesta de que no funcionaba, recordé que Mikmoro tenía algo que pudiese serle de utilidad y así se lo indiqué.

De todas formas, todos hemos salimos ganando con la "duplicidad" de mi respuesta.

Un saludo

[daPhyre]

Iniciado por Mikmoro

1.- Al tenerlo en UTF-8, comienzas el documento con la cabecera de declaración de xml:

<?xml version="1.0" encoding="utf-8" ?>

lo que hace que no funcione en IE6

¿¡IE6 no reconoce UTF-8!? ¿¡Por qué nadie me había dicho antes!? ... Ahora tendré que modificar toda mi página web

Iniciado por Mikmoro

2.- Hay un pequeño error en el cierre del comentario condicional, que lo tienes como:

<![end if]-->, y debe ser <![endif]-->, lo que hace que se te vea en pantalla un <![end if]--> en texto arriba del todo.

No había reparado en ello. Estaba seguro que funcionaba así... ¡En tal caso, debo corregirlo inmediatamente! (Lo malo de ya no tener IE en casa, y no revisarlo cuando hay oportunidad )

Iniciado por Mikmoro

3.- Como muestro en mi código, no es necesario usar el comentario condicional para nada, ya que lo que incluyes ahí no afecta al resto de navegadores, pudiendo así usar una forma compatible con todos en lugar de una para IE y otra para el resto.

Anteriormente yo tenía el código exactamente igual que tú, pero me he llevado una desagradable sorpresa: Google Chrome no lo deja fijo de esta forma ...

Es por eso que ahora a fuerza debe ser usado de la forma que he hecho yo, haciéndolo de la forma correcta como original, y creando el hack para IE (Además de ser más correcto el código original para los no IE ).

Bueno, después de todo, todos hemos logrado aprender algo de esto

[Mikmoro]

Iniciado por daPhyre

¿¡IE6 no reconoce UTF-8!? ¿¡Por qué nadie me había dicho antes!? ... Ahora tendré que modificar toda mi página web

No, no es que no lo reconozca, es que cuando el archivo empieza por la cabecera de declaración de xml IE6 presenta problemas, como este por ejemplo, al no encontrar lo primero de todo el doctype (es que IE6 es gilipollas, aunque vamos, que no descubro nada con eso).

Iniciado por daPhyre

Anteriormente yo tenía el código exactamente igual que tú, pero me he llevado una desagradable sorpresa: Google Chrome no lo deja fijo de esta forma ...

Ah, pues no tenía ni idea de eso. No, si al final voy a tener que poner el maldito chrome para probar las cosas. Pero... ¿para qué demonios lo usa la gente si es un beta? ¿no tienen bastante con los navegadores que van bien? (además de haber leido que no parece aportar nada especial)

Cuando pueda lo compruebo, porque se me hace muy raro que de la forma original no funcione con el chrome, ya que el concepto es bastante lógico y sencillo.

[daPhyre]

Iniciado por Mikmoro

No, no es que no lo reconozca, es que cuando el archivo empieza por la cabecera de declaración de xml IE6 presenta problemas, como este por ejemplo, al no encontrar lo primero de todo el doctype (es que IE6 es gilipollas, aunque vamos, que no descubro nada con eso).

¿Entonces tendré que eliminar los xml de entrada de toda mi página? Por algo ya está descontinuado, lástima que la gente que no lo ha actualizado no lo sepa

Iniciado por Mikmoro

Ah, pues no tenía ni idea de eso. No, si al final voy a tener que poner el maldito chrome para probar las cosas. Pero... ¿para qué demonios lo usa la gente si es un beta? ¿no tienen bastante con los navegadores que van bien? (además de haber leido que no parece aportar nada especial)

Cuando pueda lo compruebo, porque se me hace muy raro que de la forma original no funcione con el chrome, ya que el concepto es bastante lógico y sencillo.

El original si funciona (Position:fixed), el problema es que a diferencia de de los otros navegadores, no reconoce los malabares que hemos hecho con IE ... Igual no veo por qué debería, ya que no es la forma correcta. Cuando deje de ser beta dudo que comience a hacerle caso

[Mikmoro]

Bueno, ya está. He hecho una pequeña modificación en el archivo y ya funciona en Chrome, IE6 y 7, Opera, etc.

* {margin:0; padding:0;}
html, body {width:100%;
height:100%;
overflow:hidden;
}
#contenido {width:100%;
height:100%;
overflow: auto;
}
#fijo {
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-100px;
top:50%;
margin-top:-100px;
}

y en el html añadir

<div id="contenido">
<p>Texto texto....
...
</div>

[daPhyre]

Excelente

Solo no olvides cambiar los datos en tu página para los futuros clientes que enviemos

[Mikmoro]

Actualizada:

http://www.araudi.net/ejemplos/IE6fixed.html

(maldito Chrome... creo que le voy a empezar a coger manía )

[daPhyre]

Iniciado por Mikmoro

(maldito Chrome... creo que le voy a empezar a coger manía )

Pero hasta el momento ha sido lo único que he visto que hace distinto. Por lo que he visto respeta bien todos los estándares básicos de CSS (a diferencia de IE), así que solo hay que preocuparnos por lo que hagamos "para que IE lo lea bien"