Сочетание в одном диве текст и список: Есть див-коробка, в котором идут:
Текст:
список пунктов
Текст:
список пунктов
Текст:
список пунктов



так вот когда я выставляю отступы тексту, и делаю из него нормальное заглавие списку, все получается только с первой строчкой - перед первым списком. Следующие Текст2 и соответственно Текст3, имеют очень маленький верхний отступ от предшествующего им списка.

Пробовал через <span>, не вышло, и даже отделял Тексты в отдельные <div>, но результат не изменился. Я так и не смог добиться чтоб между списками и следующими за ними текстом, был нормальный отступ. Подскажите на что обратить внимание и где поправить.

Имхо, проще всего — добавить заголовкам clear:left (или clear:both, на всякий случай). Дело в том, что float-ы не влияют на высоту своего контейнера (в данном случае ul) и она оказывается нулевой, а clear должен гарантировать то, что заголовок пойдет после float-ов.

Другие варианты — отдельный контекст форматирования для .osl (проще всего -- с помощью overflow:hidden, ну и zoom:1 для IE6-7) либо вообще отказаться от float для li в пользу display: inline-block (правда, для этого придется убрать пробелы между соседними тегами </li><li>).

при добавление clear:both или лефт в CSS ничего ровным образом не меняется



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

Ваши основные проблемы:
1. Стили пишите в столбик - меньше путаницы;
2. Установите WebDeveloper или еще что-нибудь подобное для просмотра границ эл-тов;
3. height: 10px; - нарушает все Ваши padding, обратите внимание;
4. Если делается такого рода обтекание то необходимо список тоже обтекать слева или как правильно определил SelenIT - задать высоту. С другой стороны можно сделать обтекание всех элементов, это же ведь блоки.
5. margin-ы заголовка справа и слева лучше заменить padding-ами, если это необходимо, иначе будет проблемы с расчетом ширины в ИЕ.
Вот пример:



Это сообщение отредактировал(а) Alex103 - 19.2.2010, 01:44

большое спасибо, но я решил все поросто - для каждого заголовка и списка сделал свой див. так проще и понятней.

Не правильно вы решили свою проблему.
Она в действительности решается очень просто, всего навсего вам нужно сделать список инлайнблоком

и проблема решится

Есть ещё одно решение, может пригодиться в других случаях

и для любимого IE прописываем


P.S.: правильно делаете что пишите css код в строчку а не в столбик, в строчку гораздо удобнее, это с первого взгляда код кажется не удобным и не читаемым, а дело обстоит совсем наоброт, ещё бы рекомендовал записывать свойства в определённом порядке, тогда дальнейшая поддержка кода очень упрощается.
Плюс такого оформления ещё в оптимизации размера css файла, например у меня на одном проекте он весит 250kb, оформлен в строку, в столбик было бы все 300-350. Ещё пример - если css код хабра переписать в таком стиле, размер его снижается на 30-35%.

Это сообщение отредактировал(а) vened - 3.3.2010, 00:58

vened, 
впринципе в посте SelenIT и так все уже сказано, единственное что можно добавить, так это то что пробелы между соседними li не обязательно убирать, можно обнулить font-size для .osl и вернуть его для .osl li, правда хром оставит 1px разрыв, который в свою очередь можно убрать с помощью letter-spacing: -1px


PS а что касается ксс, то лучше записывать код столбиком, удобнее читать, а для оптимизации существует CSSTidy