lista-css

Al igual que podemos estilizar una lista de forma compleja, también se puede hacer de una forma más simple, con sólo una imagen de 1 píxel (Ver imagen). Esta imagen puede dar mucho de sí, ya que con repeat-x podemos crear una línea horizontal y con repeat-y una línea vertical. Con un poco de imaginación podemos usar este recurso para estilizar nuestra lista de forma sencilla.

Código HTML

La estructura del código HTML consta de una lista desordenada:

Select Code
<ul id="project-list">
<li><a href="#">Civil Engineering</a>
<ul>
<li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
<li><a href="#">Culver’s Home Office</a></li>
<li><a href="#">First Addition to Highland Addition</a></li>
<li><a href="#">Fox Point Apartments</a>
<ul>
<li><a href="#">East Side</a></li>
<li><a href="#">West Side</a></li>
</ul>
</li>
<li><a href="#">Metropolitan Place Phase II</a></li>
<li><a href="#">Oak Park Place of Baraboo</a></li>
<li><a href="#">Premier Coop</a></li>
<li><a href="#">Sleep Inn & Suites</a></li>
<li><a href="#">Tradewinds Business Center</a></li>
<li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
</ul>
</li>
<li><a href="#">Environmental Engineering</a></li>
<li><a href="#">Telecommunications Engineering</a>
<ul>
<li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
<li><a href="#">Oakland County/Radian Communications Michigan</a></li>
<li><a href="#">T-Mobile Site Deployment</a></li>
<li><a href="#">U.S. Cellular Network Development</a></li>
<li><a href="#">Western Wireless South Dakota</a></li>
</ul>
</li>
</ul>
<ul id="project-list">

<li><a href="#">Categoria</a>

<ul>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Subcategoria</a>

<ul>

<li><a href="#">SubItem</a></li>

<li><a href="#">Subitem</a></li>

</ul>

</li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

</ul>

</li>

<li><a href="#">Categoria 2</a></li>

<li><a href="#">Categoria 3</a>

<ul>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

</ul>

</li>

</ul>

Código CSS

En el código CSS, aplicaremos una imagen PNG a la lista, repetida verticalmente, y a los items de la lista, repetida horizontalmente.

Select Code
*                   { margin: 0; padding: 0; }
ul                  { list-style: none; }


Select Code
#project-list {

background:transparent url(../images/graypixel.png) repeat-y 15px 0;

width:340px;

}

#project-list li {

font-size:16px;

margin:15px 0 20px;

padding:0 0 0 10px;

}

#project-list li a {

background:white;

color:#1F6DD9;

display:block;

padding:3px;

}

#project-list li a:hover {

color:#84B8FF;

}

#project-list li ul li {

background:transparent url(../images/graypixel.png) repeat-x 0 8px;

font-size:13px;

margin:4px 0 4px 5px;

padding:0 0 0 20px;

}

#project-list li ul li a {

padding:0 0 0 3px;

}

#project-list li ul li ul {

background:transparent url(../images/graypixel.png) repeat-y 15px 0;

margin-bottom:10px;

}

#project-list li ul li ul li {

margin-left:16px;

padding-left:10px;

}


Y ya está. Con CSS y la propiedad de repetición del fondo podemos crear una lista simple y efectiva.

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Vía | CSS-Tricks

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

 
Udemy