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

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

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


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

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

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

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

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

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

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

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


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

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


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

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


Где выделенное красным и будет открывающий тег body (внимание! в разных шаблонах он может выглядеть по-разному)
 
ochotnik Дата: Среда, 2013-12-04, 16:34 | Сообщение # 2
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
Классно, а как прописать, чтобы шишки как у тебя разместить?
 
webanet Дата: Среда, 2013-12-04, 16:34 | Сообщение # 3
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
ochotnik, если ваш шаблон на основе конструктора, то панель управления - дизайн - управление дизайном - глобальные блоки - верхняя часть сайта - в самый верх шаблона ставьте

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

где выделенное красным - это название картинки
а выделенное синим - это текст который вы должны прописать самостоятельно

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

например можно вставить такую картинку в левый угол



или деда мороза посадить в верхний левый угол



код с дедом морозом будет таким:

Код
<div><img src="http://webanetlabs.net/ng2013/dedmorozshampani.png" alt="ваш текст короткого названия картинки" title= "новогодние украшения для сайта" style="position: fixed; left:0; z-index:500;"/></div>


для установки такой картинки надо просто в моем коде заменить выделенное красным. то есть картинку
 
ochotnik Дата: Среда, 2013-12-04, 23:30 | Сообщение # 4
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
webanet, спасибо большое, IE11 не пошло, встаёт поверх шапки... У меня рыбаки охотники старой формации люди, все почти под IE ''заточены''...
 
webanet Дата: Среда, 2013-12-04, 23:58 | Сообщение # 5
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
ochotnik, для IE нужен доктайп !DOCTYPE и тогда все пойдет даже на старых версиях до 7-ой
установить доктип можно так: панель управления - настройки - общие настройки - Значение тега <!DOCTYPE>: - вставьте значение

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


или

Код
<!DOCTYPE html>
если сайт рассыпется при этих значениях доктипа, то дайте адрес сайта
 
ochotnik Дата: Четверг, 2013-12-05, 00:04 | Сообщение # 6
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
С доктайпом у меня ''рушится'' всё остальное по дизайну, всё версталось в 2006 году под IE и ничего не менялось почти восемь лет.
аstаnаhuntеr.ucоz.ру
kоstаnаyhuntеr.ucоz.ру
аktоbеhuntеr.ucоz.ру
 
webanet Дата: Четверг, 2013-12-05, 00:52 | Сообщение # 7
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
ochotnik, ваша проблема в визуальном редакторе как всегда

в правом блоке плывет фон заголовка блока из-за того, что в название блока вклинивается тег p и само название лезет за пределы разметки конструктора. вообще конструктор и визуальный редактор не применяют

сейчас у вас так в проблемных блоках

Код
<TABLE style="MARGIN-BOTTOM: 2px; BORDER-TOP: #352e2c 1px solid; BORDER-RIGHT: #352e2c 1px solid; BORDER-BOTTOM: #352e2c 1px solid; BORDER-LEFT: #352e2c 1px solid" cellSpacing=0 cellPadding=0 width=180 border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 10px; BACKGROUND: url(http://astanahunter.ucoz.ru/astanaglawnay/astaknopka2.gif) #252525; COLOR: #dad397; PADDING-LEFT: 40px" height=30>
<P align=center><B><!-- <bt> --><!--<s5158>--><SPAN style="FONT-SIZE: 14pt; FONT-FAMILY: Bookman Old Style; COLOR: #006600">Форма входа<!--</s>--><!-- </bt> --></SPAN></B></P></TD></TR>


а надо всего-лишь привести к виду левых блоков

Код
<TABLE style="BORDER-BOTTOM: #352e2c 1px solid; BORDER-LEFT: #352e2c 1px solid; MARGIN-BOTTOM: 2px; BORDER-TOP: #352e2c 1px solid; BORDER-RIGHT: #352e2c 1px solid" border=0 cellSpacing=0 cellPadding=0 width=180>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 40px; BACKGROUND: #252525 url('http://astanahunter.ucoz.ru/astanaglawnay/astknopka1.gif'); COLOR: #dad397; FONT-SIZE: 10px" height=30><B><!-- <bt> --><!--<s5347>-->
<font color="#006600">
<font size="4"><SPAN style="FONT-FAMILY: Bookman Old Style; ">Форма входа</SPAN></font><SPAN style="FONT-FAMILY: Bookman Old Style; FONT-SIZE: 12pt"><!--</s>--><!-- </bt> --></SPAN></font></B></TD></TR>


остальные элементы доктип держит нормально
без доктипа осел position: fixed; не поймет
 
webanet Дата: Четверг, 2013-12-05, 18:13 | Сообщение # 8
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
чтобы обмануть осла и чтобы не рассыпался сайт можно поставить такой доктип в общих настройках сайта

<!DOCTYPE>

потом, по окончании праздника его надо удалить вместе с праздничными украшениями
 
Daniela Дата: Среда, 2015-03-11, 17:54 | Сообщение # 9
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
Здравствуйте! Не могли бы ли Вы дать код для вставки вертикальной картинки (например те же шарики или елочная гирлянда идущая сверху вниз). А то у меня на сайте как раз пустующее место с двух боков от центрального блока.
_www.аrgаrusа.com_
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Фиксированный элемент в левом верхнем углу страницы (отображение любого фиксированного элемента в левом углу)
  • Страница 1 из 1
  • 1
Поиск: