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

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

В 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.
Опубликовано: 06.11.2009 Просмотров 13313 Ссылка на оригинал Tweet it!
4 comments  

Максим

2009.11.17 11:48

 В ИЕ работает криво((
 

basilkot

2009.11.17 23:56

  • В 7.0 и 8.0 также как и в фф отображает. в 6-м да, есть проблема, высота между элементами списка стала больше. Посмотрю как поправить, обновлю статью.

mihdan

2009.11.20 00:37

 holly hack вам поможет
 

Андрей Гурылёв

2011.03.29 11:31

 В Chrome тоже криво
 

Artur

2013.04.24 04:57

 Если неправильно отображается, то оберните меню div'ом, а к нему примените стиль

.someListClass ul {
padding: 0;
list-style: none;
margin: 0;
}

где .someListClass - класс дива (ну или id, если надо).
 

Оставить после себя комментарий

user

2016.09.12

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!