15 февраля 2008 в 19:28
Здраствуйте, мне необходимо было сделать подрисуночную подпись которая располагалась бы справа или слева от рисунка. Я воспользовался советом на сайте htmlbook. И вставил следующий код в файл style.css своей темы (немного изменённая тема Garland):
.picFloatLeft {
color: Black; /* Цвет подписи */
padding: 10px; /* Поля вокруг содержимого */
width: auto; /* Ширина блока */
margin: 2% 2% 1% 2%;
text-align: justify;
}
.picFloatLeft img {
float: left; /* Обтекание по правому краю */
margin-right: 15px; /* Расстояние между рисунком и текстом */
}
.picFloatLeft p {
margin: 0px; /* Убираем отступы вокруг абзаца */
padding-top: 10px; /* Поле сверху */
}
.picFloatLeft div {
clear: left; /* Отменяем обтекание */
}
color: Black; /* Цвет подписи */
padding: 10px; /* Поля вокруг содержимого */
width: auto; /* Ширина блока */
margin: 2% 2% 1% 2%;
text-align: justify;
}
.picFloatLeft img {
float: left; /* Обтекание по правому краю */
margin-right: 15px; /* Расстояние между рисунком и текстом */
}
.picFloatLeft p {
margin: 0px; /* Убираем отступы вокруг абзаца */
padding-top: 10px; /* Поле сверху */
}
.picFloatLeft div {
clear: left; /* Отменяем обтекание */
}
Код рисунка следующий:
<div class="picFloatLeft">
<img src="/files/u1/image048.gif" width="293" height="176" alt=""/></p>
<p>N+1-ая молекула (лишняя) взаимодействует с активатором и он теряет способность активировать посадку РНК-полимеразы на промотор.</p>
<div></div>
</div>
<img src="/files/u1/image048.gif" width="293" height="176" alt=""/></p>
<p>N+1-ая молекула (лишняя) взаимодействует с активатором и он теряет способность активировать посадку РНК-полимеразы на промотор.</p>
<div></div>
</div>
В итоге в Opera 9.23 я получил что и требовал (смотри вложение 2)
В IE опять какой то косяк, такое чувство что он не так как я понимает свойство float - помогите пожалуйста! (вложение 1)
upd: миль пардон, хотел на форум написать, а написал в дневник
| Вложение | Размер |
|---|---|
 Internet Explorer.jpg | 428.95 КБ |
| Opera.jpg | 388.12 КБ |
Комментарии
Кажись експлореру бордер нужен (в оригинальном примере он есть).
Во второй строке нафиг закрывающий параграф.
И почему бы в класс picFloatLeft не добавить clear: left;?
Бордер - это элемент оформления и никак не повлиял.
Закрывающийся параграф делал фильтр кода Дрюпала. Если убрать перенос, он исчезает.
По третьему пункту - не помогает...
Похоже сам допёр: вместе width: auto; надо поставить width: 900px;
Тогда начинают понимать все браузеры...