Как сделать сайдбар справа от контента css
Перейти к содержимому

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

  • автор:

Как сделать два sidebar-а.

придетсья немного ручками поработать, так как изначально один сайдбар, создавайте новый блок(можно плагином можно руками), через style.css позиционируйте его, опять же через style.css делайте #content ширину которую нужно. #sidebar делайте ширину которую нужно, и своему новому блоку делайте ширину которую нужно (предположим вы его назвали #sidebar1)ну и потом уже добавляйте в ваш новый блок слева нужную информацию.

  • SergiO
  • 15 августа 2010, 12:41
  • 0
  • k2fl
  • 16 августа 2010, 09:45
  • 0

в style.css добавь

#leftbar

потом в header перед

style="width:100%;"> 

далее создай файл leftbar.tpl и туда пиши что хочешь

  • B1gBosss
  • 16 августа 2010, 13:22
  • 0

header.tpl

  • B1gBosss
  • 16 августа 2010, 13:22
  • 0

Сделал по инструкции. Ничего не получилось…
Порядок действий:
1. Скопировал файл sidebar.tpl, переименовал его в leftbar.tpl
2. Удалил из него код, вместо удаленного написал

 3. В style.css в строке 47, после #content и #sidebar добавил
#leftbar

изминил во всех сторчках ширину 20% левый сайдбар, 20% правый, 60% — контент.
4. В header перед

style="width:100%;">

Результат:
второго сайдбара не появилось, а слово «test» отобразилось в правой верхней части над контентом.
Пожалуйста, кто знает, разъясните, что не так и как правильно сделать два сайдбара.

  • mel767676
  • 1 октября 2010, 02:11
  • 0

слово test слева над контентам, а не справа, попутал))

  • mel767676
  • 1 октября 2010, 02:14
  • 0

Сделал.
Напутал в css)))
нужно просто прописать в style.css, например:

 #sidebar #content #leftbar
  • mel767676
  • 1 октября 2010, 16:41
  • 0

Покажите, что получилось…

  • daglex
  • 1 октября 2010, 17:07
  • 0

Сейчас сайт в разработке — в локале на денвере, нечего еще показывать. А так — аналогичный сайдбар слева. А если в вышеуказанном коде css поиграть c float, заменив left на right, то сайдбары меняются местами. Сложности были с тем, изначально, что в дефолтном шаблоне стили для контента и сайдбара прописаны следующим образом:

 #content < width: 67%; background: #fff; float: right; clear: right; padding-top: 20px; padding-bottom: 20px; zoom: 1; >#sidebar

из-за этого новый сайдбар смещался.
Все это было заменено на

#sidebar #content #leftbar

В общем-то и все. Ну и не забываем сделать пустой файл leftbar.tpl и добавить строчку в header.tpl — об этом написано выше.
Еще нюанс: если файл leftbar.tpl совсем пустой, то он и не отображается. Пропишите там какой-нибудь текст (код я сам еще не вставлял) и этот текст чудненько отобразиться в новом сайдбаре.

  • mel767676
  • 2 октября 2010, 13:36
  • 0

Назрел новый вопрос.
Кто знает — напишите, плиз.
Два сайдбара сделано, а вот как разделить блоки, чтобы, например, блок «блоги» размещался в одном сайдбаре, а блок «прямой эфир» и «теги» размещался в другом.
И главное.
Нужно чтобы при использовании плагина «aceblockmanager» блоки, которые выводятся плагином выводились в одном сайдбаре, а блоки «прямой эфир», «теги» и «блоги» в другом.

  • mel767676
  • 5 октября 2010, 02:25
  • 0

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

  • Vilz
  • 5 октября 2010, 13:52
  • 0

Спасибо. Супер. То, что надо. Сейчас буду делать. Что получится — отпишусь здесь.

  • mel767676
  • 5 октября 2010, 14:02
  • 0

В шаблоном simple не получается создать левый sidebar.
grid.css

#content < width: 730px; float: left;>#sidebar < width: 230px; float: left;>#leftbar

Вот что в итоге

Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "C:\apache\localhost\www/templates/skin/simple\header.tpl" on line 70 " " - Unexpected ".", expected one of: ">" , " "' in C:\apache\localhost\www\engine\lib\external\Smarty\libs\sysplugins\smarty_internal_templatecompilerbase.php:439 Stack trace: #0 C:\apache\localhost\www\engine\lib\external\Smarty\libs\sysplugins\smarty_internal_templateparser.php(2889): Smarty_Internal_TemplateCompilerBase->trigger_template_error() #1 C:\apache\localhost\www\engine\lib\external\Smarty\libs\sysplugins\smarty_internal_templateparser.php(2954): Smarty_Internal_Templateparser->yy_syntax_error(56, '.') #2 C:\apache\localhost\www\engine\lib\external\Smarty\libs\sysplugins\smarty_internal_smartytemplatecompiler.php(51): Smarty_Internal_Templateparser->doParse(56, '.') #3 C:\apache\localhost\www\engine\lib\external\Smarty\libs\sysplugins\smarty_internal_templatecompilerbase. in C:\apache\localhost\www\engine\lib\external\Smarty\libs\sysplugins\smarty_internal_templatecompilerbase.php on line 439
  • Allaur
  • 29 июля 2012, 12:16
  • 0

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
© Powered by LiveStreet CMS

xeoart

Design by xeoart

Как разместить сайдбары с помощью float?

Нужно разместить сайдбары по бокам от контента с помощью float. Сайдбары имеют фиксированную ширину, а контент должен занимать все оставшееся место. При попытке задать левому сайдбару float: left, а правому сайдбару float:right контент позиционируется правее левого сайдбара и занимает всю оставшуюся ширину, а правый сайдбар он сдвигает вниз.

* html, body html main main:before, main:after < content:''; display:block; width:190px; height:100%; position:absolute; top:0; background:#ffffff;; z-index:1; >main:before main:after header, footer, aside, nav main, header, nav, article, aside, footer < border:none; >header < height:50px; background:#000000; >nav < height:50px; display: inline-block; >ul.menu-list < display: inline-block; >ul.menu-list li < display: inline-block; margin: 5px; width: 90px; background:red; border-right: 1px solid white; text-align:center; >ul.menu-list a < text-decoration: none; color:white; font-size:16px; >.logo < display:inline-block; height:100%; vertical-align:middle; margin-right: 20px; margin-left:20px; >footer < height:70px; background:#000000; clear: both; margin-top:-70px; >aside < position: relative; min-height: 20px; width:190px; background:#ffffff; >#left-aside #right-aside article < background:#696969; overflow:hidden; >article p < color:black; font-size: 20px; font-weight:600; >article img < width:100%; height:150px; >#content-after < height:70px; width:100%; >header h1, footer a

Съешь пельмешОК и будет в твоей жизни все ОК!

Адрес: Университет "МГУ", 1 корпус, 1 этаж, слева от входа

Отслеживать
123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков
задан 30 ноя 2021 в 15:59
11 3 3 бронзовых знака

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

30 ноя 2021 в 16:02

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Поменяй их местами в разметке.

.left, main, .right < background: silver; padding: .5em; >.left < float: left; width: 10em; margin-right: 1em; >.right < float: right; width: 10em; margin-left: 1em; >main
  
Нужно разместить сайдбары по бокам от контента с помощью float. Сайдбары имеют фиксированную ширину, а контент должен занимать все оставшееся место. При попытке задать левому сайдбару float: left, а правому сайдбару float:right контент позиционируется правее левого сайдбара и занимает всю оставшуюся ширину, а правый садбар он сдвигает вниз.

Сначала контент, потом sidebar. На всю ширину и высоту браузера

Итак, шаблон — три колонки. Один сайдбар постоянной ширины для навигации, другой для, скажем, объявлений Google или фотографий Flickr — центр для основного контента. Это обыкновенное расположение блоков для большинства сайтов и блогов, но с некоторыми отличиями от стандарта кода:

  • Боковые колонки имеют постоянный размер, а центральная растягивается между ними на весь экран
  • Центральная колонка расположена первой в коде
  • Все блоки равной высоты на весь экран
  • Минимум хаков под старые версии

Мы имеем стандартный шаблон со следующим кодом, но первым блоком контейнера идет центр:

LC width — ширина левого блока
RC width — ширина правого блока

body min-width: 550px;> /* 2x LC width + RC width */
#container padding-left: 200px; /* LC width */
padding-right: 150px;> /* RC width */
#container .column position: relative;
float: left;>
#center width: 100%;>
#left width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;>
#right width: 150px; /* RC width */
margin-right: -150px;> /* RC width */
#footer clear: both;>
/*** IE6 Fix ***/
* html #left left: 150px;> /* RC width */

1. Создадим фреймы

Для начала пропишем дивы шапки сайта, контейнер для основной начинки и подвал для различной информации:

Для блока контейнера выставляем отступы от краев, чтобы потом в них поместить сайдбары:

#container padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
>

На картинке это выглядит следующим образом:

2. Добавление колонок

Теперь добавим колонки к существующему коду:

И отредактируем стили. Выставим ширину и позиционирование. Также добавим очищение позиционирования для подвала чтобы сохранить стилистику:

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

3. Расстановка боковых колонок по местам

Осталось только расставить колонки таким образом, чтобы они выстроились в линию с отступами контейнера. Колонка центра начинается там, где это должна быть, следовательно мы сосредоточимся на левой колонке. Для установки левой колонки налево мы выставим отрицательный левый margin для левой колонки размером с центральную колонку:

#left width: 200px; /* LC width */
margin-left: -100%;>

Теперь левая колонка накладывается на колонку центра, по ее левому краю и выглядит это так:

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

#container .columns float: left;
position: relative;>
#left width: 200px; /* LC width */
margin-left: -100%;
right: 200px;> /* LC width */

4. Устанавливаем правую колонку на место.

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

#right width: 150px; /* RC width */
margin-right: -150px;> /* RC width */

Теперь все колонки на своих местах, выстроены в линию и выглядит это так:

5. Немного улучшим дизайн.

Если размер окна браузера не на полный экран то центр сужается до непонятного размера и может быть вообще меньше боковых колонок. Чтобы это предотвратить зададим минимальную ширину блока равную сумме двойной ширины левой колонки и правой колонки. в IE6 эта функция к сожалению не работает…

body /* 2x LC width + RC width */

Но мы используем хак для совместимости с IE6

Отступы внутри sidebar…

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

LC fullwidth — padding — Полная ширина левой колонки без отступа.
LC fullwidth — полная ширина левой колонки.

#left width: 180px; /* LC fullwidth — padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
>

Отступы центра требует немного большей изобретательности. Отступы центра плюс ширина 100 % заставляет колонку центра расширяться вне своей ширины контейнера. Чтобы вернуть это место назад, нужно увеличить край общей суммой отступов. Это гарантирует, что колонка центра будет такого же размера как нам нужно. Сделаем отступ с каждой стороны по 10px+10px=20px, также по 10px+10px от центрального блока до сайдбаров. Итого 40px. Отступы снизу и сверху ставятся без проблем любого размера.

body min-width: 630px;> /* 2x (LC fullwidth + CC padding) + RC fullwidth */
#container padding-left: 200px; /* LC fullwidth */
padding-right: 190px;> /* RC fullwidth + CC padding */
#container .column position: relative;
float: left;>
#center padding: 10px 20px; /* CC padding */
width: 100%;>
#left width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;>
#right width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px;> /* RC fullwidth + CC padding */
#footer clear: both;>

/*** IE Fix ***/
* html #left left: 150px;> /* RC fullwidth */

Блоки div одинаковой высоты

Высоту блоков я выставляю через фикс отступов. Главное чтобы Х не был равен реальной высоте страницы.

#container overflow: hidden;>
#container .column padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px;> /* X */
#footer

Если понадобится какое-то хитрое позиционирование внутри подвала лучше использовать div внутри дива:

Например чтобы подвал растянулся по низу:

* html body < overflow: hidden;>
* html #footer-wrapper float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;>

Рассказать:

Похожие статьи:

  • Создание двух-колоночного макета на дивах. Блочная верстка…
  • Comments.php создание своей страницы комментариев wordpress
  • Запуск элементов Панели управления из командной строки
  • Unable to post message to…
  • Публикация ссылок и другой информации в ВКонтакте
  • Шаблон страницы html5

Как прижать колонку к левой стороне сайта?

Есть колонка с контентом справа и сайдбар слева. Подскажите, как мне сайдбар прижать к левому краю так, чтобы он стал резиновым и не залезал на другие блоки, которые есть на сайте (шапка и подвал).
https://jsfiddle.net/vLa5097c/6/
Всем спасибо за ответы))

  • Вопрос задан более трёх лет назад
  • 225 просмотров

4 комментария

Простой 4 комментария

SmthTo

Rustam Bainazarov @SmthTo Куратор тега CSS

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

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