Ribosomatic creó 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. Esta barra es muy, pero un poco limitada, ya que le faltan ciertas funciones, pero si sabemos utilizar la posicion en CSS obtendremos un buen resultado.



En este codigo disponemos de un contenedor con el ancho al 100%, en donde 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:

Código CSS

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

#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:

Aplicamos una clase para cada botón:

#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

 

<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>

 

Funcionamiento

Funciona en la mayoría de los navegadores.

No funciona en IE6.



Ver ejemplo

Fuente: Ribosomatic