Nuestros bullets

En la anotación anterior decíamos que si teníamos un rato libre haríamos algunos bullets que podríamos incorporar a esa colección. Resulta que al final me he líado con ello cuando no debía pero ya puestos, aquí les muestro el resultado con un ejemplo:

Si ves que las imagenes desaparecen durante un instante es debido al FIR (flash image replacement)

• Walter Kobylanski
• Calle Avenida plaza central, 13 izquierda segundo B
• + 555 434 25 45
• Studio.st
• walter studio.st

Si queréis podéis bajaros los bullets (.zip) para que los uséis indescriminadamente siempre y cuando no sea con fines comerciales. Se agradecerá que se cite a los autores.

Para los curiosos aquí está el código y los estilos que hemos usado. Al final, a pesar de que son bullets nos ha parecido mejor usarlos como backgrounds pero eso es cuestión de gustos, ambos métodos son igualmente válidos:

Código HTML empleado:

<ul class="address">
<li class="nam">Walter Kobylanski</li>
<li class="add">Calle Avenida plaza central... B</li>
<li class="tlf">+ 555 434 25 45</li>
<li class="wrk"><a href="#">Studio.st</a></li>
<li class="mal"><a href="#">walter _at_ studio.st</a></li>
</ul>

Estilos empleados:

.address {
  font-family: tahoma, verdana, arial;
  font-size: 11px;
  color:#666;
  list-style: none;
  margin:0px;
  padding:0px;
}
.address li {
  padding-left: 22px;
  line-height: 19px;
}
.address a {
  color:#999;
}
.nam {
  background-image: url(1.gif);
  background-position: 0px 6px;
}
.add {
  background-image: url (2.gif);
  background-position: 1px 6px;
}
.tlf {
  background-image: url(3.gif);
  background-position: 3px 6px;
}
.wrk {
  background-image: url(5.gif);
  background-position: 2px 6px;
}
.mal {
  background-image: url(4.gif);
  background-position: 0px 7px;
}
.nam, .add, .tlf, .wrk, .mal {
  background-repeat: no-repeat;
  list-style: none;
}


En fin, suficiente por hoy. Ya mañana los subimos al sitio en cuestion.