<h1?<span c1ass="date">Nov. 10: 2006</span> CosmoFarmer Bought Ву Goog1e</hl>
Теперь стоит вопрос о создании стилей. Во-первых, вы должны задать содержащему
элементу (здесь- тегу <h1>) значение relative (относительное позиционирование).
Затем применяте абсолютное позиционирование (значение abso 1 ute) для
Элемента, который желаете разместить, -даты. Здесь приведен СSS-код для нижнего
изображения в первом примере на рис. 13.8 ( 1):
h1 {
}
position: re1ative:
width: 100%:
border-bottom: 1рх dashed #999999:
h1 span.date {
position: absolute:
Ьottom: 0:
right: 0:
font-size: .5em:
background-co1or: #Е9Е9Е9:
со 1 о г: Ь1 ack :
padding: 2рх 7рх О 7рх:
Глава 13. Позиционирование элементов на веб-странице
~~У-~ . 10, 2006 C~~m.oFarm.er .. B()IJ8.~~ Ву G~lf! .... ...
CosmoFarmer CeleЬrates 6 Years о
CosmoFarmer Celebrates 6 Years
The dreaded dandellon
Рис. 1 ~.8. Абсолютное nозиционирование nрекрасно nодходит для nростых элементов дизайна,
Наnример для размещения даты в нижнем nравом углу заголовка (7), выдавливания
Изображения из содержащего его блока (2) или размещения заголовка nоверх
Фотографии (3)
Некоторые из пр иведенных выше свойств, например border-bottom, представлены
просто для наглядности. Ключевые свойства выделены полужирным шрифтом:
Pos i t i on, bottom и ri ght. Как только вы задаете заголовку относительное позицИонирование,
вы можете поместить тег <span>, содержащий дату, в нижний правый
