Стилизуем список одним пикселем.

Однопиксельный фоновый рисунок может стать очень удобным многоцелевым инструментом. Размножив его в различных направлениях можно получить горизонтальную линию, вертикальную линию, а также фоновую заливку. Например, его можно использовать для оформления иерархического списка, который первоначально выглядит как беспорядочный набор записей.

В HTML-разметке ничего особенного - обычный вложенный, неупорядоченный список.

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

В CSS, для отображения вертикальной и горизонтальной линий, мы будем использовать одинопиксельные рисунки PNG.

В элементах списка, мы можем прерывать линии, устанавливая фон ссылки, которая уже расположена выше элемента списка, в белый цвет (ну или в необходимый нам цвет). Если этот фон не устанавливать, то получим зачеркнутые по всей длине элементы списка.

#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(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(graypixel.png) repeat-y 15px 0; margin-bottom : 10px; } #project-list li ul li ul li { margin-left : 16px; padding-left : 10px; }

Пример

UPD: К вопросу того, что криво выглядит в IE6.