Главная » Добавляем на сайт, Как ...?! » Как сделать на сайте неподвижную область? И на сколько велик ее функционал
Дек
30

Как сделать на сайте неподвижную область? И на сколько велик ее функционал

Меня просили объяснить как я сделал неподвижную область на сайте, поэтому выполняю свое обещание. Вы наверное уже видели у меня на сайте такую область :) Сначала это была ссылка на конкурс в правом верхнем углу, а сейчас это плеер в левом нижнем углу :)

Вывод iframe (пример мой плеер)

Перед закрывающим тегом HEAD

[html]
<style type=’text/css’>iframe#ribbon { display:block; position:fixed; bottom:0; left:0; height: 37px; width: 260px;text-indent:-999px; }
* html iframe#ribbon { display: block; position: absolute; bottom: 0; left:0; background-attachment: fixed; height: 37px; width: 240px; text-indent: -999px z-index: 100; }
</style>
[/html]

На странице в любом месте

[html]
<iframe src="http://kpeople.ru/music-multi.htm" width="240" height="30" frameborder="0" id="ribbon"></iframe>
[/html]

  • top:0; right:0; — верхний правый угол, если нужно разместить внизу слева например, то меняем на bottom:0; left:0;

Вывод изображения из ссылкой на нужную нам страницу

Перед закрывающим тегом HEAD

[html]
<style type=’text/css’>a#ribbon { display:block; position:fixed; top:0; right:0; background:url(http://kpeople.ru/[ВАША КАРТИНКА]) no-repeat top left; height: 156px; width: 183px;text-indent:-999px; }





* html a#ribbon { display: block; position: absolute; top: 0;right:0; background:url(http://kpeople.ru/[ВАША КАРТИНКА]) no-repeat top left; background-attachment: fixed; height: 156px; width: 183px;text-indent: -999px z-index: 100; }
</style>
[/html]

На странице в любом месте

[html]
<a id="ribbon" href="http://kpeople.ru" title="Блог Компьютерный People"></a>
[/html]

  • [ВАША КАРТИНКА] — указываете полный адрес к изображению.
  • top:0; right:0; — верхний правый угол, если нужно разместить внизу слева например, то меняем на bottom:0; left:0;
  • height: 156px; width: 183px — размеры фиксированной области на странице, идеально если она совпадает с размерами картинки

Если ваш сайт является блогом написанном на движке WordPress, то первую чать кода лучше всего вставить в header.php а вторую в footer.php.

Надеюсь вам все понятно, если есть какие либо вопросы ко мне, вы можете их задать в комментариях или в форме обратной связи. Также подписывайтесь на новые записи в форме ниже, на этом все, папа. — tom0rrow



Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




Подтвердите подписку в письме пришедшем на Почту, после чего начнете получить рассылку.