Двухколонная верстка (фиксированный sidebar и резиновый контент). Двухколонная верстка (фиксированный sidebar и резиновый контент) Исходный вариант, когда ничего не плавает
Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. В широкой колонке располагается контент, а в узкой, называемой ещё на жаргоне веб-разработчиков сайдбар (от англ. sidebar, боковая панель) навигация. Впрочем, ничего не мешает сделать колонки одинаковой ширины, если это продиктовано дизайном. На рис. 5.11 представлен макет, состоящий из двух колонок, в правой колонке расположена навигация, а в левой контент.
Рис. 5.11. Двухколоночный макет
Из-за того, что ширина всех колонок известна заранее, в силу того, что мы имеем дело с фиксированным макетом, существует несколько способов формирования колонок. Общий принцип у них такой. Слои с колонками располагаются в контейнере, назовём его layout , для которого устанавливается ширина макета и выравнивание по центру.
Колонка 1 Колонка 2
Будем придерживаться соглашения, что слой sidebar формирует боковую панель с навигацией, а content основное содержание страницы (контент).
Навигация слеваПервый способ формирования колонок основан на позиционировании. Для слоя layout задаём относительное позиционирование, а для внутренних слоёв абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left и top (пример 5.3).
Пример 5.3. Использование позиционирования
Layout { width: 980px; margin: auto; position: relative; /* Относительное позиционирование */ } .sidebar, .content { position: absolute; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ } .content { background: #F4ECCE; /* Цвет фона */ left: 180px; /* Сдвиг вправо */ width: 800px; /* Ширина колонки */ }
По умолчанию у свойства left значение 0, так что для sidebar это свойство не установлено. У абсолютно позиционированных элементов ширина равна ширине контента, так что значение width требуется указывать для каждого слоя.
Приведённый способ имеет то преимущество, что для него не играет большой роли порядок слоёв в коде. Можно с лёгкостью поменять их местами, на отображении колонок это не скажется.
Колонка 2 Колонка 1
Более простой стиль получается при использовании свойства float со значением left , которое задано для слоя sidebar . Но чтобы получилась не обтекаемая врезка, а подобие колонки, для слоя content также требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её (пример 5.4).
Пример 5.4. Использование float
Layout { width: 980px; margin: auto; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: left; /* Обтекание справа */ } .content { background: #F4ECCE; /* Цвет фона */ margin-left: 180px; /* Отступ слева */ }
Как вариант, можно убрать свойство margin-left , а для формирования колонок добавить к layout свойство overflow с значением auto или hidden .
Навигация справаПриведённые выше стили для создания навигации слева могут быть легко изменены и под навигацию справа. В действительности, разница между колонками только в их ширине и цвете фона. Изменив размеры, связанные с шириной и поменяв местами фон, получим результат, когда навигация уже расположена справа. В примере 5.5 показана модификация кода из примера 5.3.
Пример 5.5. Использование позиционирования
Layout { width: 980px; margin: auto; position: relative; } .sidebar, .content { position: absolute; } .content { background: #F4ECCE; /* Цвет фона */ width: 800px; /* Ширина колонки */ } .sidebar { background: #C6DD7D; /* Цвет фона */ left: 800px; /* Сдвиг вправо */ width: 180px; /* Ширина колонки */ }
При позиционировании возможны проблемы с наложением подвала (при его наличии) на другие элементы. Этот вопрос рассмотрен в разделе, посвященном резиновым трёхколоночным макетам.
Аналогичное действие можно провести и с примером, в котором фигурирует свойство margin-left . Но в данном случае удобнее использовать свойство float со значением right . Также margin-left поменяется на margin-right (пример 5.6).
Пример 5.6. Использование float
Layout { width: 980px; margin: auto; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: right; /* Обтекание слева */ } .content { background: #F4ECCE; /* Цвет фона */ margin-right: 180px; /* Отступ справа */ }
Стили для колонок не учитывают некоторых вещей, которые часто присутствуют на реальных сайтах. В частности, не указаны поля, поэтому текст вплотную прилегает к краю колонок. Добавление свойства padding при заданном width расширяет ширину элемента, поэтому необходимо уменьшить значение width на величину полей или добавить вложенный элемент с полями или отступами.
В примере 5.7 рассмотрен код, в котором навигация расположена в правой колонке, также присутствует подвал, и учитываются поля.
Пример 5.7. Двухколоночный макет
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Двухколоночный макет BODY { background: #fff1e4; margin: 0; } .layout { width: 970px; margin: 0 auto 10px; background: #fff; } .content { margin-right: 350px; padding: 10px; } .sidebar { width: 320px; float: right; background: #e0ecb8; } .footer { clear: both; /* Отмена обтекания */ border-top: 1px solid #ccc; padding: 10px; }
- Главная
- Все коктейли
- Коллекции
- Бокалы
- Компоненты
- Фичи
Яблочный эг-ног
Молоко - 40 мл, сок яблочный - 100 мл, сироп сахарный - 30 мм, один яичный желток.
Приготовить напиток в миксере, подать в бокале хайбол со льдом и соломинкой.
Приготовление коктейлейРезультат данного примера показан на рис. 5.12.
Рис. 5.12. Двухколоночный макет
Для слоя content поля включаются через свойство padding , но поскольку ширина слоя не указана, то поля никак на неё не повлияют. В слое sidebar вставлен список, у которого отступы установлены по умолчанию, поэтому никакого «налипания» текста на край фона нет. К подвалу (слой footer ) добавляется свойство clear , которое отменяет действие float . Оно требуется на тот случай, когда высота навигации превышает высоту контента, чтобы текст не накладывался на подвал.
Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS.
В чем его особенность – при прокрутке сайдбар прилипает к верхней части окна, но при этом, когда сайдбар прокручивается до футера, тогда он отлипает от верхней части экрана и прилипает своей нижней частью к футеру, тем самым не перекрывая собой футер (футер должен быть высоким). Если вы понимаете, о чем я.
Пример взят с какого-то сайта и он очень примитивный (и устаревший морально), подходит только для данной верстки. Более универсальный код можно посмотреть в этой статье и уже самостоятельно писать свой код под свой проект.
HTML-разметка простой страницы HEADER CONTENT FIXED SIDEBAR FOOTER CSS-стили для блоков контента .header { width: 100%; background: purple; height: 80px; } .content { width: 80%; background: blue; height: 800px; float: left; } .sidebar { width: 20%; background: green; height: 100px; float: right; } .sidebar.fixed { position: fixed; right: 50%; margin-right: -50%; } .footer { width: 100%; background: gray; height: 500px; clear: both; } JS-скрипт для фиксированного сайдбара при прокрутке страницыНе забываем подключить jQuery
$(function() { var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height(); var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) { $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) { var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); } $sidebar.css("top", $topPosition); }); });
Здравствуйте, сегодня мы поговорим с вами о том, как создать собственную навигационную панель для сайта. Она используется практически на каждом интернет-ресурсе, поэтому каждый разработчик должен уметь создавать данный элемент.
Пояснения к статье:В этой статье будут показаны различные способы создания навигационных панелей, как вручную, так и с помощью специальных сайт-конструкторов. В нашем примере используется WordPress.
Как сделать сайдбар вручную? CSS & HTMLСейчас мы покажем традиционный способ разработки, а именно написание кода в текстовом редакторе. Для этого вам нужно открыть HTML и CSS документы в кодовом редакторе.
Создание сайдбара с правой стороны. HTML & CSSЧаще всего навигационная панель располагается либо в шапке сайта, либо же в его правой части. Во втором случае обычно используется 2-х колоночный макет.
Хорошо если заранее есть готовый макет, так как вам известна ширина навигационного блока. Если же макет отсутствует, то это не помешает разработке.
Внимание! При создании сайдбаров и остальных элементов сайта заранее подготавливайте готовый макет. Ориентируясь на него вы упростите процесс разработки.
Навигационную панель можно создавать с помощью списков и обычных блоков. Если используете списки, отключайте им свойство "text-decoration".
В нашем примере используется конструкция из блоков div.
Для начала создаем общий блок div, в котором будут располагаться колонки. Создадим для него какой-нибудь класс, в нашем примере используется класс layout, но это особо не влияет на процесс разработки.
Главный блок будет использоваться для создания позиционирования, а также для определения размеров.
Для начала определимся с позиционированием. Для общего контейнера задаем относительное позиционирование — свойство {position: relative}. Для колонок задается свойство {position: absolute}.
При использовании такого типа вам будет легче располагать колонки внутри блока. Для этого мы будем использовать свойства перемещения: , , и .
В нашем примере код выглядит вот так:
HTML
Test Page
Колонка 1
Колонка 2
Скопировать
CSS
Layout {
position: relative;
background: rgba(119, 115, 115, 0.58);
}Sidebar , .content { position: absolute ; }
Sidebar {
background: #C6DD7D;
Content {
background: #F4ECCE;
Скопировать
Внимание! Обязательно указывайте ширину для каждого отдельного пункта навигации. Дело в том, что они имеют абсолютное позиционирование, а значит их ширина будет равна ширине внутреннего контента.
Также хотим отметить, что в , сначала размещается вторая колонка, а потом уже первая. При использовании данного способа это не имеет значение, так как колонки с легкостью можно поменять местами.
Можно также использовать свойство float, для того. Этот способ намного проще, так как базируется на обтекании элементов. Благодаря ему наш sidebat будет располагаться с правой стороны.
Создание навигационной панели с правой стороны. HTML & CSS
Для создания такой панели можно использовать ту же разметку, что и в первом примере. В CSS код также не нужно вносить особых изменений.
Вам нужно внести небольшие корректировки в ваш CSS код. Это нужно для того, чтобы меню располагалось с правой стороны. Свойства ширины и позиционирования не меняем!
Как создать sidebar в WordPress?
Теперь давайте рассмотрим способ, который сильно отличается от предыдущего. Отличие в том, что вы сможете создать более качественную навигацию практически не используя CSS и HTML код.
Вам не нужно будет писать весь код вручную, вся работа будет происходить в самом конструкторе.
При использовании WordPress вам нужно будет зарегистрировать навигационную панель и добавить к ней несколько виджетов.
Для того чтобы зарегистрировать sidebar в WordPress нужно будет записать несколько функций в PHP файлов. В основном вам потребуются массивы с данными, которые будут ссылаться на виджеты и их теги div.
В нашем примере рассмотрен правый сайдбар, а также sidebar футера.
Пару слов о webixЕсть ещё один специальный фреймворк, который позволит вам создать данный сайдбар. Его главным преимуществом является то, что он позволит вам сделать хорошую панель написав всего несколько строк кода.
Для начала вам нужно скачать этот фреймворк. После этого указать ссылки на его стили и скрипты в вашем HTML документе.
После этого вы можете приступать к созданию сайдбара. Для его размещения во фреймворке присутствует специальная функция — view. Которая и будет размещать за размещение элементов.
Минусом данного фреймворка является ограниченность. При его использовании вы не сможете создать по-настоящему уникальное творение, так как панель ограничивается не вашей фантазией, а всего лишь парой функций.
ЗаключениеВ этой статье мы рассмотрели несколько основных способов создания навигационной панели, но их гораздо большее количество. Вы можете даже придумать собственный способ, основываясь на наших наработках.
В данных примерах была показана простейшая навигационная панель. Если немного поработать с исходным кодом, то можно получить настоящий шедевр.
Теги:Какие требования к макету:
- Резиновый двухколонный макет
- 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 из ):
У вас, скорее всего, в шаблоне вывод пунктов меню будет задан с помощью, например, вот такой конструкции (функции), но это не суть важно.
-
Обратите внимание, что если в коде, заключенном в echo "" , будут встречаться одиночные кавычки, то их нужно будет экранировать , т.е. поставить перед каждой из них обратный слеш (\") без скобок, естественно.
В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
WebPoint PRO - адаптивная тема для WordPress с широким функционалом и грамотной технической поисковой оптимизацией
Share42 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)
