Интерблог

Архив за Июль 2009-го

Кроссбраузерный обтекающий список
Автор: Ognezmej. Опубликовано: 06 Июля 2009

Всем хороши списки.

Кроме одного - попробуйте разместить список в тексте, который обтекает картинку справа. В смысле текст со списком справа, картинка слева. Не спрашивайте у меня, куда уползли буллеты, спросите у Бога, как говорят обычно в таких случаях американские проповедники. Много пришлось перерыть информации, прежде чем что-то начало вырисовываться. Итак, в предлагаемом способе мы отказываемся от стандартных буллетов и заменяем их картинками. Возможно, с буллетами тоже что-то получится - пока не пробовал.

Собственно, вот такие стили работают. В эксплорере (6 и 7), мозилле и опере. В заголовке документа - XHTML 1.0 Strict. Валидолом не проверялось, стояла цель - адекватное отображение.

ul {zoom: 1; overflow: hidden; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}

li {list-style: none; background: url(img/sector/ico.gif) no-repeat left 5px; padding: 0px 0px 0px 16px; margin: 0px 0px 0px 10px;}

Разумеется, адрес картинки и цифры, которые не 0, взяты из конкретного примера, вы можете туда любые свои добавлять. Здесь важны горизонтальные значения. Соответственно, вертикальные значения маржинов и паддингов можете писать, какие в голову взбредут.

Итак, если интересно поподробнее:
zoom: 1; overflow: hidden; - предназначены для того, чтобы буллеты не уплывали под картинку в фаерфоксе
margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; горизонтальные маржины и паддинги для ul лучше оставлять нулевые. Впрочем, можете поэкспериментировать - мне не понравилось
background: url(img/sector/ico.gif) no-repeat left 5px; - здесь всё понятно - эта хрень заменяет буллет. Вместо 5px вам нужно будет поставить вертикальную позицию этого как-бы-буллета. В среднем - половина высоты шрифта.
padding: 0px 0px 0px 16px; - здесь 16px - это отступ текста элемента списка ОТ ЛЕВОГО КРАЯ картинки-буллета. Соответственно, равен отступу текста от буллета плюс ширина буллета.
margin: 0px 0px 0px 10px; - здесь 10px - это отступ всего элемента списка от левого края.

Да, данные стили работают и с обычными списками в отсутствие обтекания.

 

Метки: XHTML, Кодинг

Популярные записи

Принцип неопределённости в РНР

Принцип неопределённости в MYSQL

Недолёт

А ещё AJAX нужен для...

Принцип неопределённости в PHP - праздник продолжается!

Эмуляция плавности в ActionScript.

Программная анимация в ActionScript

Анимация при наведении в ActionScript

Использование кодировки UTF-8

Буквицца

Архив записей  

2019

Янв  

2018

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2017

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2016

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2015

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2014

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2013

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2012

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2011

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2010

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2009

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек