новогодние украшения
подписка на RSS форум webanet
web.a.net
Loading
Страница 1 из 11
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Фиксированный элемент в правом верхнем углу страницы (отображение любого фиксированного элемента в правом углу)
Фиксированный элемент в правом верхнем углу страницы
webanet Дата: Среда, 04.12.2013, 16:41 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 154
Статус: Offline
Фиксированный элемент - это элемент, который будет сохранять свою позицию при прокрутке страницы и будет отображаться поверх всех остальных элементов.
Фиксированным элементом можно сделать картинку, ссылку или целый блок

Создать фиксированную картинку в правом верхнем углу страницы можно с помощью кода

Цитата
<div><img src="ссылка на картинку" alt="ваш текст короткого названия картинки" title= "произвольный заголовок картинки" style="position: fixed; right:0; z-index:500;"/></div>


Описание кода:

position: fixed - фиксирует элемент на странице (в нашем случае) при прокрутке. То есть остается на одном месте

right:0; - выводит элемент в правый верхний угол

z-index:500; - выводит элемент слоем. прописывать надо, если на странице есть ещё слои (элементы z-index)

Это простейший пример кода. На самом деле элементу можно задать ещё больше стилей. В этом случае стили лучше расписывать в таблице стилей, а в код сайта выводить следующим образом

<div class="ololo"><img src="ссылка на картинку" alt="ваш текст короткого названия картинки" title= "произвольный заголовок картинки"/></div>

Где выделенное красным - это указание на класс, который вы создали в таблице стилей и расписали вот так:

Код
.ololo {position: fixed; z-index:500;}


Примечание: браузер IE ниже 9-ой версии не осилит конструкцию без прописанного доктипа !DOCTYPE

Как установить фиксированную картинку на сайтах системы uCoz


Панель управления - Дизайн - Управление дизайном - Глобальные блоки - Верхняя часть сайта - В самый верх шаблона Верхняя часть сайта вставляем код

Код
<div><img src="ссылка на картинку" alt="ваш текст короткого названия картинки" title= "произвольный заголовок картинки" style="position: fixed; right:0; z-index:500;"/></div>


прописываем ссылку на картинку, прописываем alt и title - Сохраняем шаблон. Так картинка будет выводиться на всех страницах сайта

Если картинка на всех страницах не нужна или ваш шаблон не адаптирован под работу конструктора, то откройте любой шаблон (на примере шаблона Страницы сайта) и вставьте код сразу после открывающего тега body

Например вот так:

Цитата
<body style="margin:0px; padding:0px;background-color: #FFFFFF;">
<div><img src="ссылка на картинку" alt="ваш текст короткого названия картинки" title= "произвольный заголовок картинки" style="position: fixed; right:0; z-index:500;"/></div>


Где выделенное красным и будет открывающий тег body (внимание! в разных шаблонах он может выглядеть по-разному)
 
Загрузка...
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Фиксированный элемент в правом верхнем углу страницы (отображение любого фиксированного элемента в правом углу)
Страница 1 из 11
Поиск:

© web.A.net 2007-2017
Версия PDA