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

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

Форум программистов > Вёрстка веб-сайтов > Сочетание в одном <div> текст и список

Автор: Qwesa 14.2.2010, 01:07

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

Код


<div id="content"><h2 class="if">Текст</h2>
        <ul class="os1">
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
                </ul><h2 class="if">Текст2</h2>
        <ul class="os1">
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
                </ul><h2 class="if">Текст3</h2>
        <ul class="os1">
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
         <li><a href="#">пунктов</a></li>
                </ul>

Код


#content
{ width: 600px; height: 100%; margin: 0; float: left; }

.os1 li
{ text-align: left; float: left; width: 90px; height: 10px;
  padding: 3px 20px 3px 20px; margin: 5px; }

h2.if
{margin: 20px; text-align: center;}

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

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

Автор: SelenIT 14.2.2010, 01:40

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

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

Автор: Qwesa 14.2.2010, 14:12

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

Код


#content
{ width: 600px; height: 100%; margin: 0; float: left; }
.os1 li
{ text-align: left; float: left; width: 90px; height: 10px;
  padding: 3px 20px 3px 20px; margin: 5px; }
h2.if
{margin: 20px; text-align: center; clear:both}

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

Автор: Alex103 19.2.2010, 01:42

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

Код


#content{ 
    width: 800px; 
    height: 100%; 
    float: left;
}
.os1{
    float:left;
    width:100%;
}
.os1 li{
    text-align: left; 
    float: left; 
    width: 90px; 
    padding: 3px 20px 3px 20px; 
    margin: 5px; 

}

h2.if{
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    text-align: center;
    float:left;
    width:100%;

}

Автор: Qwesa 24.2.2010, 00:04

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

Автор: vened 3.3.2010, 00:57

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

Код


.os1{display: inline-block}

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

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

Код


.os1:after{content: '.';display: block;clear:both;visibility: hidden;height:0;font-size:0;}

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

Код


.os1{zoom:1}

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

Автор: Violator 3.3.2010, 04:27

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

Код


.osl {
...
font-size: 0;
letter-spacing: -1px;
...
}
.osl li {
...
font-size: 12px;
letter-spacing: normal;
...
}

PS а что касается ксс, то лучше записывать код столбиком, удобнее читать, а для оптимизации существует http://csstidy.sourceforge.net/