Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по HTML / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Резиновая шапка для сайта

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

Для начала нам нужно нарисовать ее в любом графическом редакторе, например Photoshop. Затем мы разбиваем изображение на три части и сохраняем их.

Теперь создадим таблицу, в которой будут располагаться изображения:

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="30">
<img src="images/left.gif" width="30" height="80" border="0">
</td>
<td class="header">
<h1>WEB Разработка</h1>
</td>
<td width="30">
<img src="images/right.gif" width="30" height="80" border="0">
</td>
</tr>
</table>

Параметры cellspacing="0" и cellpadding="0" являются обязательными, иначе будут видны рамки таблицы. В первую и третью ячейки вставляем изображения которые находились по краям шапки, а среднюю ячейку мы заполняем повторяющимися изображениями при помощи CSS:

.header{
background-image:url(images/center.gif);}

Пропишите эти строчки в своей таблице стилей либо между тегами <style></style>  заменив путь до изображения на свой. Ну вот, теперь Ваша шапка будет изменять свою ширину при изменении размеров окна браузера.

Автор: Евгений Бочкарев Урок добавлен: 5 Августа 2009 в 16:40 Просмотров: 25722

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (8)

#9 alex 19-09-2011 в 01:04
помогите кто нибудь почему в центре картинка не отображается в браузере opera, explore?
#10 info@1000-tovarov.ru 31-10-2011 в 20:22
Очень интересная информация! спасибо автору!
#11 pozd88 03-03-2012 в 16:05
Подскажите пожалуйста как в Джоомле сделать резиновую шапку у шаблона?

1) сама шапка побита на 3 части.
2) Левая и правая чатсти должны не изменяться.
3) Средняя часть при растягивании странички должна увеличиваться например многократной вставкой.

Помогите, что нужно вписать в файлы шаблона? какой код?

Вот собственно сайт http://www.zolden55.0fees.net/
Очень хочется разрезать верхнюю шапку на 3 части, левую и правую часть жестко зафиксировать. А средняя должна увеличиваться \ заполнять собой, при растяжении окошка.

Я так понимаю нужно редактировать два файла шаблона:
1) CSS "template.css " сейчас в нем вот так вот прописанна шапка, одним файлом:

td.logoheader {
margin: 0;
padding: 0;
background : url(../images/heder.gif) no-repeat top center;
height : 150px;
width : 100%;}

2) HTML "index.php" в этом файле я не нашел не каких строчеек отвечающих за шапку.
#12 pozd88 03-03-2012 в 16:05
Я добавил ваши файлы в архив из примера, для экспирементов над шапкой своего сайта:

1) Для левой части шапки "left.gif"
2) Для центральной части, которая будет растягиваться "center.gif"
3) Для правой части шапки "right.gif"

Жутко хочется чтобы моя шапка работала как у вас в примере: http://www.ajaxs.ru/demo/html/header/ Но у меня не получается отредактировать Шаблон Джумлы, помогите пожалуйста....
#13 Trasher 19-04-2012 в 22:03
Помогите пожалуйста сделать шапку сайта, как на сайте onlainfilm.ucoz.ua. Чтобы на разных мониторах шапка выглядела пропорционально.
#14 Роман 28-04-2012 в 18:11
я не понял одного: мы разбили шапку на три малюсенькие полосочки, а что делать с основной частью картинки?
#15 Nastia 08-12-2012 в 00:26
А можете сказать как сделать единый шаблон для всех страниц?
#16 Alvastar 15-05-2014 в 13:14
Решить проблему с изображениями можно, например, с помощью jQuery.
И как же упрощает жизнь CSS3. И углы можно округлять, и даже градиенты делать.

#17 den 14-11-2014 в 13:50
Подскажите что делать! хотел добавить тел. в шапку, а получилось что все сдвинулось(( http://sdelaypol.by
#18 добродетель 17-11-2014 в 22:20
Den:
Может тебе сделать вот так:
position: absolute;
width: 180px;
height: 290px;
top: 236px;
padding-left: 730px;
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки