Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list:

The HTML is nothing fancy, just a nested unordered list like any other:

<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>

In the CSS, we’ll apply the single-pixel PNG graphic to the lists themselves, repeated vertically, and the list items themselves repeated horizontally. On the list items, we can can “stop” the lines from going the whole distance across by giving the anchor links inside them a white background, which lays on top of the list item blotting out the line.

#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;
}