Ribosomatic ha creado a petición de sus usuarios una barra inferior parecida a la de Facebook, donde se muestran las aplicaciones, el chat, y las notificaciones de Facebook, realizada con CSS y algunas imágenes. Es muy simple, pero un poco limitada, por lo que, si la sumamos a este artículo, obtendremos nuestra barra definitiva.

Código CSS

Se dispone un contenedor con ancho del 100%, en el que irá otro desde el que finalmente se incluirá la barra  en sí con una disposición de bloque. Obviamente los colores del fondo y borde pueden ser modificados por nosotros mismos:

#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;
}

Especificamos los grupos de botones:

#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;
}

Aplicamos una clase para cada botón (supuestamente vínculos de enlace):

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

Código HTML

Se van anidando divs con sus respectivas hojas de estilo. La clase “btns” ubicada en etiquetas será la de los botones (vínculos).

<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"></a>
                <a href="" class="btns">Twitter</a>
            <a href="" class="btns"></a>
            <a href="" class="btns"></a>
        </div>
                <div class="block-right">
                <a href="" class="btns">Chat Room (0)</a>
        </div>
    </div>
</div>