7. Отредактируйте стиль, который вы только что создали, следующим образом:
#main .figure р {
position: absolute:
width: 168рх :
left: lOpx :
bottom: lOpx:
background-color: #FFF:
Ьorder: lpx dashed 16666бб:
font-size: 13рх:
font-weight: Ьold:
text-align: center:
padct; ng: Spx:
~~argin: 0:
Вы должны уделить особое внимание одной маленькой детали. Вы моrли бы
Никогда этого не заметить, но некоторые браузеры помещают надпись всеrо на
Несколько пикселов ниже, чем другие браузеры (чтобы убедиться в этом, проверьте
Страницу в Internet Explorer, а затем в Firefox). Браузеры размещают
Встроенные элементы (например, изображения) по-разному относительно других
Объектов вокруг (вы можете увидеть подобную проблему с изображениями
в примерах из разд. •Создание стилей для таблиц• гл. 10). Во всяком случае,
Решить эту проблему леrко: используя CSS, заставьте рисунок отображаться
Как элемент блочной модели.
8. Добавьте еще один стиль к внутренней таблице стилей:
#main . . figure img
display: Ьlock :
Предварительно просмотрите страницу. Надпись должна бьrrь центрированной
В нижней части изображения, как покаэано на рис. 13.16.
Р1к. 1 1.16. Только абс<Sл10П4ое по:~иционирование nо3воnяет вам накладывать один элемент
Nоверх другого, как. наnример, надnись на этой фотографии
Обучающий урок: п~ционирование элеменrов страницы 411
