Как сделать сайдбар справа от контента css

Оформляем область контента с помощью стилей CSS

Сегодня с помощью стилей CSS выполним оформление остальных элементов области контента, таких как блок основного содержания и сайдбар. Делать это будем, как и в предыдущих случаях, с использованием техники резиновой верстки.

Содержание

  • Размещение блоков основного содержания и сайдбара
  • Формирование внутренних элементов блока основного содержания
  • Оформление текста блока основного содержания
  • Оформление элементов сайдбара
  • Исходные файлы сайта

Размещение блоков основного содержания и сайдбара

Ранее мы определились со способом верстки, который будем применять для блоков основного содержания и сайдбара. Это построение блочной структуры с использованием техники позиционирования.

Ниже приведен HTML-код этой части HTML-страницы, где видно, что для размещения данных блоков предусмотрен контейнер <div> с классом content-block .

<div class = "content-block" >

<main> Основное содержание </main>

<aside"> Сайдбар </aside>

В первую очередь определим ширину области контента и ее основных элементов. Эти размеры рассчитаем в процентном соотношении к родительским элементам. Что касается сайдбара, то в соответствии с установленными требованиями он имеет фиксированные размеры (ширина 240pх, высота 760pх).

Расчет области контента выполним аналогично расчету блока ротатора следующим образом: 1200px — 2 * 100px / 1200px * 100% = 83.33%

Теперь определим внешний отступ вправо для блока основного содержания.

Как указывалось ранее при пояснении метода резиновой верстки в статье Делаем разметку области контента с использованием резиновой верстки, суть такого приема в том, что блоку основного содержания ( <main> ), имеющему переменную ширину будет отведена вся область контента за исключением той части, на которой будет находиться сайдбар ( <aside> ).

Поэтому, для того, чтобы это сделать, мы назначим блоку <main> внешний отступ вправо margin-right величиной в 280pх, где 240pх — ширина блока <aside> , 40pх — отступ между блоками.

Кроме того, блоку основного содержания зададим цвет фона, который в соответствии с дизайн-макетом имеет значение "fbfbfb".

На основании полученных значений, с учетом фиксированных размеров садбара, назначим соответствующие свойства CSS.

width :83.33%;

margin :30px auto 0 auto;

margin-right :280px;

background :#fbfbfb;

width :240px;

В CSS-коде можно увидеть, что расположение содержимого области контента <div> с классом content-block по центру страницы выполнено с использованием свойства margin со значением auto с правой и левой стороны. Этим же свойством область контента смещена вниз от ротатора на 30px.

Обновив браузер можно увидеть какие произошли изменения по сравнению с предыдущим состоянием.

Оформление контента сайта, картинка 1

Рис.3 Вид области контента в предыдущем состоянии

Оформление контента сайта, картинка 2

Рис.4 Вид области контента после внесения изменений

Как видно, вся область контента расположилась по центру, а блок основного содержания за счет внешнего отступа освободил с правой стороны свободное место для сайдбара. Сайдбар пока на этом этапе по-прежнему располагается внизу, но все его содержимое теперь стало ограничиваться установленной шириной в 240px.

Теперь все подготовлено, для того, чтобы сайдбар переместить на предназначенное ему место справа от блока основного содержания. Для этого назначим относительное позиционирование для блока <main> и абсолютное позиционирование для <aside> .

Следует отметить, что относительное позиционирование для контейнера <div> с классом content-block задается для того, чтобы привязать к нему блок <aside> . В противном случае при абсолютном позиционировании блок <aside> будет смещен не к верхнему правому углу родительского элемента, а к крайним границам веб-страницы.

Кроме этого, зададим контейнеру <div> с классом content-block минимальную высоту, равную высоте сайдбара в 760px. Это необходимо предусмотреть для того, чтобы исключить перекрытие футером сайдбара в тех случая, когда высота блока основного содержания может оказаться меньше высоты сайдбара.

В результате код примет следующий вид.

min-height :760px;

width :83.33%;

margin :30px auto 0 auto;

position :relative;

margin-right :280px;

background :#fbfbfb;

width :240px;

position :absolute; top:0; right:0;

Обновив страницу можно увидеть ее измененный вид. Причем для проверки отработки резиновой верстки можно сжать и растянуть страницу в браузере до граничных пределов ее диапазона, соответствующих разрешениям экрана в 1000pх и 1600pх, как показано на скриншотах ниже.

Оформление контента сайта, картинка 3

Рис.6 Вид страницы при разрешении экрана в 1600pх

Оформление контента сайта, картинка 4

Рис.7 Вид страницы при разрешении экрана в 1000pх

Как видно, мы выполнили требование по размещению блоков области контента в соответствии с дизайн-макетом, расположив их в один ряд в две колонки. Также убедились, что резиновая верстка в нашем случае в полной мере отражает свое предназначение.

После этого можем приступить к оформлению внешнего вида элементов контента.

Формирование внутренних элементов блока основного содержания

В соответствии с дизайн-макетом блок основного содержания состоит из текстовой части статьи, образованной блоком <div> с классом article и разделом комментариев — <div> с классом comments . Для того, чтобы их сформировать определим необходимые размеры отступов.

Сначала определим внутренние отступы padding для всего блока <main> :

  • отступы по вертикали — 10px;
  • отступы по горизонтали в процентном соотношении от ширины области контента составят 2% (20px / 1000 px * 100%)

Затем определим внешние отступы внутренних блоков, которые будут задавать расстояния между ними. Исходя из дизайн-макета они будут иметь значение margin-bottom для каждого по 20px .

Дополнительно к этому зададим им небольшую минимальную высоту в размере 100px. Это желательно сделать на случай отсутствия на какой-нибудь из страниц достаточного объема текста для этих элементов.

Также для сглаживания границ блока основного содержания <main> с общим фоном страницы назначим для него свойства тени и закругления углов таким же образом, как мы это делали при оформлении ротатора.

После указанных дополнений CSS-код этой части примет следующий вид.

min-height :760px;

width :83.33%;

margin :30px auto 0 auto;

position :relative;

margin-right :280px;

background :#fbfbfb;

padding :10px 2%;

border-radius :0px 0px 60px 0px #fff;

box-shadow :0px 0px 60px 0px #fff;

.article, .comments <

min-height :100px;

margin-bottom :20px;

width :240px;

position :absolute; top:0; right:0;

После обновления браузера можно увидеть соответствующие изменения в этой части страницы.

Оформление контента сайта, картинка 5

Из скриншота видно, что блоки приобрели нужные отступы, внешнюю тень и закругления углов, и теперь осталось только должным образом оформить текст.

Оформление текста блока основного содержания

Сначала определим в соответствии с дизайн-макетом основные свойства текста.

Как получить данные о тексте неоднократно было показано ранее, поэтому ниже приведены уже полученные значения.

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль — стандартный (курсивный, жирный);
  • размер шрифта — 1.125em (18px);
  • цвет — "bd072e".
  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль — стандартный (не курсивный, нежирный);
  • верхний внутренний отступ — 0.5% (5px / 1000 px * 100%);
  • размер абзаца — 2% (20px / 1000 px * 100%);
  • размер шрифта- 1.0em (16px);
  • цвет — "2f2f49".

Для линий <hr> определим следующие свойства:

  • толщину — 1px;
  • цвет — "bd072e".
  • внешний отступ вверх — 5px, вниз — 10px.

С учетом этого CSS-код примет следующий вид.

min-height :760px;

width :83.33%;

margin :30px auto 0 auto;

position :relative;

margin-right :280px;

background :#fbfbfb;

padding :10px 2%;

.article, .comments <

min-height :200px;

margin-bottom :20px;

width :240px;

position :absolute; top:0; right:0;

main h1, main h2, main h3 <

font-size :1.125em;

font-weight :bold;

font-style :italic;

color :#bd072e;

text-indent :2%;

padding-top :0.5%;

color :#2f2f49;

height :1px;

background :#bd072e;

margin :5px 0px 10px 0px;

box-shadow :0px 0px 1px 0px #bd072e;

width :240px;

position :absolute; top:0; right:0;

Если обновить браузер, то можно проверить как преобразился текст.

Оформление контента сайта, картинка 6

Как видно, теперь текст основного содержания приобрел вид по образцу дизайн-макета. На этом оформление этого элемента можно закончить и перейти к сайдбару.

Оформление элементов сайдбара

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

В соответствии с дизайн-макетом сайдбар состоит из трех отдельных элементов <div> с классами: блок поиска с классом seach , блок подписки — subscribe и баннер — banner .

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

Для одинаковых свойств можно образовать три группы элементов, объединив их следующим образом:

1. Для блоков поиска и подписки:

  • аналогично, как и ранее для ротатора, для придания элементам эффекта выпуклости назначаются свойства линейного градиента и бордюров;
  • для придания границ внутреннему содержимому назначаются свойства внутренних отступов с одинаковыми для всех значениями — 5px по вертикали, 20px по горизонтали;
  • одинаковый для всех элементов размер шрифта со значением 0.9375em (15px);
  • одинаковый для всех элементов цвет шрифта со значением "212a68";
  • одинаковый для всех элементов межстрочный интервал со значением 0.8;

2. Для всех элементов сайдбара для их выделения на общем фоне и сглаживания углов формируется обводка с использованием свойств тени и бордюров таким же образом, как это делалось ранее для блока ротатора.

3. Для блоков подписки и баннера для создания необходимых отступов между блоками по вертикали назначаются соответствующие свойства внешних отступов в верхней части элементов.

Из индивидуальных параметров можно отметить блок баннера. Ввиду того, что в данном случае в качестве баннера используется простая картинка, то, для обеспечения его нужных размеров требуется назначения отдельных свойств для элемента <img> таких, как:

  • высота — 340px;
  • ширина — 240px;

Высоту блоков поиска и подписки мы назначать не будем, так как их размеры в дальнейшем будут заданы их внутренним содержимым.

После внесения указанных свойств в таблицу стилей в части, касающейся сайдбара, CSS-код примет следующий вид.

width :240px;

position :absolute; top:0; right:0;

.seach, .subscribe <

background-image :linear-gradient(to top, #ccc 0%, #e9e9e9 6%, #eee 12%, #eee 88%, #f7f7f7 96%, #fafafa 100%);

border-top :1px solid #dedede;

padding :5px 20px;

font-size :0.9375em;

color :#212a68;

line-height :0.8;

.seach, .subscribe, .banner <

border-radius :10px;

box-shadow :0px 0px 60px 0px #fff;

.subscribe, .banner <

margin-top :15px;

border-top :1px solid #dedede;

height :340px;

width :240px;

После обновления браузера можно увидеть как изменился вид элементов сайдбара.

Оформление контента сайта, картинка 101

Видно, что элементы сайдбара приняли очертания, схожие с дизайн-макетом, и теперь осталось привести в порядок в основном только элементы форм блоков поиска и подписки.

Если посмотреть на дизайн макет, то можно увидеть, что достаточно большое количество свойств внутренних элементов этих блоков имеют одинаковые значения, например:

Для всех элементов select и input высота составляет 30px.

Для элементов select, input[name="word"], input[name="mode"], input[name="name"], input[name="email"] такие одинаковые значения, как:

  • внешних и внутренних отступов;
  • фон полей ввода;
  • параметры бордюров и теней.

И таким образом, можно сформировать несколько групп с одинаковыми свойствами, как мы это сделали в предыдущем примере при формировании элементов сайдбара.

Мы здесь не будем подробно перечислять все свойства, которые следует назначить элементам форм. Все это делается аналогично тому, как это уже не раз показывалось. И тем более, количество свойств для этих элементов значительное, и это заняло бы достаточно большое время. Если, кому потребуется более детальное пояснение этой части, напишите, и вполне возможно, что можно будет рассмотреть это в отдельной статье.

А пока не будем останавливаться и перейдем непосредственно к CSS-коду и далее поближе рассмотрим только те свойства, которые действительно сейчас требуют пояснения.

select, input <

height :30px;

select, input[name="word"], input[name="mode"], input[name="name"], input[name="email"] <

margin :9px 0 10px 0;

padding :5px 8px 0 8px;

box-sizing :border-box;

background :#fdfadc;

box-shadow :3px 3px 5px 0px #8b8e8d inset;

border-radius :5px;

border-bottom :2px solid #fff;

border-right :2px solid #fff;

input[name="word"], input[name="name"], input[name="email"] <

width :200px;

padding :5px 8px 0 8px;

width :125px;

padding :5px 0 0 5px;

height :30px;

margin-bottom :10px;

border-radius :5px;

background :#a76d6d;

text-align :center;

font-weight :bold;

width :60px;

margin-top :9px;

width :120px;

margin-top :5px;

Здесь следует отметить свойство box-sizing , назначенное для элементов select и input в 7-ой строке.

Это свойство позволяет учитывать в заданных ширине и высоте элементов назначаемые внутренние отступы. И таким образом отпадает необходимость проводить вычисления области содержимого с учетом всех параметров. При назначении такого свойства надо только указать размеры элемента. Более подробно познакомиться с этим полезным свойством можно на странице справочника "Puzzleweb" по ссылке "http://www.puzzleweb.ru/css/pr_box-sizing.php" .

Обновим страницу и посмотрим какие произошли изменения в формах сайдбара.

Оформление контента сайта, картинка 102

Из полученного результата можно отметить, что осталось устранить только три несоответствия, а именно:

  • Выравнить кнопку "Поиск" с ближайшим полем ввода и сместить ее к правому краю. Это можно достигнуть, присвоив этим элементам свойство float . Причем кнопку нужно сместить в правую сторону, а поле ввода направить в левую. Кроме этого в родительском элементе нудно назначить свойство overflow для того, чтобы плавающие элементы учитывались при вычислении его высоты.
  • Сместить к правому краю кнопку "Подписаться". Это решается аналогичным образом, как в предыдущем примере с кнопкой "Поиск".
  • Для заголовков сделать необходимые отступы, выравнить их и назначить соответствующие шрифты в соответствии с дизайн-макетом. Это делается аналогичным образом, как и в предыдущих случаях.

Внеся дополнения в части, касающихся указанных элементов получим следующий вид таблицы стилей CSS

.seach, .subscribe <

background-image :linear-gradient(to top, #ccc 0%, #e9e9e9 6%, #eee 12%, #eee 88%, #f7f7f7 96%, #fafafa 100%);

border-top :1px solid #dedede;

padding :5px 20px;

font-size :0.9375em;

color :#212a68;

line-height :0.8;

overflow :hidden;

text-align :center;

font-size :1.125em;

font-weight :bold;

padding-top :10px;

margin-bottom :15px;

width :125px;

padding :5px 0 0 5px;

float :letft;

height :30px;

margin-bottom :10px;

border-radius :5px;

background :#a76d6d;

text-align :center;

font-weight :bold;

float :right;

Последние изменения элементов сайдбара показаны на скриншоте ниже.

Оформление контента сайта, картинка 103

Как можно заметить, вид элементов сайдбара стал полностью соответствовать дизайн-макету. И таким образом мы почти закончили верстку главной страницы. Общий вид полученной страницы после сделанных в этой статье дополнений можно увидеть в заголовке статьи.

Почему здесь сказано почти? Дело в том, что, хотя на макете этого не видно, но в реальной жизни кнопки обычно меняют свой внешний вид в зависимости от состояния. Поэтому мы дальше и приведем наши кнопки к такому виду, при котором они будут отражать пассивное состояние, активное (наведен курсор) и нажатое (удерживаемая кнопкой мышки).

Но, объем материала, к сожалению, не позволяет рассмотреть этот вопрос в данной статье. Поэтому мы обязательно сделаем это в следующий раз, прежде чем начнем создавать из нашей главной страницы с помощью языка РНР динамический сайт. Также в следующей статье мы сделаем проверку нашего кода на валидность по HTML и CSS чтобы убедиться в его корректности.

Исходные файлы сайта

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов .

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Как изменить расположение сайдбара в WordPress

Недавно один из наших читателей спросил как можно изменить расположение сайдбара в теме WordPress. Такой вопрос часто возникает у пользователей, когда появляется необходимость переместить сайдбар слева направо, или наоборот. В этой статье мы покажем вам как изменить расположение сайдбара в WordPress.

sidebarsidewp[1]

Зачем изменять расположение сайдбара в WordPress

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

Многие сайты WordPress используют типовую структуру блога с двумя столбцами. Одна для контента, а вторая &#8212; для сайдбара.

sidebaronleft[1]

Если вы только начинаете создавать сайт, тогда стоит выбрать тему WordPress, которая располагает сайдбаром с нужной вам стороны.

Многие темы содержат настройки, позволяющие переключать расположение сайдбаров. Однако, если же в вашей теме нет такой опции, тогда вам придется изменять сайдбар вручную.

Давайте же посмотрим как можно легко изменить местоположение сайдбара в WordPress с помощью небольших кусочков CSS кода.

Изменяем расположение сайдбара в WordPress с помощью CSS

Прежде чем вносить изменения в свою тему, вам следует создать дочернюю тему. Ее наличие поможет вам обновлять свой родительский шаблон без потери изменений.

Во-вторых, всегда стоит создавать резервную копию своего WordPress сайта до внесения изменений в текущую тему.

Вам потребуется FTP клиент для редактирования файлов.

Подключаемся к своему WordPress сайту с помощью FTP клиента и переходим в папку темы. Обычно она расположена по адресу:

Теперь вам потребуется скачать и открыть свой файл таблицы стилей в текстовом редакторе. Этот файл называется style.css и расположен в корне папки с темой.

Внутри этого файла находим CSS класс своего сайдбара. Обычно это .sidebar. В нашем примере мы будем использовать дефолтную тему WordPress Twenty Fifteen, в которой есть такой CSS для определения сайдбара:

Как вы видите, код прижимаем сайдбар к левой стороне с отступом -100% справа. Мы изменим float на right и margin-left вот таким образом:

Сохраните свои изменения и загрузите файл style.css обратно на свой сайт с помощью FTP клиента. Теперь перейдите на свой сайт, он будет выглядеть вот так:

movingcontentside[1]

Так произошло потому, что мы переместили сайдбар, но не переместили область контента. Twenty Fifteen использует следующий класс CSS для определения позиции области контента.

Мы изменим его так, чтобы поместить контент справа. Вот так:

А вот как будет выглядеть наш сайт после применения изменений.

cssissues[1]

Как вы видите, мы поменяли расположение как для области контента, так и области сайдбара. Однако, все равно остался какой-то белый блок слева.

Вам придется сталкиваться с подобными вещами при работе с CSS. Придется провести немного исследовательской работы, чтобы выяснить, что вызывает проблему и как ее исправить.

Используем встроенный в браузер инструмент Инспектор элементов для просмотра исходного кода. Наведите мышь на нужную область в браузере, сделайте правый клик мышей и выберите соответствующий пункт.

inspecttool[1]

По мере движения мыши по исходному коду, вы заметите, что выбранные области подсвечиваются в живом предпросмотре. В панели справа вы увидите CSS, используемый для выбранного элемента.

Мы выяснили, что этот CSS в нашей таблице требует доработки.

Этот CSS код добавляет пустой блок контента шириной 29.4118% и высотой 100% справа вверху. Вот как мы переместим его в правую сторону.

После сохранения и загрузки таблицы стилей обратно на сервер наш сайт будет выглядеть вот так:

sidebarmoved[1]

Мы надеемся, что эта статья помогла вам изменить расположение сайдбара в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Как опустить сайдбар под контент?

Здравствуйте. Есть такая простенькая тема WP https://wp-themes.com/burger-factory/. Почему-то сайдбар в мобильной версии отображается вверху, а не внизу, под контентом. Подскажите, как можно убрать сайдбар со всем его содержимым под контент в мобильной версии?

Меняем местами элементы

прописываем в стилях первому float:right;

Меняем местами элементы, добавляем float:left

P.S. Может это и не мое дело, но лучше использовать flex-box, а не float

В данном случае, рабочий вариант таков, что нужно переместить весь сайдбар в правую сторону, тогда на мобильной верстке сначала будет идти контент, потом сайдбар
Сейчас так:

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *