бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Фиксированный элемент в левом и правом нижнем углу страницы (установить фиксированный элемент в низ сайта)
Фиксированный элемент в левом и правом нижнем углу страницы
webanet Дата: Четверг, 2013-12-05, 00:29 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Фиксированный элемент - это элемент, который будет сохранять свою позицию при прокрутке страницы и будет отображаться поверх всех остальных элементов.
Фиксированным элементом можно сделать картинку, ссылку или целый блок

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

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


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

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

lbottom: 0; left: 0; - выводит элемент в левый нижний угол

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

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

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

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

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


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

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


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

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

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


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

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


Где выделенное красным и будет открывающий тег body (внимание! в разных шаблонах он может выглядеть по-разному)
 
bulavka Дата: Вторник, 2013-12-10, 23:26 | Сообщение # 2
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
Помогите пожалуйста сделать код для размещения внизу на сайте укоз.

Хотим вот такую елочку в нижнем левом углу /forum/30-247-1183-16-1322855252

Что-то я запуталась между скриптами и кодами. Елка вылазит вверху все время и не хочет фиксироваться. sad
 
webanet Дата: Среда, 2013-12-11, 00:09 | Сообщение # 3
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
bulavka, браузер IE? если да, то без доктипа не будет работать

временное решение тут /forum/30-337-1433-16-1386252821
если не IE то дайте ссылку на сайт с установленной елочкой
 
true Дата: Четверг, 2013-12-12, 08:56 | Сообщение # 4
Рядовой
Группа: Пользователи
Сообщений: 2
Статус: Offline
Немного не понял. Как так. Картинка то ведь вторым слоем должна идти. А не просто следующим элементом на странице.
 
webanet Дата: Четверг, 2013-12-12, 14:06 | Сообщение # 5
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
true, да. слоем нужно ставить, если на странице есть ещё слои. тогда надо ставить верхним. исправила на всякий. спасибо
 
vogman Дата: Пятница, 2014-12-19, 22:03 | Сообщение # 6
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
А как сделать кнопку чтобы можно было сворачивать фиксированную страницу
 
Виталий Дата: Вторник, 2015-03-10, 20:17 | Сообщение # 7
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
Цитата webanet ()
Панель управления - Дизайн - Управление дизайном - Глобальные блоки - Верхняя часть сайта - В самый верх шаблона Верхняя часть сайта вставляем код

Возник вопрос: если элемент размещаем в нижнем углу сайта, то почему код размещаем в шаблоне "Верхней части сайта"?
 
webanet Дата: Вторник, 2015-03-10, 21:43 | Сообщение # 8
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Виталий, потому что совершенно все равно где код размещать
bottom: 0; left: 0 прибивают в левый нижний угол из любого положения. поэкспериментируйте
 
Const1964 Дата: Понедельник, 2016-04-04, 08:33 | Сообщение # 9
Рядовой
Группа: Пользователи
Сообщений: 2
Статус: Offline
А как зафиксировать элемент не в правой нижней части экрана, а в правой нижней части страницы? (сайт/index/karta_sajta/0-176)
 
webanet Дата: Понедельник, 2016-04-04, 18:40 | Сообщение # 10
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Const1964,
Код
<?if($URI_ID$='page176')?><div><img src="ссылка на картинку" alt="ваш текст короткого названия картинки"
title= "произвольный заголовок картинки" style="position: fixed; bottom:
0; right: 0; z-index:500;"/></div><?endif?>
 
Const1964 Дата: Вторник, 2016-04-05, 09:07 | Сообщение # 11
Рядовой
Группа: Пользователи
Сообщений: 2
Статус: Offline
Спасибо! Приятно иметь дело с профессионалами!
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Фиксированный элемент в левом и правом нижнем углу страницы (установить фиксированный элемент в низ сайта)
  • Страница 1 из 1
  • 1
Поиск: