верстаем не по-детски

БОРИС ВОЛЬФСОН

Спецвыпуск: Хакер, номер #067, стр. 067-034-3

<div class="submenu">

<p><strong><a href="#">Новости</a></strong> — свежая информация на нашем сайте</p>

<p><strong><a href="#">О проекте</a></strong> — о сайте, на котором вы сейчас находитесь</p>

<p><strong><a href="#">История</a></strong> — со времен динозавров до наших дней</p>

<p><strong><a href="#">Участники проекта</a></strong> — кто мы сейчас и кем мы станем</p>

</div>

</div>

Здесь в слой класса logo_and_submenu мы вложили два слоя классов logo и submenu. За расположение элементов на странице будут отвечать таблицы стилей:

.logo_and_submenu

{

clear: both;

}

.logo

{

float: left;

}

.submenu

{

float: right;

margin-top: 10px;

margin-right: 10px;

width: 400px;

background-color: gray;

padding: 10px 10px 10px 10px;

}

Логотип будет прикреплен к левому краю, а подменю — к правому. Также у него проставлены внешние и внутренние отступы, ширина и цвет фона. На очереди горизонтальное меню и форма для поиска:

<div class="horizontal_menu">

<span class="horizontal_menu_item"><a href="#">Главная</a></span>

<span class="horizontal_menu_item"><a href="#">Форум</a></span>

<span class="horizontal_menu_item"><a href="#">Проекты</a></span>

<span class="horizontal_menu_item"><a href="#">Материалы</a></span>

<span class="horizontal_menu_item"><a href="#">Веб-студия</a></span>

</div>

<div class="search">

<form action="" method="get">

<p><input name="" size="30" type="text" value="Введите текст для поиска..." />

<input name="" type="button" value="Поиск" /></p>

</form>

</div>

Их мы можем сделать так же, только без контейнера, то есть просто в виде двух слоев. В данном случае нужно запретить обтекание горизонтального меню слева и прикрепить его к левому краю. С формой поиска проделывается то же самое, только для правой стороны.

.horizontal_menu

{

clear: left;

float: left;

padding: 7px;

}

.search

{

clear: right;

float: right;

margin-top: 5px;

}

Осталось самое вкусное — основная часть страницы. Пусть она будет состоять из двух колонок. Обе колонки пусть лежат в слое-контейнере класса middle. Левая колонка имеет класс vertical_menu_item, правая — main. Правая состоит еще из двух слоев: верхний (breadcrumb, цепочка навигации) и нижний (content) — собственно главное содержимое страницы.

<div class="middle">

<div class="vertical_menu">

<p class="vertical_menu_item"><a class="white_link" href="#">Главная</a></p>

<p class="vertical_menu_item"><a class="white_link" href="#">Форум</a></p>

<p class="vertical_menu_item"><a class="white_link" href="#">Материалы</a></p>