Какие требования к макету:
- Резиновый двухколонный макет
- sidebar фиксированной ширины 300px
- content растягивается на всю остальную ширину.
- footer прижатый к низу(в этом уроке не буду показывать как это делается).
Если вы делаете блоки флотнутыми (float), вы обязаны задать им фиксированную ширину (нельзя задать 1 sidebarу 300px и контенту 100%).В этом случае либо контент слезит вниз, либо появится горизонтальная прокрутка в 300px влево. Ну главное понять что этот способ нам не подходит.
2 способ.
Многие верстальщики предлагают этот способ, о чем они думают вообще?! Суть метода в том, что можно sidebar задать float шириной 300, а конент не флотать и задать ему margin-left:300px. Хороший способ и вроде бы все так хорошо получается. чесно говоря я думал что это самый отличный способ, но в этом методе есть свои подводные камни. Причины отказа от этого метода те что если вдруг мы в контенте верстаем к примеру меню с флотнутыми li либо любые другие блоки float и потом мы хотим их очистить с помощью clear:both, то нижняя граница этого блока сползает вниз на уровень нижней границы sidebar (Что и не странно так как очищается foat, можно этого избежать если флотнутому блоку задать фиксированную высоту , но это совсем не дело задавать фиксированную высоту).
3 способ.
Можно использовать для sidebar position absolute , но только в том случае если вы точно уверены что content по высоте будет больше sidebar иначе все содержимое sidebar залезит на footer(ведь аблосютное позиционирование вырывает с общего потока).
но как для меня это тоже не очень хороший способ!
4 способ.
"Отличный способ, если в нем есть какие-то недостатки прокомментируйте.Но я думаю это лучший способ."
- Плюсы этого метода: во первых в DOMe content будет идти раньше sidebara что хорошо для поисковиков.
- ничего не налазит на футер
- любые блоки можно очищать и ничего не будет слазить к нижней границе (Так мы побороли проблемы второго способа).
Вообщем как он работает: смотрим в код первым идет content за ним sidebar. задаем float этим двум блокам(естественно sidebar сползает вниз). после этого задаем sidebar свойство margin-left:-100%. отлично он вернулся на место, и делаем отступ у контента margin-lerft:300px.
html css .sidebar{
width:300px;
display: block;
float: left;
margin: 0 0 0 -100%;
}
.content{
min-width:723px;
display: block;
float: left;
margin: 0 0 0 220px;
}
Здравствуйте, уважаемые читатели блога сайт. Это скорее заметка для себя, чтобы не забыть, что именно делал, когда захочу все вернуть взад. Началось все с того, что один из читателей предложил написать про плагин для WordPress под названием Q2W3 Fixed Widget (Sticky Widget), который может сделать любой виджет в сайдбаре плавающим или, другими словами, фиксированным.
Т.е. прокручивая страницу вы увидите, что основная часть сайдбара уйдет вверх, но вот тот виджет, что будет расположен в самом низу, останется в области просмотра как бы далеко вы не продвигались вниз по тексту. Сразу оговорюсь, что размещать контекстную рекламу подобным образом запрещено и за это могут наказать (как выяснилось в комментариях — РСЯ это допускает, а Адсенс запрещает так делать).
Плагин замечательный, но виджеты у меня в теме отключены, поэтому я решил данную задачу с помощью нескольких строк джавскрипт кода, которые нашел на просторах интернета.
В итоге мое верхнее меню зафиксировано в самом верху области просмотра (по сути для этого достаточно было только CSS кода, но мы легких путей не ищем), а нижняя часть сайдбара фиксируется в верхней правой части экрана, когда вы дойдете до нее при прокрутке страницы. Будет ли от этого толк не знаю, но решение действительно простое.
Зачем фиксировать меню и делать плавающий сайдбарЗачем фиксировать верхнее меню, спросите вы? Ну, в общем-то, это небольшой эксперимент на тему улучшение . Чисто гипотетически можно предположить, что это может вызвать увеличение числа просмотренных страниц и времени проведенного пользователем на сайте.
С другой стороны, излишняя назойливость подобной фиксированной панели может вызвать негативную реакции читателей, поэтому вопрос полезности сего действа остается открытым. Надо будет посмотреть на результат после недельки использования — если меню перестанет быть фиксированным (прибитым к верхнему краю области просмотра), то значит эксперимент не удался. На всякий случай сделаю скриншот, как все это было.
Плавающий же сайдбар в WordPress делают немного по другой причине — привлечь побольше внимания к чему-либо. В принципе, здесь можете вставить и список рубрик, и список популярных или последних постов, что опять же будет пытаться служить задаче улучшения поведенческих. Но чаще всего в такой плавающий блок помещают рекламу (контекстную нельзя, как я уже упоминал), что чисто гипотетически должно повысить доход вебмастера. Посмотрим на результат через неделю.
Как зафиксировать верхнее меню в WordPressЯ же нашел для себя решение в сети. Для использования данного способа обязательно должна быть подключена библиотека jQuery. Как это сделать, подробно описывал в статье про для подгрузки контента.
Если вы помните, то в статье про оптимизацию скорости загрузки страниц нужно постараться объединить все CSS и JS в один общий (в смысле в два — один для стилей, а другой для скриптов). Вот, собственно, в такой файлик я и добавлял приведенные чуть ниже строчки кода. Хотя можно их добавить и непосредственно в Html код, окружив тегами script. Например, это можно сделать в шаблоне header.php внутри тегов head.
Реализовать фиксацию верхнего меню можно и с помощью чистого CSS — нам в помощь. Собственно, здесь тоже используется позиционирование с помощью этого CSS свойства, но так же появляется возможность начать отображать фиксированное меню не сразу, а спустя некоторое время после начала прокрутки (на определенном расстоянии от верха).
В моем случае код фиксации верхнего меню выглядит вот так:
$(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
Напоминаю, что вставить этот фрагмент кода можно в:
Теперь обратимся непосредственно к этому коду. Получается, что через 10 пикселов от верха относительное позиционирование сменяется фиксированным (см. статью по приведенной чуть выше ссылке). Если необходимо, то в строчке с else в качестве значения для top можно выбрать не ноль, и тогда фиксированное в верхней части меню будет отступать от верхнего края области просмотра на данное значение пикселов (по-моему, это лишнее).
В отличии от оригинального кода мне пришлось еще добавить width: "100%", ибо в противном случае размер меню по ширине уменьшался, что портило всю картину.
Смотрите, для наглядности я приведу Html код, с помощью которого формируется верхнее меню в моем шаблоне WordPress блога (живет он у меня в файлике header.php из ):
У вас, скорее всего, в шаблоне вывод пунктов меню будет задан с помощью, например, вот такой конструкции (функции), но это не суть важно.
Как пользоваться:
Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.
Вариант #1 (без jQuery)В сайдбар вставляем:
Прописываем стили в HTML (лучше добавить сразу в CSS):
.sticky {
position: fixed;
z-index: 101
;
}
.stop {
position: relative;
z-index: 101
;
}
Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):
(function()
{
var a =
document.querySelector("#aside1"
)
, b =
null, P =
0
; //
если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
window.addEventListener("scroll"
, Ascroll, false)
;
document.body.addEventListener("scroll"
, Ascroll, false)
;
function Ascroll()
{
if (b ==
null)
{
var Sa =
getComputedStyle(a, ""
)
, s =
""
;
for
(var i =
0
; i < Sa.length; i++)
{
if (Sa[
i]
.indexOf("box-sizing"
)
==
0
|| Sa[
i]
.indexOf("overflow"
)
==
0
|| Sa[
i]
.indexOf("width"
)
==
0
|| Sa[
i]
.indexOf("padding"
)
==
0
|| Sa[
i]
.indexOf("border"
)
==
0
|| Sa[
i]
.indexOf("outline"
)
==
0
|| Sa[
i]
.indexOf("box-shadow"
)
==
0
|| Sa[
i]
.indexOf("background"
)
==
0
)
{
s +=
Sa[
i]
+ ": "
+Sa.getPropertyValue(Sa[
i]
)
+ "; "
}
}
a.innerHTML =
""
+a.innerHTML+""
;
b =
a.children[
0
]
;
a.style
.height
=
b.getBoundingClientRect()
.height
+ "px"
;
a.style
.padding =
"0"
;
a.style
.border
=
"0"
;
}
var Ra =
a.getBoundingClientRect()
,
R =
Math.round(Ra.top + b.getBoundingClientRect()
.height
- document.querySelector("footer"
)
.getBoundingClientRect()
.top + 0
)
; //
селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round()
только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ((Ra.top - P)