megafon4u.ru

В этой статье хочу рассмотреть один из самых актуальных вопросов - создание разметки на безтабличной основе и предложить несколько своих вариантов решений.
Самая распространенная задача в этом аспекте, это организация структуры, подобной этой.
Здесь мы сталкиваемся со следующими трудностями:
Первая- это визуальное представление информации в чётко определённых направлениях- колонках и строках.
Вторая- это реализация разметки полностью валидным кодом.
Третья- это решение этой проблемы кодом, наиболее оптимальным для интеграции его в cms.
Четвёртая- это корректное, однообразное отображение разметки во всех основных браузерах, в том числе и в IE6.
Сначала HTML того, что мы хотим увидеть:

<div class="content">
   <img src="photo1.jpg" />
   <p>Здесь текст</p>
   <img src="photo2.jpg" />
   <p>Здесь текст</p>
  <!-- далее итерация img и p необходимое количество раз -->
 </div>

Через CSS наделяем разметку свойствами:

.content {width: 800px;margin-left: auto;margin-right: auto;}
p {float: left;width: 265px;margin-bottom: 20px;margin-top: 0;padding-right: 10px;}
img {float: left;padding-right: 10px;margin-bottom: 20px;}

Теперь решаем проблему, построчного выравнивания контента. Результата можно добиться интеграцией блока- проставки, свойства которого обеспечат безболезненное разделение строк.

.prostavka {clear: both;height: 1px;}

или

.prostavka {float:left;height: 1px;width:100%;}

Конечный HTML:

<div class="content">
   <img src="photo1.jpg" />
   <p>Здесь текст</p>
   <img src="photo2.jpg" />
   <p>Здесь текст</p>
   <div class="prostavka"></div>
<!-- далее итерация img, p и prostavka необходимое количество раз -->
 </div>

Конечный CSS:

.content {width: 800px;margin-left: auto;margin-right: auto;}
p {float: left;width: 265px;margin-bottom: 20px;margin-top: 0;padding-right: 10px;}
img {float: left;padding-right: 10px;margin-bottom: 20px;}
.prostavka {clear: both;height: 1px;}

Теперь реализуем такую же разметку, но уже для варианта, когда content имеет ширину в процентах, например 100%.
Проблема состоит в том, что если задать ширину абзацев в процентах, например для двухколоночного варианта width: 50%;,при применении HTML предыдущего варианта, произойдёт следующее.
Каждый абзац, которому не будет хватать места, будет искать его с новой строки. Это абсолютно закономерное поведение, согласно спецификации. Для решения этой проблемы введём ещё один элемент jacheika. и немного преобразуем первоначальный HTML и CSS:

HTML:

<div class="content">
 <div class="jacheika">
   <img src="photo1.jpg" />
   <p>Здесь текст</p>
 </div>
 <div class="jacheika">
   <img src="photo2.jpg" />
   <p>Здесь текст</p>
 </div>
 <div class="prostavka"></div>
<!-- далее итерация img, p, jacheika и prostavka необходимое количество раз -->
 </div>

CSS:

.content {width: 100%;}
.jacheika {float: left;width: 49.9%}
img {float: left;padding-right: 8px;}
.prostavka {float:left;height: 1px;width:100%;}
p { margin:0; padding-left:110px}

Результат смотрите здесь..
Почему:

.jacheika {width: 49.9%}

а не:

.jacheika {width: 50%}

Потому, что IE6 выполняет неправильное вычисление размеров окна браузера в процентах и для него результат будет выглядеть так.
Поэтому следует несколько уменьшить размер блока. Достаточно на 0.1%
Реализовать разметку можно и несколько по-другому, без использования блока .prostavka. Преимущество- отсутствие тегов, которые засоряют код.
Вот HTML:

<div class="content">
 <div class="content_in">
  <div class="jacheika">
   <img src="photo1.jpg" />
   <p>Здесь текст</p>
  </div>
  <div class="jacheika">
   <img src="photo2.jpg" />
   <p>Здесь текст</p>
  </div></div>
<!-- далее итерация img, p, jacheika и content_in необходимое количество раз -->
 </div>

CSS:

.content {width: 100%;}
.jacheika {float: left;width: 49.9%}
img {float: left;padding-right: 8px;}
.content_in {clear: both;width: 100%;}
p { margin:0; padding-left:110px}

результат можно увидеть здесь.