Верстка необычного ul

[gibigate]

Основная проблема графика

Для начала хотел сделать с jquery, но может кто сталкивался и находил более легкое решение такой верстки. Желательно конечно чтобы было в одном ul

Или дайте направление куда копать и как выгоднее сделать

Edited July 6, 2011 by gibigate

[Pumych]

А может использовать таблицу и повесить background-image крестиками?

[psywalker]

gibigate, Смотри, тут тебе помогут display: inline-block; Это насчёт пунктов самих. А уголки уже повесишь отдельно на каждый пункт в нужные углы. Причём если сделать это грамотно, то и классы никакие не понадобятся.

[SelenIT]

Вот вроде нечто подобное: http://chikuyonok.ru/2011/04/inline-vertical-align/

Но для раздачи фонов "колонкам", имхо, всё-таки понадобятся два-три класса (либо :nth-child и изящная деградация в старых IE)...

[psywalker]

SelenIT,

Дружище, а объясни плиз с точки зрения спеки, да и вообще, почему благодаря этому спану <span class="item"> внутренние элементы растягиваются на нужную высоту?

Стили спана:

.item {
    display: inline;
}

[SelenIT]

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

[gibigate]

как я и написал выше проблема с графикой, выравнивание сделал

<ul>
   <li>*12</li>
</ul>

сейчас код самый простой,

линий графика 1 пиксель в ширину, так что поделить её нельзя, или делать с absolute position? и каждый 3 li без картинки

[psywalker]

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

Спасибо Илюх!

[gibigate]

http://gibigate.ru/portfolio/2011/technomak/catalog.html

сделал стандартным способом, но мне не нравиться.

задал бекграунд li и падингом поправил, для каждого элемента делющегося на 3 (3,6,9) поставил класс last

[SelenIT]

задал бекграунд li и падингом поправил

Остроумная находка, мне нравится!