Главная›Интернет›Как сделать кнопки html в шапке. Шапка страницы
Как сделать кнопки html в шапке. Шапка страницы
Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.
Начал смотреть с чувством, что вот - сейчас научусь чему-то новому. Но терпения хватило досмотреть до девятой части. Устал наблюдать мучения автора по верстке шаблона, и в частности, то, как создавалась шапка.
Автор зачем-то вырезал только часть фона с навигацией, вставлял изображение логотипа в html-каркас и обертывал его ссылкой, пытался угадать местоположение навигации с помощью абсолютного или относительного позиционирования. Я решил сам попробовать сделать шапку сайта так, как мне кажется более правильным.
В основу создания шапки я положил свойство вложенных слоев на
, , которой прописываются свойства центрирования страницы и задания ей ширины:
#wrap
{
width
:
800px
;
height
:
100%
;
margin
:
0
auto
;
background
:
#c0c0c0
;
}
Затем создается слой
и задаю ее высоту:
#header
{
width
:
100%
;
height
:
70px
;
}
Затем создаю слой
1
div id="nav"
, задача которого будет содержать в себе фоновое изображение для навигационного списка шапки. Высоту этого слоя устанавливаю равной высоте шапки, а сам фоновый рисунок позиционирую в правом углу блока. Высота его равна высоте шапки, поэтому достаточно сметить его по-горизонтали вправо, а по-вертикали оставляю как есть.
Рисунок короткий и будет занимать не всю ширину шапки, а только некоторую ее правую часть, как раз ровно настолько, чтобы вместить в себя навигационный список. CSS-код для этого слоя представлен ниже:
и будет располагаться поверх этого слоя, перекрывая его.
Поэтому фон слоя
явно задаю его высоту. Код со свойствами приведен ниже:
#head
{
background
:
url(i/bg-header.gif)
#2b66c8
0
0
no-repeat
;
height
:
50px
;
}
Ну вот, задача практически и решена. При этом не было использовано ни абсолютного, ни относительного позиционирования. только смещение фона слоя. Осталось создать последний слой, который будет выполнять задачу логотипа сайта. Размещаю его поверх всех остальных слоев и делаю кликабельным на все его пространство.
При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (как мною задумано для простоты эксперимента
). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка:
Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (
.
1
display:block
. А вот теперь растяну ссылку, задав для нее ширину и высоту в процентах. Конечно, можно указать эти параметры и с помощью пикселей, так как размеры логотипа известны. Но лучше возложить эту задачу на плечи браузера - пусть сам вычисляет размеры блока-ссылки:
#logo
a
{
display
:
block
;
width
:
100%
;
height
:
100%
;
}
Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя
. Так как по коду слой .
Теперь достаточно сместить список вправо с помощью
1
float: right
и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:
#nav
ul
{
list-style-type
:
none
;
float
:
right
;
}
#nav
li
{
display
:
inline-block
;
}
#nav
a
{
text-decoration
:
none
;
color
:
#fff
;
font-weight
:
bold
;
margin-right
:
15px
;
line-height
:
20px
;
display
:
inline-block
;
}
Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком
. Первоначально для них я прописал свойство проблема была решена. Для элементов и для я дополнительно задал высоту строки . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.
Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими
1
img
. Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.
Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта.
В прошлой статье мы сделали каркас нашего HTML шаблона, который готов к его заполнению и оформлению. Сегодня я расскажу как красиво сделать шапку сайта
(верхнюю часть) и простенькое меню. Также сегодня внесем немного изменений в стили других блоков.
Итак, что мы имеем на данный момент? Сейчас у нас вот такие стили:
Я поставил фиксированную ширину - width блока, размером 1024 пикселя, выровнял сам блок по центру, а текст в нем по левому краю с помощью text-align:left. Выровнять блок по центру мы можем с помощью стиля margin, задав величину отступа сверху и снизу 0, а по ширине auto. К сожалению, это не всегда работает в Internet Explorer 6, поэтому в body я прописал text-align: center; и именно поэтому мне пришлось выравнивать текст в обволакивающем блоке и подвале по левому краю. Также в body я указал margin:0, тем самым задав отступы от краев 0 пикселей. В итоге у Body получились вот такие стили:
Тут все аналогично блоку wrapper: установил ширину 1024px, выровнял блок по центру, а текст по левому краю. Также добавил в container отступ от шапки margin-top: 20px; и убрал минимальную ширину, так как у нас фиксированная ширина обволакивающего.
Ну что ж, шаблон мы подготовили, пора перейти и к шапке сайта. Стили будут такими:
Высота блока 140px, фон белый, а величина отступа от верхнего края 40 пикселей. Вот и все изменения в стилях шапки. Что? Это всё? И в честь этого названа целая статья? Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.
Пропишем в код HTML шаблона
внутри блока header вот такую строчку: По сути это ссылка на главную страницу без текста, однако ей присвоен класс class="logo". Теперь нужно его оформить в стилях css.
Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в
Вёрстка страницы
представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Мы не будем использовать элемент , так как он поддерживается не всеми браузерами.
Рис. 1. Основные секции страницы
