haltavmc Junior Member Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору Здравствуйте. Подскажите, пожалуйста, в какую сторону гуглить или ткните носом в ссылку по вот какому вопросу. Для начала скриншот:   Это порты свича. На скриншоте "верхние" порты отрисованы с помощью DIV'ов А "нижние" - это список: Код: <ul>      <li class="even">      <img src="port.jpg"><br>      1      </li>        <li class="odd">      <img src="port.jpg"><br>      2      </li>      .... </ul>     Вопрос, собственно, заключается в следующем: какие стили применить к "нижнему" списку, что бы он выглядел как "верхние" DIV'ы? Может быть есть jQuery плагин, который может подобное сотворить? Может необходимо еще как-то дополнить/изменить разметку списка? В общем приветствуются любые рекомендации. Всего записей: 163 | Зарегистр. 21-07-2008 | Отправлено: 17:07 06-06-2013

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Как разместить элементы списка горизонтально. Всего записей: 38546 | Зарегистр. 29-08-2002 | Отправлено: 17:32 06-06-2013

haltavmc Junior Member Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору Так мне же не просто "горизонтально", а в два ряда. Причем, в верхнем ряду должны оказаться нечетные, а в нижнем четные порты. Так то я и "флоат:лефт" могу сделать. Это понятно. Мне же нужно не просто в один ряд.   Можно, конечно, и два списка сделать - для каждого ряда. Но может, всё-таки, есть способ сделать так как нужно с одним списком? Всего записей: 163 | Зарегистр. 21-07-2008 | Отправлено: 18:43 06-06-2013 | Исправлено: haltavmc, 18:51 06-06-2013

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору haltavmc Цитата: Но может, всё-таки, есть способ сделать так как нужно с одним списком? Попробуйте каждый четный смещать вниз на расстояние большее, чем высота картинки. Всего записей: 38546 | Зарегистр. 29-08-2002 | Отправлено: 19:11 06-06-2013

haltavmc Junior Member Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору Цитата:  Попробуйте каждый четный смещать вниз на расстояние большее, чем высота картинки. Попробовал, менял top. Если больше вообще ничего не добавлять - ничего не меняется. Поставил position:relative - просто сместились вниз, получились как бы в шахматном порядке. Добавил отрицательное левое смещение: получилось "почти то, что нужно". "Почти" потому, что: 1) расстояния между соседними портами (т.е. 1-3-5... или 2-4-6...) не изменилось и равно ширине картинки (в моем случае). 2) в следствие п.1 "порты" не влезают по ширине и сползают на следующую строчку и вся картинка херится к чертям   В общем, как мне кажется, данный способ либо вообще не вариант, либо нужно еще как-то допилить. Вопрос только в том как именно? Всего записей: 163 | Зарегистр. 21-07-2008 | Отправлено: 20:11 06-06-2013 | Исправлено: haltavmc, 20:12 06-06-2013

Cheery .:МордератоР:. Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору haltavmc Цитата: Но может, всё-таки, есть способ сделать так как нужно с одним списком? Цитата: Причем, в верхнем ряду должны оказаться нечетные, а в нижнем четные порты.   Так то я и "флоат:лефт" могу сделать. Это понятно. Мне же нужно не просто в один ряд.   ну так сделайте список из двух строк.. в верхнем заполняете дивами с нечетными номерами, нижний - четными. иначе вам нужно будет подсчитать ширину для списка и задать ее явно, тогда и float: left автоматом перенесет куда надо http://jsfiddle.net/AwUSX/ ---------- Away/DND Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 01:27 17-06-2013

ManHunter Silver Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору А в одном LI размещать две картинки одну под другой - не вариант? ---------- "На любое мое движение ваша реакция предусмотрена, В лучшем случае - равнодушие, в худшем случае - патология..." (C) Егор Летов Всего записей: 3091 | Зарегистр. 20-03-2004 | Отправлено: 10:39 17-06-2013

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » CSS + UL LI

Переход по форумам  Закладки   » Компьютеры Цифровое изображение Программы Microsoft Windows UNIX Другие OS Hardware В помощь сисадмину Прикладное программирование Игры Форумные игры   » Интернет Web-программирование В помощь вебмастеру Графика Хостинг Зацените-ка!   » Тематические Ikonboard v.2 Ikonboard v.3 Invision Board Другие форумы PHP-Nuke и другие порталы Мобила   » Общие Спорт Флейм Темы по региональным встречам Музыка и Кино Юмор Литература и Живопись   » Ru.Board Новости Помощь по форуму   » Андеграунд eBookz Варезник Раздачи и акции Мобильный варезник Андеграунд Игры и фильмы   » Специальные Тестирование