Начнем вторую часть. Сейчас мы будем верстать верхнюю часть сайта.



А это часы и меню. Сначала сделаем нормальный фон. Зададим высоту верхней части в 47 пикселей. Фон будет белого цвета, а вниз, как вы, наверное, заметили — градиент. Высота у него 19 пикселей. Дабы поберечь трафик людей мы не будем резать и растягивать всю высоту верхушки. Вырежем только градиентную полоску 1х19 пикселей (название «top_bg.png»), растянем по горизонтали и опустим вниз, а фон зададим цветом.


Code
#top {height: 47px; background: url('./img/top_bg.png') repeat-x bottom #fff;}

Ну вот, фон готов. Теперь сделаем часы. Сначала пропишем в HTML время, указанное в макете и настроим шрифт, цвет и отступы, т.к. шрифт в макете не стандартный (что не правильно), мы будем использовать другой. Я решил, что подойдет Tahoma.


Code
#watch {float: left; padding: 13px 0px 0px 18px; font: 10px 'Tahoma',sans; color: #30322e;}

Теперь нам нужно добавить пиктограмму с часами (название «watch.png», размер 15х15 пикселей). Ее мы сделаем фоном. Для этого нужно заключить время в тег P.


Code
<div id="watch"><p>March 17, 2003 - 11:49 am</p></div>

Сделали. Немного посчитаем. Отступ между пиктограммой и датой/временем 6 пикселей, сама пиктограмма шириной в 15 пикселей, итого будет 21 пиксель. Возвращаемся в CSS. Добавляем отступ и ставим пикстограмму, выравниваем по центру. Зачем нужен отступ? Попробуйте без него и увидите.


Code
#watch {float: left; padding: 13px 0px 0px 18px; font: 10px 'Tahoma',sans; color: #30322e;}
#watch p {padding-left: 21px; background: url('./img/watch.png') no-repeat left center;}

Что-то не то, пиктограммка обрезается. Посмотрел я, не влезает 3 пикселя. Исправим это при помощи паддингов.


Code
#watch {float: left; padding: 13px 0px 0px 18px; font: 10px 'Tahoma',sans; color: #30322e;}
#watch p {padding: 2px 0px 1px 21px; background: url('./img/watch.png') no-repeat left center;}

Ну вот и все. Часы готовы, теперь займемся меню. Сделаем мы его при помощи списка.


Code
<div id="top_menu">
<ul>
<li><a href="#">register</a></li>
<li><a href="#">sign in</a></li>
<li><a href="#">tour</a></li>
<li><a href="#">help</a></li>
</ul>
</div>

Теперь сделаем горизонтальное отображение и настроим цвет и оступы. Шрифт там опять же нестандартный, мы будем использовать Arial.


Code
#top_menu {float: right; padding: 7px 12px 0px 0px;}
#top_menu ul {list-style: none;}
#top_menu li {float: left; padding: 0px 6px;}
#top_menu a {font: small-caps 12px 'Arial',sans; color: #636a72; text-decoration: none;}
#top_menu a:hover {color: #000; text-decoration: underline;}

Ну вот и красота. Ан нет... Не хватает горизонтальных разделителей. Добавим, это всего лишь правая граница. Но весь высад в том, что их мы не можем добавить к LI, ведь LI у нас четыре, а разделителя только три, как мы выкрутимся? Добавим к первым трем LI класс и уже ему зададим границы.


Code
<div id="top_menu">
<ul>
<li class="top_menu_divider"><a href="#">register</a></li>
<li class="top_menu_divider"><a href="#">sign in</a></li>
<li class="top_menu_divider"><a href="#">tour</a></li>
<li><a href="#">help</a></li>
</ul>
</div>

Code
#top_menu {float: right; padding: 7px 12px 0px 0px;}
#top_menu ul {list-style: none;}
#top_menu li {float: left; padding: 0px 6px;}
#top_menu a {font: small-caps 12px 'Arial',sans; color: #636a72; text-decoration: none;}
#top_menu a:hover {color: #000; text-decoration: underline;}
.top_menu_divider {border-right: 1px solid #d0d2d4;}

Не правильно отображается... Как исправить? Высота разделителя 31 пиксель. Значит зададим LI высоту в 31 пикселей, но тогда будет текст выше чем нужно. Его мы опустим с помощью паддинга на 5 пикселей. При этом нужно вычесть из высоты LI 5 пикселей, ибо паддинг добавляет 5 пикселей к высоте.


Code
#top_menu {float: right; padding: 7px 12px 0px 0px;}
#top_menu ul {list-style: none;}
#top_menu li {float: left; padding: 5px 6px 0px 6px; height: 26px;}
#top_menu a {font: small-caps 12px 'Arial',sans; color: #636a72; text-decoration: none;}
#top_menu a:hover {color: #000; text-decoration: underline;}
.top_menu_divider {border-right: 1px solid #d0d2d4;}

Ура! Все работает как надо! Ну вот и все. Сегодня закончим на этом. В следующий раз будем делать горизонтальное меню и шапку.