Оглавление

Как расположить логотип сайта слева, а слоган – справа

Если вы когда-нибудь верстали макет страницы с помощью таблиц, то вам хорошо известно, насколько просто достичь изображенного на рис. 9.10 эффекта. Достаточно выровнять содержимое левой ячейки таблицы, состоящей из двух колонок, по левому краю, а правой – по правому. К счастью, того же результата можно добиться и с помощью CSS.

 

Расположение логотипа слева, а слогана – справа с помощью CSS

Рис. 9.10. Расположение логотипа слева, а слогана – справа с помощью CSS

 

Решение
Для позиционирования элементов указанным образом можно воспользоваться свойством float:

 

slogan-align.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Логотим и слоган</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="slogan-align.css" />
</head>
 <body>
   <div id="header">
      <img src="img/logo.png" width="300" height="42" alt="XOOPS.ws" class="logo" />
      <span class="slogan">Поддержка XOOPS</span>
   </div>
 </body>
</html>

 


 slogan-align.css

body {
margin: 0;
padding: 0;
background-color: #000000;
color: #2B4EFF;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid # 2B4EFF ;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .slogan {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #2B4EFF;
background-color: transparent;
float: right;
width: 200px;
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-код, управляющий расположением слогана:

 <div id="header">
   <img src="img/logo.png" width="300" height="42" alt="XOOPS.ws" class="logo" />
   <span class="slogan">Поддержка XOOPS</span>
 </div>

С помощью свойства float можно разместить элементы класса logo слева, а элементы класса slogan – справа. Кроме того, я добавила правило для выравнивания текста слогана вправо, без которого он прижимался бы к левому краю содержащего его элемента span, который выровнен вправо! Результат проведенных действий показан на рис. 9.12.

 

Применение свойства float для позиционирования элементов

Рис. 9.12. Применение свойства float для позиционирования элементов

 

Для создания дополнительного пустого пространства вокруг элементов добавим к логотипу внешний отступ сверху и слева, а к слогану – сверху и справа:

#header .slogan {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
width: 200px;
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.

 

При указании свойства float для дочерних элементов «шапки» она полностью сворачивается

Рис. 9.13. При указании свойства float для дочерних элементов «шапки» она полностью сворачивается

 

Для большей наглядности я добавила к контейнеру логотипа и слогана рамку. На рис. 9.14. показан вид контейнера до присваивания дочерним элементам свойства float.

 

Размер «шапки» до присваивания дочерним элементам свойства float

Рис. 9.14. Размер «шапки» до присваивания дочерним элементам свойства float

 

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

 

Во избежание такой ситуации можно задать высоту блока с помощью свойства height:

#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}


Теперь блок занимает отведенную ему область страницы, как показано на рис. 9.15.

 

После задания свойства height для div c «шапкой» страница отображается совершенно нормально

Рис. 9.15. После задания свойства height для div c «шапкой» страница отображается совершенно нормально

 
При выборе значения свойства height в такой ситуации следует учитывать возможные изменения в документе при увеличении размера шрифта пользователем. В качестве единиц измерения при этом лучше всего использовать em, поскольку при этом высота элемента будет увеличиваться в соответствии с размером текста, и он по-прежнему сможет вместить его, не «выталкивая» плавающие элементы.

 

Если бы объем текста в данном контейнере был неизвестен, то следовало бы воспользоваться свойством clear, о котором мы говорили чуть ранее.

4
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити