VPF::Сверстать список в несколько столбцов

Melo

Дата 16.7.2009, 12:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 11.3.2009

Репутация: нет
Всего: нет

есть список

Код

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Глоссарий</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Опросы</a></li>
</ul>

его надо сверстать вот так как на картинке.

и недавно даже видел статью как это сделать, но сейчас не могу найти, может кто подскажет как сделать или статью.

NDenis

Дата 16.7.2009, 13:47 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

Первый вариант использовать несколько списков с float:left
Второй вариант с использованием JS

bazzjr

Дата 17.7.2009, 10:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Вот что тебе нужно:

Код


<ul>
  <div style="float:left; margin:0 20px 0 0">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Статьи</a></li>
  </div>
  <div style="float:left; margin:0 20px 0 0">
  <li><a href="#">Глоссарий</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Опросы</a></li>
</div>
</ul>

Это сообщение отредактировал(а) bazzjr - 17.7.2009, 10:17

NDenis

Дата 17.7.2009, 10:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

bazzjr, теже уши, что предложил я, только кривее.

bazzjr

Дата 17.7.2009, 13:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

SelenIT

Дата 19.7.2009, 23:39 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

bazzjr, за такое канделя валидатором по рукам надо. Какой к черту <div> в <ul>?

HTML - не пластилин, у него есть правила. Если их игнорить, рано или поздно за это придется расплачиваться. Для себя (ради быстроты и лени) иногда можно пойти на компромисс с валидатором и совестью, но советовать другому явное извращение...

Это сообщение отредактировал(а) SelenIT - 19.7.2009, 23:39

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

bazzjr

Дата 20.7.2009, 14:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

SelenIT небыло речи о валидности, да и вопрос подразумевает не "валидный" подход к реализации... smile

NDenis

Дата 20.7.2009, 14:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

bazzjr, вариант с двумя списками ul/li является абсолютно валидным. Вариант с JS тоже валиден. Пример показать не могу, JS плохо знаю.

skyboy

Дата 22.7.2009, 10:37 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

а почему бы не сделать один список, и чтоб браузер сам сделал переносы элементов?

Код


<style type="text/css">
ul {
width: 200px;
}
ul li {
float: left;
width: 100px;
list-style-image: url(defix.png);
}
</style>
<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Глоссарий</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Опросы</a></li>
</ul>

NDenis

Дата 22.7.2009, 12:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

skyboy, порядок элементов нарушится.

skyboy

Дата 22.7.2009, 13:24 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

Цитата(NDenis @ 22.7.2009, 11:08

)

skyboy, порядок элементов нарушится.

это единственная проблема?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »