RibosoMatic Blog

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.

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