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>
Funciona en la mayoría de los navegadores ,menos en IE6.
Estandarización
CSS 2.1 válido.
XHTML 1.0 Transitional válido.