HTML и CSS

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

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

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

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, рекомендую посмотреть всем, кто учиться верстке.

  • Vova

    1. а если усложнить: тоесть снежинка — картинка, текст — отдельно (не картинка)
    2. а если так: фон и две картинки, как на том сайте cлева картинка, ниже нее текст и по центру картинка

    • 1. Тогда картинку необходимо подгружать не через css стили, а прописать в хтмл коде, внутри контейнера #logo, а затем рядом с картинкой написать текст. Если необходимо, чтобы текст был справа от картинки, то сделайте картинке выравнивание по левому краю (align=»left»).
      2. Если необходимо добавить ещё один логотип, то добавьте ещё один контейнер, по аналогии с #logo, только тогда в стилях укажите position: absolute и задайте положение данного контейнера (там же в стилях) используя параметры top и left. Например, top: 40px; left: 30px; А потом, также как и в первом случае, вставьте картинку внутри нового контейнера и туда же поместите текст.

  • Для кого-то будет полезно. Мало подобных туториалов на русском языке.

    • Ответ для Дмитриев: Обычно именно с такой мыслью я пишу подобные статьи. Кому-то это покажется очевидной вещью, а кому-то будет полезно.

  • Сергей

    Подскажите пожалуйста, как организовать резиновую шапку из нескольких блоков — в моем случае 3 разных изображения, плюс еще блок поиска и контактная информация. По идее, 2 изображения привязываются к краям экрана, одно позиционируется по центру. Под ним должен быть поиск. Итого, 2 изображения по краям и 3 по центру одно под другим. Можно ли это все заключить и они не сползали?

    • Ответ для Сергей: можно, но тут надо «эксперементировать». Прям так налету дать вам конкретный код не могу.