Фиксированный логотип относительно окна браузера

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

Теория.
Представим, что есть блок, включающий в себя весь остальной код (#container). Задаем ему background со значением fixed. Это дает нам одну картинку, которая будет на всей странице. Далее прописываем блок для шапки (#header) и задаем ей свой background со значением fixed. Так как шапка является дочерним блоком от #container, то он перекрывает собой фон заданный у самого главного блока. Также шапке нужно задать, чтобы когда фон, который вылазит за границы при скролле, убирался. И вот когда этот фон убирается, появляется фон, указанный для #container.

Реализация.
Действуем по сказанному выше. Создаем блок #container, и внутри него шапку:

Теперь задаем обоим разный фон и шапке делаем, чтобы фон не вываливался за:


#container{background:transparent url('logo.png') fixed no-repeat 30px 30px;}
#header {background:#4b4b4b url('logo-up.png') fixed no-repeat 30px 30px;
overflow:hidden;}
Свойства background должны принимать здесь одинаковые значение, кроме цвета и самой картинки. Также отступы в 30px определяют отступы слева и сверху для самого логотипа.
* Единственное что! IE 6 не поддерживает background-attachment: fixed. Что ведет к статическому логотипу.

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

Чтобы сделать логотип ссылкой, нам нужно всего-лишь добавить ссылку на сайт и задать ей position со значением fixed, чтобы она была вместе с логотипом всегда. Также ссылке нужно не забыть присвоить размеры, такие как у логотипа. Создаем ссылку:

И стили к ней:
#homelink{position:fixed;top:30px;left:30px;}
#homelink a{
text-indent:-9999em;
display:block;width:100px;height:100px;
overflow:hidden;
}
Если посмотреть в браузере IE версии 6, увидим, что ссылка отображается не так, как нам нужно. Поэтому для IE уберем эту ссылку.

* html #homelink a{display:none;}

И поставим индивидуальную, поместив ее в блок #header.

И стили для нее:
a#logo{display:none;_display:block;width:100px;height:100px;float:left;}
* html a#logo{background-position:0 0;}
Эту же ссылку мы прячем от всех браузеров кроме одного — IE. Кстати, вполне логично, ведь ссылка для него.

Теперь обновляем, смотрим, улыбаемся : ).

Осталось только оформить вашу страницу.
Сразу укажу на ошибки, которые допустил я при верстки примера для вас.

1. Установить для шапки высоту.
2. Установить для шапки внутренние отступы.
3. Сделать отступ для контента слева, чтобы логотип не находился под текстом.

Далее все на ваш вкус.

Покажу свои стили и html-код (с комментариями):


#container{background:transparent url('logo.png') fixed no-repeat 30px 30px;}
#header {background:#4b4b4b url('logo-up.png') fixed no-repeat 30px 30px;
overflow:hidden; /* Запрещаем, чтобы фон вылазил за размеры шапки */
height:100px; /* Высота шапки */
padding:30px 0 30px 30px; /* Внутренние отступы */
border-bottom:solid 4px #000; /* Черная рамка снизу. Для красоты ; ). */
}
a#logo{ /* Стили для индивидуальной ссылка браузера IE 6 */
display:none;_display:block;width:100px;height:100px; /* Задаем размеры */
float:left; /* Обтекание по левому краю */
}
* html a#logo{background-position:0 0; /* Фикс для IE */}
#content{
padding:20px 50px 0 140px; /* Внутренние отступы, включая отступ от колонки для фикс. логотипа */
clear:left; /* Запрещаем обтекание элементов по левому краю */
}
#contant p{ /* Стили для абзацов текста */
font-family: Arial, Helvetica, sans-serif;font-size: .8em;line-height: 1.5em;margin: 0 0 14px 0;
}
#homelink{ /* Стили для блока, содержащего ссылку для браузеров */
position:fixed; /* Устанавливаем, чтобы ссылка ходила за логотипом */
top:30px;left:30px; /* Внешние отступы. Ставят те, которые указаны в background для логотипа */
}
#homelink a{
text-indent:-9999em; /* Убираем текст внутри ссылки */
overflow:hidden; /* Нельзя, чтобы содержимое влияло на размер ссылки */
display:block;width:100px;height:100px; /* Устанавливаем размер */
}
* html #homelink a{display:none; /* Прячем ссылку от браузера IE */}
/* Оформляем заголовок */
.title{float:left;font-size:35px;padding:30px 0 0 140px;color:#ccc;_padding-left:40px;}
.title a{color:#ccc;}.title a:hover{text-decoration:none;}


Пример хорош. Думаю я все написал, расписал и объяснил. Если остались какие-то сомнения, пишите. С радостью разберемся вместе.

Если бы все было так просто…
Одним из недостатков этого примера я нашел в том, что пример подходит только для резиновой верстки. Так же то, что в IE 6 логотип не фиксируется, что противоречит нашей задаче. IE 7 тоже добавил своего. У него не работает параметр position:fixed;. Что возможно при мучении можно поправить, но факт есть факт и в IE 7 positon не принимает значение fixed, следовательно, логотип — не ссылка.
Вот теперь, пожалуй, и все.