Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

Семантическая верстка — советы и решения. Часть VI. Запрет на обтекание float’ов

26 августа 2008 · Комментариев: 9 · HTML/CSS, Рецептарий

На данном примере мы рассмотрим, как реализовать запрет на обтекание определенного элемента, к которому применено правило float. Нашей задачей является создание анонса новости. Макет выглядит следующим образом:

image010.gif

Поскольку мы уже сошлись на отказе от таблиц в пользу семантики, нам потребуется минимум html-кода:

<div class="announce">
    <img src="pic.gif" alt="" />
    <h2><a href="#">Россияне помогли</a></h2>
    <p>Полиция турецкого города Измир сообщила об аресте 17 участников группировки, занимавшейся мошенничеством и рассылкой вирусов в Сети.
     Арест произошел после того, как местные полицейские выяснили, что трое русских хакеров отправили в общей сложности миллион писем с
     вирусами и получили доступ к банковским счетам многих жителей Турции.</p>
</div>

Зададим картинке float, чтобы прижать ее налево и соответствующие макету поля:

.announce img {
    float:left;
    margin:0 10px 10px 0;
    }

К сожалению, текст обтекает картинку, а это совсем не то, что нам требуется по условию задачи. Чтобы запретить обтекание применим дополнительные стили к тексту:
style.css:

.announce p {
    overflow:hidden;
    }

ie.css:

.announce p {
    zoom:1; /* Для IE 7 */
   }
   * HTML .announce p {
        height:1%; /* Для IE 5,6 */
        }

Voila!

Внимательный читатель безусловно заметит, что для реализации задачи мы воспользовались правилами, указывающими Explorer’у на hasLayout. Таким образов еще раз показав их полезность.

Материалы для изучения:

Комментариев: 9 ↓

Оставить комментарий