Список, разбитый на колонки

g_man · 07.09.2009

Добрый день всем!
Есть такая задачка, чтоб список типа <ul><li> разбивался на колонки, количество которых можно указывать самому. Нашел один вариант, но не могу въехать как увеличивать количество колонок. Все должно быть на чистом HTML+CSS без таблиц.
Если кто-то поможет советом буду очень благодарен.

trueW3C · 07.09.2009

Надо два списка...

Обтекание с лева и 49% (если 2 колонки)
33% если 3 колонки и так далее

g_man · 07.09.2009

Вот я за седня вроде победил эту штуку. Но возникла еще проблемка.

IE6 :wacko: Вылаживаю полностью код, мож кто поможет ИЕшку победить.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.columns { margin: 0; padding: 0; list-style-type: none; word-spacing: -1ex; width:700px; font: 12px Arial, Helvetica, sans-serif }
*+html ul.columns {margin: 0; padding: 0; list-style-type: none; width:700px }

/*  Firefox ниже версии 3 не знает о inline-block.
	Поэтому указываем для него -moz-inline-stack */
.columns li {display: -moz-inline-stack; display: inline-block;}
*+html .columns li {display: inline;}

/*  Если Firefox выше 2.0, Возвращаем a и b в inline */
.columns a, .columns b, x:-moz-any-link, x:default { display: inline; }
.columns li, .columns a, .columns b { vertical-align: top; }

/* customize */
.columns li { margin: 0 0 1px 0; width: 175px; }
.columns a {text-decoration:none; display:block; padding:2px 0 5px 20px;}
.columns a:hover {background:#f1eff9;}
.columns .bg {background:#e2def5; font-weight:bold;}
.columns .bg a:hover {background:#e2def5; font-weight:bold;}
.columns ul { width: 100%; }

</style>
</head>

<body>
<ul class="columns">
	<li class="bg"><a href="#">Продукты&nbsp;питания</a></li>
	<li class="bg"><a href="#">Организация&nbsp;мероприятий</a></li>
	<li class="bg"><a href="#">Заказ&nbsp;автомобилей</a></li>
	<li class="bg"><a href="#">Прочее</a></li>
	<li><a href="#">Супермаркеты</a></li>
	<li><a href="#">Звезды</a></li>
	<li><a href="#">Такси</a></li>
	<li><a href="#">Клининг</a></li>
	<li><a href="#">Доставка</a></li>
	<li><a href="#">Диджеи</a></li>
	<li><a href="#">Аренда</a></li>
	<li><a href="#">Курьерские&nbsp;услуги</a></li>
	<li><a href="#">Другие</a></li>
	<li><a href="#">Фейерверки</a></li>
	<li><a href="#">VIP&nbsp;Авто</a></li>
	<li><a href="#">Пошив&nbsp;одежды&nbsp;и&nbsp;обуви</a></li>
	<li>&nbsp;</li>
	<li><a href="#">Шоу&nbsp;программы</a></li>
	<li><a href="#">Другое</a></li>
	<li><a href="#">Прокат&nbsp;костюмов</a></li>
	<li>&nbsp;</li>
	<li><a href="#">Организаторы</a></li>
	<li>&nbsp;</li>
	<li><a href="#">Химчистки</a></li>
	<li>&nbsp;</li>
	<li><a href="#">Другое</a></li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
</ul>
</body>
</html>

Кстати, может кому пригодится такая реализация меню.

Список, разбитый на колонки

g_man

Новичок

trueW3C

Поклонник Yii

g_man

Новичок

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей