Создание тянущейся шапки с логотипом (для начинающих)

Доброго времени суток, уважаемые читатели. Вчера вечером, мне написал в аську один человек, который попросил помочь ему с шапкой сайта. Перед ним стояла задача: сделать шапку с тянущимся фоном (резиновую) и чтобы посередине был размещён какой-то логотип. Конечно же, я не мог отказать человеку в помощи и поэтому пишу данный пост с примерами реализации такой шапки.

HTML код

Для начала нам необходимо создать html-структуру шапки. Для этого мы воспользуемся лишь двумя контейнерами: один для шапки, а второй, вложенный в первый, будет контейнером для логотипа.

<div id="header">
   <div id="logo"></div>
</div>

Вот и весь необходимый нам html код.

Изображения

Для решения требуемой задачи нам понадобится лишь две картинки. Первая будет фоном всей шапки, но поскольку шапка у нас будет тянуться, в зависимости от шириной окна браузера и разрешения монитора, то необходимо сделать картинку таким образом, чтобы её можно было повторять т.е. при близком расположении нескольких копий данной картинки не должно быть видно “стыков”. Есть 2 варианта реализации необходимого нам фона.

Первый, сделать картинку такой же высотой, как и шапка, а шириной всего-лишь в несколько пикселей и повторять картинку по оси Х. Второй вариант, сделать картинку в виде квадрата, например, и повторять её по двум осям: Х и У. В пробной странице, ссылку на которую вы можете найти в конце статьи, я буду использовать второй вариант вариант, однако, в данной статье я приведу примеры css кода для обоих вариантов.

Вторая картинка, в которой будет содержаться наш логотип, должна иметь прозрачный фон, чтобы без труда наложить её на любой фон. Для изображений с прозрачным фоном рекомендую использовать формат png-24.

Допустим, что наши изображения будут иметь следующие имена: фоновое изображение будет называться bg.jpg, а логотип – logo.png. Теперь перейдём к завершающей части нашей статьи, а именно к созданию css стилей.

CSS стили

Если вы ждёте большого количества css кода, то я вас расстрою – его будет тоже совсем не много.

#header {
 	position: absolute;
 	width: 100%;
 	min-width: 1000px;
  	height: 100px;
 	background: #ccffff url(bg.jpg) repeat-x left top;
}
#logo {
 	width: 200px;
 	height: 80px;
 	margin: 10px auto;
 	background: url(logo.png) no-repeat;
}

Теперь объясню для чего нужна каждая строчка, представленного выше, css кода. Итак, блок #header. Сначала мы задаём позиционирование блока относительно всей страницы, затем задаём его ширину и минимальную ширину. Минимальная ширина, это ширина, меньше которой блок сжиматься не будет, а если экран всё же будет уже, чем минимальная ширина, то появиться горизонтальная полоса прокрутки. И последний штрих – задаём фон для данного блока: сначала раскрашиваем его цветом #ccffff – специально подбираем цвет как можно ближе к основному цвету фона. Это делается на случай, если у пользователя будет отключена загрузка изображений, тогда он увидит этот самый цвет. После установки цвета мы подгружаем изображение, которое и будет нашим фоном, а затем выравниваем его по верхнему левому краю. В случае, если картинка имеет ту же высоту, что и блок, то параметр top можно не устанавливать, а параметр repeat лучше заменить на repeat-x.

И наконец блок #logo. Тут ещё проще: задаём ширину и высоту, устанавливаем отступ сверху и снизу равный десяти пикселям, выравниваем блок строго по центру родительского блока (#header) и, наконец, задаём фон без указания “подложки” в виде цвета. Как вариант, можете не указывать фон в css, а просто вставить картинку в блок logo в html.

Как видите, ничего сложного и сверхъестественного. Если у вас есть какие-то вопросы по данной статье, то задавайте их в виде комментариев к данной записи, я обязательно постараюсь всем помочь.

Вот что у нас получилось – смотреть пример. Ради своего и вашего удобства css стили расположены внутри html файла, однако, строго не рекомендую так делать при создании страниц.

А какой урок по html вёрстке или php хотели бы увидеть вы? Задавайте свои задачи по вёрстке, а я в следующих постах расскажу как их решать. До встречи! Ретвиты и перепосты с указанием первоисточника приветствую! 🙂

________________________________

Нашёл неплохой бложик о вёрстке и сайтостроении – cssworld.ru, рекомендую посмотреть всем, кто учиться верстке.