понедельник, 18 января 2010 г.

Колонка слева, колонка справа

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


Сам метод создания 3-колоночного шаблона для Blogger приведен в этой статье: Третья колонка в шаблоне. Из него и буду исходить.



Колонка между основным и боковым блоками


Фактически это пример из исходной статьи (ссылка выше).


3 колонки в Blogger. МеждуТретья колонка между основным блоком и сайдбаром
Демо

Фрагмент кода шаблона с дополнительным блоком


<!-- Блок основного содержания -->
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
</b:section>
</div>

<!-- Блок боковой панели -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<!-- Виджеты боковой панели у всех разные -->
</b:section>
</div>

<!-- Блок дополнительной боковой панели -->
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

<div class='clear'>&#160;</div>

Стили CSS дополнительного блока


#sidebar2-wrapper {
width: 170px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Третья колонка слева


3-я колонка слеваТретья колонка в шаблоне слева
Демо

Для того, чтобы третья (дополнительная) колонка располагалась в шаблоне слева, нужно:


  1. Вставить код дополнительного блока перед блоком основного содержания:

    Фрагмент кода шаблона с дополнительным блоком слева


    <!-- Блок дополнительной боковой панели -->
    <div id='sidebar2-wrapper'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>
    </div>

    <!-- Блок основного содержания -->
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
    </div>

    <!-- Блок боковой панели -->
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
    </b:section>
    </div>

    <div class='clear'>&#160;</div>


  2. В свойствах стилей дополнительного блока задать выравнивание по левому краю.

    Стили CSS дополнительного блока. Положение слева.


    #sidebar2-wrapper {
    width: 170px;
    float: left;
    word-wrap: break-word;
    overflow: hidden;
    }

Третья колонка справа


3-я колонка справаТретья колонка в шаблоне справа
Демо

Чтобы разместить третью колонку в шаблоне справа:


  1. Вставь код дополнительного блока после блока основного содержания, перед блоком боковой панели:

    Фрагмент кода шаблона с дополнительным блоком справа


    <!-- Блок основного содержания -->
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
    </div>

    <!-- Блок дополнительной боковой панели -->
    <div id='sidebar2-wrapper'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>
    </div>

    <!-- Блок боковой панели -->
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
    </b:section>
    </div>

    <div class='clear'>&#160;</div>


  2. В свойствах стилей дополнительного блока задать выравнивание по правому краю.

    Стили CSS дополнительного блока. Положение справа.


    #sidebar2-wrapper {
    width: 170px;
    float: right;
    word-wrap: break-word;
    overflow: hidden;
    }

Таким образом дополнительную, третью колонку в шаблоне Blogger можно размещать где угодно на странице.


P.S. Спасибо Александру и Елене за вопрос.


© 2010 dotrb.blogspot.com

20 Комментариев :

LynxBIT комментирует...

Пробую сейчас, но ничего не выходит (((
даже не знаю что и делать....

Croaker комментирует...

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

Admin комментирует...

Все разобрался, спасибо огромное!

Люц комментирует...

Croaker, какой посоветуешь шаблон для издевательств? или лучше качать что-нибудь ещё более нулёвое. . . самый максимально-пустой минимум возможного текста в шаблоне (+ хтя бы 1 колонка)?

Croaker комментирует...

Admin, пожалуйста! Заходи еще ;).

Люц, судя по скриншотам и тестовым площадкам, я люблю использовать стандартный шаблон Minima. И это действительно так! :) Очень понятный и «легкий» шаблон абсолютно без каких-либо графических элементов.

Единственное, что раздражает в этом шаблоне – это экранная типографика. Текст дикими заглавными буквами в стиле «ЙА БЛОНДИНКО!», ссылки без подчеркивания и т.п. Но это довольно просто поправимо. Еще ширину шаблона я задаю до 1000 пикселей.

Кстати, текущий дизайн блога был сделан на базе все той же «Минимы».

Люц комментирует...

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

Молох Темный комментирует...

Извиняюсь,Все сделал как вы указали слева появились гаджеты а справо не видно
http://s005.radikal.ru/i209/1002/b5/f020090940df.jpg
http://s001.radikal.ru/i194/1002/de/9e6b05005d5c.jpg

Молох Темный комментирует...

Не получилось!!!
http://s43.radikal.ru/i100/1002/be/d51e49c2bd4d.jpg
Подскажите как исправить!!!

Croaker комментирует...

Первые два скриншота – просто жесть! :)))

На третьем уже что-то более похожее на нужное. Просто все три колонки не умещаются по ширине страницы.

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

Как ни странно, но первый вариант оказывается проще.

Молох Темный комментирует...

А как увеличить ширину страницу Блога???

Croaker комментирует...

Добавил краткую инструкцию Ширина шаблона Blogger на примере шаблона “Minima”.

Молох Темный комментирует...

СПАСИБО!!!

Unknown комментирует...

Блог из трёх колонок, сделала по вашим рекомендациям, только вот маленькая проблемка((
Помогите пожалуйста, что сделать, чтобы сообщения в левой колонке боковой были бы не в притык к основным сообщениям? Т. е. блог с основными сообщениями надо мне сместить чуток вправо. Чтобы он был чётко посерёдке и не с чем не был бы впритык. Возможно как то исправить? по размерам у меня всё ок даже запасик небольшой есть.

Croaker комментирует...

Valentinochka, для левой колонки нужно задать отступ справа (с помощью CSS).

То есть: для блока #sidebar2-wrapper добавить правило margin-right:1em;

Стили для блока будут выглядеть так:
#sidebar2-wrapper {
float:left;
margin-right:1em;
overflow:hidden;
width:210px;
word-wrap:break-word;
}

Дмитрий Михайлов (Кеус) комментирует...

Отличная статья, всё понятно и легко. Спасибо.

Unknown комментирует...

Croaker, спасибо, огромное. Давно все сделала, все получилось)))

Dimasssik комментирует...

Croaker красава! спс помог выставить размер между колонок! спс admin за твои труды! ;)

Ingward комментирует...

Croaker, привет. Подскажи, пожалуйста, по CSS..
Сверстал трёхколоночный сайт и возникла проблема: при расширении монитора в 1024 px сайт нормально вписывается в экран, а при 1280 px уменьшается, съезжая влево.. То, что уменьшается, это понятно - я жёстко задал ширину (иначе вёрстка плывёт в некоторых местах при разных расширениях монитора), но никак не пойму, почему он съезжает влево, а не по центру, как у тебя, например..
Вот адрес: stanko-center.com.ua - посмотри, будь добр, когда будет время.. А то я уже без понятия, где искать причину.. :/ Огромное спасибо заранее!

Croaker комментирует...

Привет, Ingward. Чтобы отцентрировать сайт, обрати внимание на теги body и div "outer-wrapper" в шаблоне этого блога.

А вообще скоро будет небольшая статья на тему.

Croaker комментирует...

А вот и ссылка: Выравнивание по центру.

Отправить комментарий

Жги!