Как сделать двухколоночный сайт
Делим пополам: двухколоночные сайты
Многим веб-дизайнерам довольно трудно отказаться от стандартных способов размещения контента – они привыкли к хорошо организованным столбцам и блокам, к жестким, но неплохо себя зарекомендовавшим сеткам, которые являются основой большинства современных сайтов.
Иногда основа сайта, то есть сетка, является «невидимой» и пользователь ее не считывает, а порой она предстает во всей красе, к примеру, на сайтах с плиточным дизайном. Никто не спорит, сегодня без сетки никуда, особенно она важна для информационных сайтов или блогов, однако в ряде случаев можно найти и другие способы эффективной подачи контента.
Стараясь уйти от скучного дизайна, разработчики стараются придумывать новые идеи, такие, как разделение сайта на две равные части – и такой подход выглядит довольно интересным и интригующим. Более того, двухколоночная верстка дает большие возможности для экспериментов с прокруткой и позволяет использовать силу воздействия визуального контента на полную мощность. Потенциал двухколоночных сайтов огромен, такой дизайн подойдет для множества различных проектов, но при этом очень важно сохранить структуру сайта и удержать ее от сползания в хаос.
ПРИМЕРЫ ДВУХКОЛОНОЧНЫХ САЙТОВ
Растущая популярность сайтов с двумя колонками обусловлена прежде всего тем, что они очень хорошо смотрятся на дисплеях мобильных устройств. Ведь чем проще будет «несущая конструкция», тем легче будет считывать контент. Вот несколько примеров двухколоночных сайтов, где такой подход к дизайну полностью себя оправдал.
Сайт аргентинской винодельческой компании Masi Tupungato разделен на две половины. В левой части экрана мы видим один блок, который объединяет стандартные разделы «Главная» и «О нас». В левой части мы видим изображение виноградника и хорошо заметную ссылку, кликнув по которой можно узнать историю компании и характер ее деятельности. Правая часть – это разделы, посвященные различным аспектам производства и реализации вина. Вот и вся навигация. Однако все понятно, никаких проблем у пользователя не возникает.
Очень хороший пример того, как можно представить свое портфолио без особых ухищрений и все равно оно будет очень впечатляющим. Дизайн-студия Meta решила использовать двухколоночную верстку и не прогадала. Сайт приветствует пользователя показом галереи выполненных работ, представленных таким образом, что каждый проект последовательно отображается на всех видах устройств. В левой части экрана расположена рекламная заставка, а в правой – краткая аннотация и ссылка на созданный студией сайт. Ничего лишнего, просто портфолио, которое на 100% функционально и не «грузит» пользователя лишней информацией.
Портфолио Чиата Турхана также основано на двухколоночной верстке. Фон сайта разделен на две половины, которые демонстрируют взаимосвязь дизайна и кода, без которых нельзя создать веб-сайт. То, что нужно для портфолио дизайнера. Навигация расположена вверху, а на первом плане мы видим лишь приветствие. Неплохое решение, однако огорчает то, что сайт не очень хорошо отображается на мобильных устройствах.
День Святого Валентина ассоциируется у нас с романтикой. Подарки, валентинки, коробки конфет или стихи – все это средства выразить свое отношение к любимому человеку. Видимо, в какой-то момент создателей сайта начало подташнивать от всей этой романтической чепухи и они создали сайт, где стали откровенно глумиться над любителями валентинок. Для удобства сайт разделен на две половины – одна неподвижная, а другая прокручивается. Нажав на ссылку в левой части экрана, можно просмотреть провокационный ролик, в котором высмеивается какая-нибудь из традиций Дня влюбленных. Любителям плюшевых мишек на сайт заходить не рекомендуется – там такое…
Главная страница сайта Formlets также разделена на две половины. В левой части мы видим кнопку, которая ненавязчиво призывает пользователя к действию. В правой же части расположено множество картинок с изображением улыбающихся людей. Фон создает дружественную атмосферу и мягко подводит пользователей к собственному созданию к созданию онлайн-форм. Таким образом дизайнеры позаботились о непрофессионалах, которым срочно нужна, к примеру, форма регистрации, но у них нет возможности обратиться к специалисту. Ничего страшного, говорит Formles, расслабьтесь, вы почти у цели.
Дизайнеры сайта Stolen Girlfriends Club использовали двухколоночную верстку для того, чтобы навигация по сайту была максимально простой и эффективной. Стандартная навигация на сайте имеется, но гораздо интереснее прокручивать страницу, рассматривая предметы гардероба из мужской и женской коллекций.
PAUW
ВМЕСТО ЗАКЛЮЧЕНИЯ
Современные требования к дизайну сайта очень высоки: весь контент должен быть строго организованным и визуально привлекательным. И, хотя сетка в большинстве случаев является наилучшим выбором, порой такой дизайн может быть чересчур скучным. Сайты с двумя колонками – это не новый тренд, но нельзя не заметить одну особенность. Двухколоночные сайты встречаются повсеместно, но на них как правило, одна колонка доминирует, а другая отведена под меню. В приведенных выше примерах мы видим нечто другое – экран разделен на две равных половины, каждая из которых выполняет свою функцию. Это выглядит довольно свежо и добавляет элемент необычности в дизайн пользовательского интерфейса.
Стили css и html в варианте адаптивного двухколоночного вывода статей
Сегодня мы подробнее рассмотрим, как вывести контент сайта на главной страничке в две или три колонки, соблюдая геометрию сайта на разных расширениях и типах экранов — без ошибок.
То есть закрепим посредством css все элементы сайта в строго отведённых им местах…
Тем кто не читал предыдущий пост, предлагаю вернуться, коли у вас есть желание наконец решить задачу вывода статей колоноками на своём сайте.
html вариант вывода двух колонок
Продолжим с того, что у вас в файле functions.php прописан код:
У вас условно должен работать двухколоночный вариант на home странице сайта. Сегодня рассматривавшем отработку колонок постов на главной…
Если вы желаете выводить колонки на страницах категорий, то всё делаете аналогично сегодняшней операции.
div классы для обработки кода …
Взгляните на фото (кликнете) — это индексный файл: зелёным подчёркнут оригинальный пример вывода контента статей…
Коричневым — div класс, которым вам нужно обернуть этот пример.
…всё что вам теперь требуется, так это — регулировка файла стилей.
css стили двухколоночного статейного варианта главной страницы
В этом селекторе можно задавать какие-то пользовательские значения свойств текста, например.
Теперь самое главное: будет неплохо, если вы разберётесь со своим файлом стилей подробнее. Нам потребуется так называемые …медиа-запросы css3.
Вот где-то после них и нужно добавить следующие строки, которые ниже: (пример обеспечит вывод двух колонок статей на главной странице: без ошибок и поломок колоночного отображения контента сайта при просмотре на различных расширениях экрана)
Далее вам предстоит настроить значения строки 3 под геометрику своего сайта, а именно:
max-width:590px — настройка ширины контента, после которой сайт перестраивается для правильного отображения на более мелких экранах.
Эти регулировки лучше всего выполнять браузером Mozilla Firefox, то есть путём стягивания окна браузера, отслеживая изменения адаптивной перестройки формы отображения блога.
.homm — описан выше, и селектор —
.two-column-post который у вас уже должен быть в файле стилей. О нём рассказывалось в прошлой статье (ссылка также выше).
Для чего все сегодняшние работы нужны.
Предположим, у вас, в финале контентового листа сайта, на главной странице закреплены элементы кнопок навигации, блок рекламы и социальные кнопки: следите при стягивании окна браузера, чтобы эти элементы не перемешались хаотично — к примеру, кнопки соцсетей могут уходить кверху между блоков анонсов статей. Это неправильно! …притом могут быть и иные ошибки.
В завершение можете (для закрепления безошибочного отображения) проверить свою работу на онлайн тестерах ТУТ И ТУТ
А лучше всего тестировать на реальных девайсах))))
Всё достаточно просто. В общем, нынешние регулировки значений величин легковыполнимы. Проще только приобрести шаблон.
…в принципе, после добавления сегодняшних поправок, всё должно работать правильно — пример сайта.
В следующих статьях, также будем подстраивать тонкое и правильное изящно-адаптивное отображение блога на различных экранах телефонов и ноутбуков и т.п.
полезное видео для любителей браузера Мозила)
Блочная верстка — Часть 3 — Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Тут мы начали рассматривать поэтапное создание двухколоночного макета на основе блоков. Мне кажется, что начинать изучать верстку сайта, которая основывается на использовании каскадных стилей (CSS), лучше всего именно на конкретном примере, а не со скучного рассмотрения теории.
Нет, конечно же, база знаний по стилевому оформлению тоже нужна, но эти знания будут лучше усваиваться и пониматься после того, как вы на простейшем примере увидите, как можно привязать к HTML коду CSS свойства и как с помощью них можно управлять внешним видом элементов сайта.
Верстание двухколоночного макета для сайта
Давайте вернемся к нашему макету. В самой первой статье мы даже не начали рассматривать суть, т.к. много времени ушло на обсуждение базовых вопросов верстки. Это было необходимо сделать в особенности для тех читателей, которые только начинают погружаться в вебмастеринг.
По собственному опыту знаю, что труднее всего найти ответы на простые и очевидные для большинства вопросы, но пока еще не понятные для вас. На форумах вас игнорируют, а в статьях опускаются эти моменты, как само собой разумеющееся.
Поэтому, если для вас еще не все встало на свои места в вопросах верстки, то пробегите по диагонали первую статью из этой серии. Во второй мы уже непосредственно приступили к верстанию, хотя в начале я опять же сделал отступление на тему, что такое корневая папка и как ее отыскать на своем хостинге (см. по приведенной чуть вше ссылке).
Итак, мы прописали в нашем еще пустом файле Index.html базовые элементы (body, мета теги и т.п.), а так же код всех нужных нам блоков, которые будут формировать макет сайта.
Затем мы прописали в наш еще пустой файл таблиц каскадных стилей Style.css первые CSS свойства, в том числе мы задали фиксированную ширину нашему макету и выровняли его по центру относительно краев экрана.
Мы так же учли возможность использования старых версий браузеров, например, в Internet Explorer 5. Затем мы раскрасили для наглядности в разные цвета все v блоки, из которых состоит наш двухколоночный макет, а так же ограничили ширину левой колонки (в ней обычно располагается меню).
Ну, и в конце предыдущей статьи мы задали в файле CSS обтекание блока левой колонки другими контейнерами, расположенными ниже в HTML коде файла Index.html (в нашем случае это «Содержимое страниц (контент)» и «Подвал (футер)»).
После всех этих действий мы получили:
При этом файл Index.html содержал:
А в файл Style.css было прописано:
Давайте сравним полученный результат с тем, что должно было получиться:
Некоторые доработки
Вроде бы макеты похожи, но есть одна неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину. Это одна проблема.
Но кроме этого существует и другая проблема. Если мы добавим текста в Div Content (содержимое статьи):
То может возникнуть такая ситуация с макетом:
Т.е. содержимое контейнера Content занимает все свободное место под закончившимся Left. Это происходит из-за того, что включено обтекание Div Left всеми другими блоками, расположенными ниже его в HTML коде, но после того, как Left заканчивается, все последующие контейнеры начинают уже прижиматься к левому краю.
Нас такая ситуация с Content не устраивает, поэтому во избежании этого мы зададим для этого контейнера фиксированный отступ слева (от края макета) равный ширине блока Left (левой колонки).
Таким образом мы сможем добиться желаемого взаимного расположения блоков Left и Content в не зависимости от соотношения высот этих контейнеров. Для этого нам нужно будет дописать для Content (в нашем файле Style.css) еще одно CSS свойство, задающее отступ слева (margin-left — тут про отступы и рамки в CSS читайте подробнее):
Т.к. ширину левой колонки (Left) мы ранее задали в 200px, то и отступ слева для Content мы зададим таким же, даже можно сделать его на несколько пикселей больше, чтобы между блоками появилось небольшое расстояние.
Весь код файла Style.css теперь будет выглядеть так:
А наш макет на Div верстке примет вид:
Теперь давайте смоделируем ситуацию с существенным увеличением высоты блока Left (левой колонки):
Из рисунка видно, что при увеличении высоты левой колонки, подвал (Footer) начинает ее обтекать, т.к. в Style.css для блока Left задано обтекание с помощью свойства float:left.
В следствии этого все Div контейнеры, расположенные в HTML коде ниже Left, начинают его обтекать и наш Footer не является исключением. А это нас совсем не устраивает, ибо он должен всегда располагаться ниже всех других блоков нашего двухколоночного макета. Надо это исправить.
Для этого мы отменим обтекание блоком Footer контейнера Left. Как это сделать? Нужно дописать специальное свойство для Footer в Style.css: clear:both (здесь читайте про обтекание в CSS).
Это свойство позволит расположить Footer ниже всех плавающих блоков, т.е. тех, которым задано свойство Float (обтекание справа или слева). Тем самым мы опустим подвал в самый низ нашего макета.
Style.css теперь будет выглядеть так:
А сам двухколоночный макет на блочной верстке получит футер (подвал), соответствующий всем требованиям:
А наш макет с колонкой меню, расположенной справа, будет выглядеть так:
Создаем трехколоночный макет на основе 2-х колоночного
Вернем все к виду, когда блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно лишь добавить один дополнительный Div-контейнер в файл Index.html после кода, описывающего Left.
Назовем его незамысловато — Right. C учетом этого нового Div, код примет вид:
В содержимое контейнера Right я добавил небольшое количество текста, чтобы этот блок имел сравнимый с Left и Content размер по высоте. Теперь нужно написать отдельное правило в файле каскадных таблиц стилей Style.css для четкого позиционирования Right, относительно других контейнеров нашего трехколоночного макета сайта:
Свойством width:200px (тут читайте про задание ширины и высоты в CSS) мы задает ширину блока Right равной 200 пикселей, а свойством background-color:#FFFF00 (читайте про задание фона в CSS, а тут про коды цвета в Html ) подцвечиваем фон контейнера Right для большей наглядности.
Ну, а свойство float:right позволяет прижать Right к правой стороне и при этом все следующие за ним в коде Div будут обтекать его слева (обтекать его будет только Content, т.к. Footer у нас настроен так, что он лежит ниже всех плавающий блоков).
Но этого еще не достаточно. В начале статьи мы решали проблему залезания содержимого Div Content под закончившийся блок Left. Для того, чтобы сразу же избежать подобной проблемы и с Right, мы зададим в CSS для Content не только отступ слева на ширину Left, но и отступ справа на ширину Right:
Окончательный вариант нашего Style.css для трехколоночного макета будет такой:
А сам макет сайта, сверстанный на Div, будет выглядеть так:
Преобразуем фиксированный макет в резиновый
Двухколоночный и трехколоночный макеты, которые мы научились создавать в этой серии статей, относятся к так называемым фиксированным, т.к. их ширина не зависит от разрешения экрана пользователя, просматривающего сайт. Но существует и другой тип, который называется резиновым. В этом случае макет сайта на блочной верстке будет занимать всю ширину экрана пользователя.
Если разрешение экрана у него будет по ширине 800 пикселей, то и макет резинового сайта будет равен по ширине 800 пикселей, а если разрешение будет 1920 пикселей, то и шаблон растянется на всю ширину такого экрана.
В некоторых случаях использование резинового варианта может быть оправдано и поэтому стоит остановиться на том, как из обычного макета фиксированной ширины сделать резиновый. Хотя, в принципе, тут все очень просто.
Резиновый вариант будет выглядеть примерно так:
Решение проблем для старых браузеров
На первый взгляд все вроде бы хорошо, но если попробовать уменьшать окно браузера, то в определенный момент произойдет наезд одних блоков на другие, что приведет к полному развалу дизайна (говорят еще — поехала верстка).
Но эту неприятность тоже довольно легко можно нейтрализовать. Достаточно лишь задать для контейнера, в котором находится резиновый макет (в нашем случае это Maket), с помощью специального CSS свойства минимально возможную ширину, до которой можно уменьшать его размер.
После достижения этой минимальной ширины макет как бы перестанет быть резиновым и не будет изменяться по ширине при дальнейшем уменьшении окна браузера.
Это свойство выглядит так:
Цифра 600 пикселей в данном случае задает минимальную ширину резинового шаблона, после которой его размер перестанет изменяться. При уменьшении окна браузера ниже этой минимальной ширины, часть его просто перестанет быть видной:
Теперь ваш задача сводиться к тому, чтобы при ширине в 600 пикселей ваш сайт не перекосило, ну а при больших разрешениях этого уж точно не произойдет. Но опять же имеется одно «но», и опять это «но» связано с всеми нами любимым браузером Internet Explorer 6.
Еще достаточно много пользователей используют этого троглодита, который, несмотря на предпринятые нами меры, все равно не будет замечать ограничения минимальной ширины резинового макета и упрямо ломать дизайн.
Для того, чтобы побороть этот косяк резинового шаблона в Internet Explorer 6, существует целый ряд так называемых хаков, которые позволяют обойти это ограничение.
Я приведу здесь один из самых стабильных хаков, который не вызывает подвисания браузеров и прочих неприятностей. Он заключается в том, что CSS свойство width:100% для блока Maket мы заменим специальным кодом:
В четырех местах этого кода прописана цифра 600, которая и задает минимальную ширину резинового макета. Вы можете заменить эту цифру на ту, которую считаете оптимальной. Окончательный вид Style.css будет такой:
Читайте окончание эпопеи в следующей статье. Можете также посмотреть видео «Верстка резинового сайта на div-ах»:
Буду признателен, если воспользуетесь кнопочками: