El posicionamiento CSS nos sirve para crear elementos complejos en páginas web, como podría ser una gráfica de barras. En el artículo anterior del taller de CSS aprendimos a realizar una maquetación de una gráfica de barras con CSS.

Vamos a utilizar un HTML en el que tenemos unas simples capas y con CSS definiremos sus estilos y posicionamiento, de modo que obtengamos un diseño para realizar una atractiva gráfica de barras, separando por completo el aspecto del contenido.

Veamos el ejemplo en una página aparte para hacernos una idea.

En este artículo veremos cómo realizar la segunda gráfica del ejemplo, la de abajo, que es un poco más elaborada, al contar varios colores para las barras y una leyenda.

El código HTML para la gráfica

<div id=contenedor2 class=gris>
       <div id=titulo2>Buscadores referidos</div>
   <div id=grafica2 class=degradadoverde>
       <div id=google class=azul></div>
    <div id=direct class=verde></div>
       <div id=msn class=rojo></div>
       <div id=yahoo class=morado></div>
   </div>
   <div id=leyenda>
       <ul>
       <li class=azul>Google</li>
       <li class=verde>Directo</li>
       <li class=rojo>MSN</li>
       <li class=morado>Yahoo</li>
       </ul>
   </div>
</div>

Como la gráfica del artículo anterior, tenemos un contenedor que tiene dentro todos los elementos de la gráfica: El título, la gráfica con las barras y la leyenda.

El título es una simple capa con texto. La gráfica es otra capa que contiene otras capas con cada una de las barras. Por último, la leyenda, que está dentro de otra capa, tiene una lista con los distintos elementos que se muestran en la grafica.

Veamos los estilos para cada elemento, divididos entre clases e identificadores. Las clases para los estilos comunes a varios elementos y los identificadores con los estilos propios de cada capa. Veamos ahora los estilos para los identificadores.

El contenedor tiene un posicionamiento, un tamaño y un espaciado.

#contenedor2{
   position: relative;
   padding:5px;
   width: 280px;
}

El título tiene una tipografía y un margen.

#titulo2{
   font: bold 10pt Verdana, Tahoma, Arial;
   margin:2 0 5 0px;
}

La gráfica tiene dentro unas dimensiones y un espaciado a la izquierda.

#grafica2 {
   width: 250px;
   height: 100px;
   padding-left:20px;
   position: relative;
}

Luego, para cada una de las barras tenemos un posicionamiento absoluto, para colocarlas dentro de la gráfica. Como esta capa está dentro de la gráfica, la posición absoluta corresponde a la posición que ocupará la barra dentro de la capa de la gráfica.

#google{
   width: 190px;
   height: 30px;
   position:absolute;
   left:0px;
   top:10px;
}
#direct{
   width: 80px;
   height: 30px;
   position:absolute;
   left:0px;
   top:25px;
}
#msn{
   width: 35px;
   height: 30px;
   position:absolute;
   left:0px;
   top:40px;
}
#yahoo{
   width: 25px;
   height: 30px;
   position:absolute;
   left:0px;
   top:55px;
}

Como se puede ver, cada barra tiene una anchura que corresponde con el valor que se quiere representar.

Para la leyenda se han de definir estilos tanto para la capa de la leyenda como para la lista que contiene.

#leyenda{
   position: relative;
   text-align:center;
}
#leyenda ul{
   margin:10 0 10 0px;
   padding: 0px;
}
#leyenda li{
   display:inline;
   font: bold 8pt Verdana, Tahoma, Arial;
   height: 10pt;
   margin: 2px;
   padding: 2px;
}

Lo más destacable de la lista es que tiene el display inline, que hará que se muestren todos los elementos en una línea, en lugar de ocupar un elemento por línea de texto.

Terminamos viendo las clases, que contienen los colores de fondo y borde de las capas. Como cada barra tiene su color, cada una tiene una clase distinta, que utilizamos también como estilo en la leyenda. Además, tanto el contenedor como la gráfica en si tienen un estilo personalizado, que ya utilizamos y comentamos en el ejercicio anterior, con una gráfica de barras más sencilla.

.azul{
   background-color: #9190a8;
   border-bottom: 2px solid #535270;
   border-right: 2px solid #535270;
   border-top: 2px solid #cbcbda;
   border-left: 2px solid #cbcbda;
}

.rojo{
   background-color: #c47965;
   border-bottom: 2px solid #67382c;
   border-right: 2px solid #67382c;
   border-top: 2px solid #e1a494;
   border-left: 2px solid #e1a494;
}
.verde{
   background-color: #5aae4c;
   border-bottom: 2px solid #357d2a;
   border-right: 2px solid #357d2a;
   border-top: 2px solid #aceaa2;
   border-left: 2px solid #aceaa2;
}
.gris{
   background-color: #b5b5b5;
   border-bottom: 2px solid #6b6b6b;
   border-right: 2px solid #6b6b6b;
   border-top: 2px solid #f0f0f0;
   border-left: 2px solid #f0f0f0;
}
.morado{
   background-color: #a05aab;
   border-bottom: 2px solid #672770;
   border-right: 2px solid #672770;
   border-top: 2px solid #d090d9;
   border-left: 2px solid #d090d9;
}
.degradadoverde{
   background-color: #e1e455;
   background-image: url('images/degradado-verde.jpg');
   background-repeat: repeat-x;
   border-bottom: 2px solid #6f722d;
   border-right: 2px solid #6f722d;
   border-top: 2px solid #ece996;
   border-left: 2px solid #ece996;
}

Simplemente se debe notar que se utiliza un color de fondo y unos bordes para crear un efecto de viselado. En la clase que da color a la gráfica, llamada degradadoverde, hemos utilizado además una imagen de fondo.

Podemos ver el ejemplo en una página aparte.

Con esto hemos visto como crear gráficas de barras solamente con estilos CSS y unas cuantas capas. Las posibilidades son mucho mayores si se desea emplear un poco de tiempo y creatividad para mejorar los ejemplos presentes y hacerlos más variados.