Иногда требуется при большом количестве материала на странице закрепить меню сайта так, чтобы даже при прокрутке страницы этот объект не прокручивался. Чаще всего закрепляют по краям страницы. Система ucoz позволяет это сделать в html. Для начала рассмотрим сам код:
<div style="position: fixed; top: 200px; left: 200px;"></div>
А теперь подробнее о всех значениях:
position: fixed - задаёт фиксированное положение объекта
top: 200px - задаёт отступ от верхнего края
left: 200px- задает отступ от левого края
right: 0px - задаёт отступ от левого края,
Если прописать left вместо right, то картинка будет приклеена к правому краю. Т.е. в различных сочетаниях- различные варианты.
Конечно, числовые значения по желанию.
Далее заходим в панель управления сайтом. Затем переходим в "Главная"- "Управление дизайном"- "Первый контейнер", расположенный в "Глобальные блоки". Находим выделенное:
<!-- <block1> -->
<table border="0" cellpadding="0" cellspacing="0" width="190">
<tbody><tr><td>
<table border="0" bgcolor="#E9ECF5" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="2%"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/3.gif" width="11" height="21"></span></font></td>
<td width="70%" background="/.s/t/111/4.gif"><div class="blockTitle"><!-- <bt> --><!--<s5184>--><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;">Меню сайта</span></font><!--</s>--><!-- </bt> --></div></td>
<td width="28%"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/10.gif" width="54" height="21"></span></font></td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td class="topBorder" style="padding:3px;" bgcolor="#F4F4F4"><!-- <bc> -->$SMENU_1$<!-- </bc> --></td></tr>
<tr><td bgcolor="#E9ECF5"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/11.gif" width="190" height="21"></span></font></td></tr>
</tbody></table><div style="text-align: center;"><br></div><table border="0" cellspacing="1" cellpadding="0" width="100%"><tbody></tbody></table>
<div style="padding:3px"></div>
<!-- </block1> -->
Вставляем: position: fixed; top: 200px; left: 200px;
<!-- <block1> -->
<table border="0" cellpadding="0" cellspacing="0" width="190">
<tbody><tr><td>
<table border="0" bgcolor="#E9ECF5" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="2%"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/3.gif" width="11" height="21"></span></font></td>
<td width="70%" background="/.s/t/111/4.gif"><div class="blockTitle"><!-- <bt> --><!--<s5184>--><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;">Меню сайта</span></font><!--</s>--><!-- </bt> --></div></td>
<td width="28%"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/10.gif" width="54" height="21"></span></font></td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td class="topBorder" style="padding:3px;position: fixed; top: 200px; left: 200px;" bgcolor="#F4F4F4"><!-- <bc> -->$SMENU_1$<!-- </bc> --></td></tr>
<tr><td bgcolor="#E9ECF5"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/11.gif" width="190" height="21"></span></font></td></tr>
</tbody></table><div style="text-align: center;"><br></div><table border="0" cellspacing="1" cellpadding="0" width="100%"><tbody></tbody></table>
<div style="padding:3px"></div>
<!-- </block1> -->
Сохраняем. И после обновления страницы смотрим результат.
Конечно получилось не совсем корректно, так как меню перекрывает youtube и реклама, но, как вариант мне подошел.
Здесь, конечно, рассмотрен один из способов фиксации меню сайта, но вероятно таким же образом возможно выполнить и фиксацию других блоков.
Так же можно сделать и через Конструктор сайта. Зайдя в редактирование html блока меню сайта, небольшой квадратик слева. И в итоге у Вас должно получиться. Смотрим на выделенное:
<table border="0" cellpadding="0" cellspacing="0" width="190">
<tbody><tr><td>
<table border="0" bgcolor="#E9ECF5" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="2%"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/3.gif" width="11" height="21"></span></font></td>
<td width="70%" background="/.s/t/111/4.gif"><div class="blockTitle">TITLE</div></td>
<td width="28%"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/10.gif" width="54" height="21"></span></font></td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td class="topBorder" style="padding:3px;position: fixed; top: 200px; left: 200px;" bgcolor="#F4F4F4">CONTENT</td></tr>
<tr><td bgcolor="#E9ECF5"><font color="#FF0000"><span style="-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;"><img border="0" src="/.s/t/111/11.gif" width="190" height="21"></span></font></td></tr>
</tbody></table><div style="text-align: center;"><br></div><table border="0" cellspacing="1" cellpadding="0" width="100%"><tbody></tbody></table>
<div style="padding:3px"></div>
В этой теме Вы можете задать вопрос о материале: Фиксация Меню Сайта в ucoz..
Среда 27.11.2024, 06:54:17 
