Как расположить логотип сайта слева, а слоган – справа
Если вы когда-нибудь верстали макет страницы с помощью таблиц, то вам хорошо известно, насколько просто достичь изображенного на рис. 9.10 эффекта. Достаточно выровнять содержимое левой ячейки та- блицы, состоящей из двух колонок, по левому краю, а правой – по пра- вому. К счастью, того же результата можно добиться и с помощью CSS.
Рис. 9.10. Расположение логотипа слева, а слогана – справа с помощью CSS
Решение
Для позиционирования элементов указанным образом можно восполь- зоваться свойством float:
chapter09/slogan-align.html (фрагмент)
?
<body>
<div id=”header”>
<img src=”stage-logo.gif” width=”187” height=”29”
alt=”Stage & Screen” class=”logo” />
<span class=”slogan”>theatre and film reviews</span>
</div>
</body>
?
chapter09/slogan-align.css
body { margin: 0; padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .slogan {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right; width: 300px; margin-right: 2em; margin-top: 0.5em;
}
#header .logo { float: left; width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}
Обсуждение
С помощью свойства float можно выравнивать элементы «шапки» по любой стороне. Перед добавлением данного свойства элементы будут отображаться рядом друг с другом, как показано на рис. 9.11.
Такое позиционирование элементов обусловлено HTML-разметкой, в которой не содержится никаких указаний относительно их располо- жения. Именно поэтому они просто следуют друг за другом.
Рис. 9.11. Расположение элементов по умолчанию
Рассмотрим HTML-код, управляющий расположением слогана:
chapter09/slogan-align.html (фрагмент)
<div id=”header”>
<img src=”stage-logo.gif” width=”187” height=”29”
alt=”Stage & Screen” class=”logo” />
<span class=”slogan”>theatre and film reviews<span>
</div>
С помощью свойства float можно разместить элементы класса logo сле- ва, а элементы класса slogan – справа. Кроме того, я добавила правило для выравнивания текста слогана вправо, без которого он прижимал- ся бы к левому краю содержащего его элемента span, который выровнен вправо! Результат проведенных действий показан на рис. 9.12.
Рис. 9.12. Применение свойства float для позиционирования элементов
Для создания дополнительного пустого пространства вокруг элемен- тов добавим к логотипу внешний отступ сверху и слева, а к слогану – сверху и справа:
chapter09/slogan-align.css (фрагмент)
#header .slogan {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
width: 300px;
text-align: right; margin-right: 2em; margin-top: 0.5em;
}
#header .logo { float: left; width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}
При использовании такого подхода следует учесть следующее: если вы делаете все элементы в контейнере плавающими, то ничто не заставля- ет контейнер оставаться открытым, и его высота уменьшается до нуля, как показано на рис. 9.13.
Рис. 9.13. При указании свойства float для дочерних элементов «шапки»
она полностью сворачивается
Для большей наглядности я добавила к контейнеру логотипа и слога- на рамку. На рис. 9.14. показан вид контейнера до присваивания дочер- ним элементам свойства float.
Рис. 9.14. Размер «шапки» до присваивания дочерним элементам свойства float
После присваивания дочерним элементам свойства float высота кон- тейнера уменьшается до нуля, поскольку теперь они удалены из общего потока элементов в документе, в результате чего рамка контейнера пре- вратилась в сплошную красную линию, как видно на рис. 9.13.
Во избежание такой ситуации можно задать высоту блока с помощью свойства height:
chapter09/slogan-align.css (фрагмент)
#header {
border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em;
}
Теперь блок занимает отведенную ему область страницы, как показано на рис. 9.15.
Рис. 9.15. После задания свойства height для div c «шапкой» страница отображается совершенно нормально
При выборе значения свойства height в такой ситуации следует учиты- вать возможные изменения в документе при увеличении размера шриф- та пользователем. В качестве единиц измерения при этом лучше всего использовать em, поскольку при этом высота элемента будет увеличи- ваться в соответствии с размером текста, и он по-прежнему сможет вме- стить его, не «выталкивая» плавающие элементы.
Если бы объем текста в данном контейнере был неизвестен, то следовало бы воспользоваться свойством clear, о котором мы говорили чуть ранее.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)
- Создание галереи миниатюр (0)