Учимся верстать — Часть 3: Горизонтальное меню и шапка

Пост добавлен 09 июля 2009 года в категорию «Архив».

Учимся верстать — Часть 1: Каркас
Учимся верстать — Часть 2: Верх
Учимся верстать — Часть 3: Горизонтальное меню и шапка
Учимся верстать — Часть 4: Левый блок
Учимся верстать — Часть 5: Контент

Ну вот и пришло время третьей части уроков верстки в которой мы продолжим верстать наш шаблон (подробнее читайте первую часть). В этот раз сделаем горизонтальное меню и шапку.

Опять же сначала зададим размер и фон для горизонтального меню. Так как фон градиентный мы вырежем полоску градиента и будем ее растягивать по горизонтали. Высота будет 32 пикселя, назовем мы ее «hmenu_bg.png». Кроме того пока что мы уберем все отступы, дабы не увеличивался размер блока, позже мы их пересчитаем и добавим по-новой.

Code

#h_menu {height: 32px; background: url('./img/hmenu_bg.png') repeat-x;}

Сделали. Меню, как вы уже, наверное, догадались будем делать при помощи списка.

Code

<div id="h_menu">
<ul>
<li><a href="#">mayor’s office</a></li>
<li><a href="#">city agencies</a></li>
<li><a href="#">services</a></li>
<li><a href="#">news and features</a></li>
<li><a href="#">city life</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">search</a></li>
</ul>
</div>

В макете нестандартный шрифт, который вряд ли будет отображаться у многих пользователей, поэтому используем Arial, добавим отступы и сделаем горизонтальный вывод. Так же не забудем к id «h_menu» добавить overflow: hidden; дабы не схлопывался блок.

Code

#h_menu {height: 32px; background: url('./img/hmenu_bg.png') repeat-x; overflow: hidden;}
#h_menu ul {list-style: none;}
#h_menu li {float: left; padding: 5px 6px 0px 6px;}
#h_menu a {font: small-caps 15px 'Arial',sans; color: #fff; text-decoration: none;}
#h_menu a:hover {text-decoration: underline;}

Теперь нам осталось только добавить разделители. Сделаем мы их при помощи фоновой картинки для тега LI. Растягиваться она будет по правому краю. Картинка будет растягиваться по вертикали ширина 2 пикселя. Назовем ее «hmenu_line.png». Кроме того мы добавим 2 пикселя в правый отступ, дабы сохранить визуальные размеры отступов.

Code

#h_menu li {float: left; padding: 5px 8px 0px 6px; background: url('./img/hmenu_line.png') repeat-y right;}

О боже! Разделитель не достает до низа горизонтального меню! Происходит это потому что высота LI меньше высоты горизонтального меню. Чтобы исправить этот косяк просто зададим такую же высоту LI, но только вычтем из нее 5 пикселей, дабы текст не ушел ниже.

Code

#h_menu li {float: left; padding: 5px 8px 0px 6px; background: url('./img/hmenu_line.png') repeat-y right; height: 27px;}

Шикарно! Меню на месте. Теперь перейдем к шапке. В принципе фон и размер шапки мы уже сделали в первом уроке. Сейчас нам нужно только сделать логотип кликабельным. Делается это просто. Берется прозрачная картинка размером пиксель на пиксель («blank.png») и делается ссылкой. При этом размеры картинки в теге IMG мы указываем такие же, как размер лого. А после при помощи позиционирования подгоняем эту ссылку ровно под лого.

Code

Code

#header {width: 780px; height: 117px; background: url('./img/header.png') no-repeat;}
.logo {width: 205px; height: 44px; position: relative; top: 32px; left: 17px;}

Готово. Сайт по-малу начинает приобретать нужный вид, что очень радует. Ну да ладно. В следующей части мы будем оформлять левый блок. А сейчас вопрос-ответ-обсуждение.

сейчас пост прокомментировали 9 раз и прочитали 3406 раз

Авторизация

Тестирование различных CMS

Shugich.com

Учимся верстать — Часть 3: Горизонтальное меню и шапка