Cómo hacer botón fijo lateral de ayuda

Washby · #1 (**permalink**) 02/09/2010, 03:13

Hola, quería hacer un botón en el lateral de ayuda al estilo de el de "sugerencias" de esta web (lo he visto en alguna otra también):

http://es.touristeye.com/

El botón no se mueve al hacer scroll de página y al clickarlo se abre una ventana pequeña encima oscureciendo parcialmente el fondo.

Supongo que se hace mediante una combinación de CSS y javascript, he mirado el código de la página pero como soy un poco novato no me he aclarado mucho.

¿podeis guiarme un poco? ¿puede ser que haya algún plugin de jquery para ello?

Gracias!
Saludos!

angelAparicio · #2 (**permalink**) 02/09/2010, 03:34

Hola, puedes hacer un botón fijo con el siguiente código

Código:

#fixed {
left: 0;
top: 45%;
position: fixed;
}

La clave es la propiedad "fixed", que mantendrá el botón fijo en su lugar, aunque hagas scroll

La ventana centrada la puedes crear de manera similar, con position fixed y centrándola jugando con los valores left, top, height y width.

La manera de "oscurecer" la pantalla es usando una capa que ocupe toda la pantalla (left y top 0, height y width 100%) que tenga como fondo una imagen png negra con una cierta transparencia. Con la variable z-index, pones esta imagen sobre el contenido y la "ventana emergente" sobre la imagen.

Más o menos esa es la idea general.

Washby · #3 (**permalink**) 02/09/2010, 04:31

Cita:

Iniciado por angelAparicio

Hola, puedes hacer un botón fijo con el siguiente código

Código:

#fixed {
left: 0;
top: 45%;
position: fixed;
}

La clave es la propiedad "fixed", que mantendrá el botón fijo en su lugar, aunque hagas scroll

La ventana centrada la puedes crear de manera similar, con position fixed y centrándola jugando con los valores left, top, height y width.

La manera de "oscurecer" la pantalla es usando una capa que ocupe toda la pantalla (left y top 0, height y width 100%) que tenga como fondo una imagen png negra con una cierta transparencia. Con la variable z-index, pones esta imagen sobre el contenido y la "ventana emergente" sobre la imagen.

Más o menos esa es la idea general.

Entiendo, muchas gracias Angel, ya me temía que tenía que haber puesto la pregunta en el subforo de CSS je je

Una última cosa que supongo que será lo más fácil, ¿cómo pongo el texto ( "sugerencias") en vertical como en esa web? ¿o estará hecho con una imagen?

Saludos!

angelAparicio · #4 (**permalink**) 02/09/2010, 16:39

En efecto, está hecho con una imagen.

Washby · #5 (**permalink**) 03/09/2010, 01:08

Cita:

Iniciado por angelAparicio

En efecto, está hecho con una imagen.

Si, ya he visto que se puede girar texto y ponerlo en otro ángulo pero parece ser que es un atributo de CSS3 por lo que no funciona en todos los navegadores.

Ya me funciona como quería la página de ayuda gracias a tus instrucciones Angel. Muchas gracias.

Saludos!