Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.
Начал смотреть с чувством, что вот - сейчас научусь чему-то новому. Но терпения хватило досмотреть до девятой части. Устал наблюдать мучения автора по верстке шаблона, и в частности, то, как создавалась шапка.
Автор зачем-то вырезал только часть фона с навигацией, вставлял изображение логотипа в html-каркас и обертывал его ссылкой, пытался угадать местоположение навигации с помощью абсолютного или относительного позиционирования. Я решил сам попробовать сделать шапку сайта так, как мне кажется более правильным.
В основу создания шапки я положил свойство вложенных слоев на
‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).1
div
Для чистоты эксперимента приведу эти размеры:
, 1
bg-nav.gif - 300x70px
, 1
bg-header.gif - 800x50px
. В CSS-свойствах сделал для них подстановку с помощью фоновой заливки цветом, для подстраховки.1
logo.gif - 30x30px
Итак, что я буду делать. Первый шаг стандартный. Создается обертка с помощью слоя
, которой прописываются свойства центрирования страницы и задания ей ширины:1
div id="wrap"
Затем создается слой
, в котором будет располагаться шапка будущего сайта. Для нее прописываю совсем короткие свойства, с помощью которых гарантированно растягиваю шапку на всю ширину блока-родителя 1
div id="header"
и задаю ее высоту:1
div id="wrap"
Затем создаю слой
, задача которого будет содержать в себе фоновое изображение для навигационного списка шапки. Высоту этого слоя устанавливаю равной высоте шапки, а сам фоновый рисунок позиционирую в правом углу блока. Высота его равна высоте шапки, поэтому достаточно сметить его по-горизонтали вправо, а по-вертикали оставляю как есть.1
div id="nav"
Рисунок короткий и будет занимать не всю ширину шапки, а только некоторую ее правую часть, как раз ровно настолько, чтобы вместить в себя навигационный список. CSS-код для этого слоя представлен ниже:
Теперь создаю еще один слой
, в котором будет размещено еще одно фоновое изображение. По высоте оно меньше, чем фоновое изображение слоя 1
div id="head"
и будет располагаться поверх этого слоя, перекрывая его.1
div id="nav"
Поэтому фон слоя
будет видет только частично, лишь его нижний краешек, для которого и отводится роль фона навигации. Для слоя 1
div id="nav"
явно задаю его высоту. Код со свойствами приведен ниже:1
div id="head"
Ну вот, задача практически и решена. При этом не было использовано ни абсолютного, ни относительного позиционирования. только смещение фона слоя. Осталось создать последний слой, который будет выполнять задачу логотипа сайта. Размещаю его поверх всех остальных слоев и делаю кликабельным на все его пространство.
При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (как мною задумано для простоты эксперимента). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка:
Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (
), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя 1
inline
.1
div id="logo"
Поэтому “превращаю” ссылку в блочный элемент с помощью свойства
. А вот теперь растяну ссылку, задав для нее ширину и высоту в процентах. Конечно, можно указать эти параметры и с помощью пикселей, так как размеры логотипа известны. Но лучше возложить эту задачу на плечи браузера - пусть сам вычисляет размеры блока-ссылки:1
display:block
Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя
. Создаю ненумерованный список, который помещаю внутрь слоя 1
div id="nav"
. Так как по коду слой 1
div id="nav"
расположен выше и имеет фиксированную высоту, то список займет все оставшееся пространство под ним: 1
div id="head"
.1
70px - 50px = 20px
Теперь достаточно сместить список вправо с помощью
и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:1
float: right
Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком
и внутренним элементом(ами) 1
ul
. Первоначально для них я прописал свойство 1
li
.1
display: inline
Но после “наводки” Kray Storm с форума
проблема была решена. Для элементов 1
forum.htmlbook.ru
и я поменял свойство на 1
li
и для я дополнительно задал высоту строки 1
display: inline-block
, равную высоте блока 1
line-height: 20px
. Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.1
ul
Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими
. Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.1
img
Ниже приведу полный код html-каркаса и CSS-кода.
HTML-код:
CSS-код:
Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта:
И, наконец, результат всего - готовая шапка сайта:
На этом все.