Seguro que alguna vez habeis querido tener un menú en la parte baja del navegador del usuario de tu web... (Cosas como el chat de tuenti, facebook etc) O como el que hay aqui: http://proyectowp.site90.net/
Pues bien, puede parecer MUY complicado... ¿Pero que pasa si te digo que con apenas 2 lineas de CSS se puede hacer?Que, como se te ha quedao el cuerpo, hehe, ya sabia yo :P
Lo primero sería crear un div para meter todo eso; nosotros le llamaremos: "menu-fondo-fijo":
Lo sigiente sería definir lo que haría cada uno: Asi que ya sabes, primero lo escribo todo como sería y despues explico:
Lo primero que decimos es que ocupe el 100% de la pantalla del usuario sin importar su resolucion (600x800..1024x1024 etc etc etc)
Seguidamente le decimos la altura (no queremos un menu tan bajo como un grano de arena (lo que sería un pixel))
Lo sigiente yo no lo entiendo, pero solo se que hay que ponerlo. Despues veis:bottom:0 ; right:0 ; left:0 ; Eso es el margin de cada lado, yo recomiendo poner 1px al bottom, pero eso lo dejo a tu elección
Lo siguiente que ves es lo que lo deja el menu siempre abajo, con fondo rojo y el lefto alineado a la izquierda:
overflow:auto ; background-color:red ; text-align:left
Ves lo que está en verde? Es un pequeño codigo para el redondeo de las esquinas :=) (Doodleo en la respuesta a siguiente lo explica mejor) Por lo demas, es muy personalizable, es como un div ma,s pero con esas caracteristicas... ahora, da rienda suelta a tu imagiacion para mejorarlo eheh
Pues bien, puede parecer MUY complicado... ¿Pero que pasa si te digo que con apenas 2 lineas de CSS se puede hacer?Que, como se te ha quedao el cuerpo, hehe, ya sabia yo :P
Lo primero sería crear un div para meter todo eso; nosotros le llamaremos: "menu-fondo-fijo":
<div id="menu-fondo-fijo"><p>texto en el menu fijo</p></div>Lo sigiente sería definir lo que haría cada uno: Asi que ya sabes, primero lo escribo todo como sería y despues explico:
#menu-fondo-fijo {width:100% ; height:30px ; position:fixed ; bottom:0 ; right:0 ; left:0 ; overflow:auto ; background-color:red ; text-align:left ; [COLOR="green"]-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border:1px solid #000000;[/COLOR]}Lo primero que decimos es que ocupe el 100% de la pantalla del usuario sin importar su resolucion (600x800..1024x1024 etc etc etc)
Seguidamente le decimos la altura (no queremos un menu tan bajo como un grano de arena (lo que sería un pixel))
Lo sigiente yo no lo entiendo, pero solo se que hay que ponerlo. Despues veis:bottom:0 ; right:0 ; left:0 ; Eso es el margin de cada lado, yo recomiendo poner 1px al bottom, pero eso lo dejo a tu elección
Lo siguiente que ves es lo que lo deja el menu siempre abajo, con fondo rojo y el lefto alineado a la izquierda:
overflow:auto ; background-color:red ; text-align:left
Ves lo que está en verde? Es un pequeño codigo para el redondeo de las esquinas :=) (Doodleo en la respuesta a siguiente lo explica mejor) Por lo demas, es muy personalizable, es como un div ma,s pero con esas caracteristicas... ahora, da rienda suelta a tu imagiacion para mejorarlo eheh