Inicio CSS Barra inferior tipo Facebook con CSS

Barra inferior tipo Facebook con CSS

22 4802

Para los que lo pedian, realice una pequeña imitación de la barra inferior donde se cuelgan las aplicaciones, chat y notificaciones en Facebook. El desarrollo es muy sencillo y limitado, como para mejorarlo luego y darle alguna buena utilidad en alguna aplicación nuestra. Luego me gustaria complementarla con tooltip y menus.

Simple Barra Facebook

Estructura CSS básica:

El ancho del contenedor es 100 % y estará posicionado en la parte inferior inamovible. Dentro otro contenedor ya con la barra en sí.

#taskbar{
height:25px;
width:100%;
margin:auto;

position: fixed;
bottom: 0;
z-index: 99;
}
#taskbar #container{
background-color:#E5E5E5;
border:1px solid #B5B5B5;
display:block;
margin-left:15px;
margin-right:15px;
height:25px;
}

También especificamos los grupos de botones, para nuestro ejemplo 3:

/*------- blocks btns --------*/
#taskbar #container .block-left{
position:relative;
float: left;
width:10%;
height:25px;

border-right:1px solid #B5B5B5;
}
#taskbar #container .block-center{
position: relative;
float: left;
width: 50%;
height:25px;

border-right:1px solid #B5B5B5;
}
#taskbar #container .block-right{
position: relative;
float: left;
width: 25%;
height:25px;

border-right:1px solid #B5B5B5;
}

Finalmente una clase para cada botón, que por lo general serán vinculos de enlaces.

#taskbar #container .btns{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding:3px;
display:inline-block;
vertical-align:middle;
line-height:14px;
}

En la parte HTML

Agregamos un div en la parte inferior del HTML, con las clases especificadas en la hoja de estilos. En el ejemplo práctico propuesto es este:

<div id="taskbar">
<div id="container">
<div class="block-left">
<a href="" class="btns">Aplicaciones</a>
</div>
<div class="block-center">
<a href="" class="btns"><img src="../img/application.png" class="alignleft" alt="aplicacion" /></a>
<a href="" class="btns"><img src="../img/calculator.png" class="alignleft" alt="aplicacion" />Twitter</a>
<a href="" class="btns"><img src="../img/clock_red.png" alt="aplicacion" /></a>
<a href="" class="btns"><img src="../img/zoom.png" alt="aplicacion" /></a>
</div>
<div class="block-right">
<a href="" class="btns"><img src="../img/group.png" class="alignleft" alt="chatroom" />Chat Room (0)</a>
</div>
</div>
</div>

Funciona correctamente en la mayoría de navegadores, salvo IE6 que ya no debe existir.

Links : demo, descargar

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....