[SOLUCIONADO] Como hago una barra de herramientas como la de Facebook

ivo5860 · #1 (**permalink**) 30/10/2013, 11:43

Hola! Amigooos..!

Necesito ayudaa..! Quiero en mi pagina web una barra del tope, como las de youtube, facebook, twitter o de esta pagina ! Tutorialesweb.

Sin espacios en blanco, iconos y links separados..Ah, y que la barra se mueva cuando baje , como la de facebook que cuando bajas a verpublicaciones anteriores la barra queda estatica en la pantalla siempre en el head, quieta.. Ayuda ! Necesito eso.
Es solo eso... Necesito que me den el Css,html y lo pongo...!

Desde ya muchas gracias..!!!!

eduardobrutaldeath · #2 (**permalink**) 30/10/2013, 12:28

Cita:

Iniciado por ivo5860

Hola! Amigooos..!

Necesito ayudaa..! Quiero en mi pagina web una barra del tope, como las de youtube, facebook, twitter o de esta pagina ! Tutorialesweb.

Sin espacios en blanco, iconos y links separados..Ah, y que la barra se mueva cuando baje , como la de facebook que cuando bajas a verpublicaciones anteriores la barra queda estatica en la pantalla siempre en el head, quieta.. Ayuda ! Necesito eso.
Es solo eso... Necesito que me den el Css,html y lo pongo...!

Desde ya muchas gracias..!!!!

crea un <HEADER></HEADER>, adentro agregas tu logo, menú, etc y en el CSS le pones estas propiedades.

Código CSS:

Ver originalHEADER
{
position: fixed; /*para mantener estático el header en el encuadre del navegador*/
top: 0; /*para que quede arriba*/
z-index: 10; /*para que el header se monte encima de cualquier elemento que no tenga un número mayor*/
width: 100%; /*importante para que cuando alejes la página con el ZOOM (SCROLL) el header no aparezca cortado*/
}

Creo que sería todo, sólo tendrías que darle más estilo al HEADER y agregar contenido.

ivo5860 · #3 (**permalink**) 31/10/2013, 12:09

Muchas Gracias!! eduardobrutaldeath

Ahora mismo voy a probar y te digo como me quedo (:

ivo5860 · #4 (**permalink**) 31/10/2013, 12:24

Muy bien!!

Amigo!! Me sirvió! :D

Pero me queda un espacio en la parte izquierda! No esta la barra en el ancho completo

IMAGEN DEL ESPACIO : http://es.tinypic.com/r/2usy60w/5

ivo5860 · #5 (**permalink**) 31/10/2013, 12:35

YA ESTAAA!!

Lo hice yo mismo, es que tenia otro div y me acorde que era left! Ya esta :3 puse left: 0px; ... Salu2 Muchas gracias por ayudaaar!