Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Сверстать список в несколько столбцов

Автор: Melo 16.7.2009, 12:13

есть список

Код

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

его надо сверстать вот так как на картинке.
http://ipicture.ru/Gallery/Viewfull/20993318.html

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

Автор: NDenis 16.7.2009, 13:47

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

Автор: bazzjr 17.7.2009, 10:17

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

Код


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

Автор: NDenis 17.7.2009, 10:48

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

Автор: bazzjr 17.7.2009, 13:18

Автор: SelenIT 19.7.2009, 23:39

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

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

Автор: bazzjr 20.7.2009, 14:24

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

Автор: NDenis 20.7.2009, 14:41

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

Автор: skyboy 22.7.2009, 10:37

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

Код


<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

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

Автор: skyboy 22.7.2009, 13:24

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

)

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

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