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