Как добавить второй контейнер в Дизайн 1321?

голоса: 0

Здравствуйте, заранее благодарю тех кто как-либо поможет мне. 

Появилась необходимость в добавлении "контейнеров" с обоих сторон.

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

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

Адрес сайта http://v-meste.ru.com/
| Автор: | Категория: Дизайн сайта

Ответов: 1

Голоса: +1
 
Лучший ответ
Добавить то можно, но вы должны понимать, если добавить сейчас второй, адаптивность всего сайта из-за него будет сломана так как чтобы все было адаптивно и с вторым контейнером, нужно писать дополнительные стили.
| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
Я понимаю, и всё таки, как это сделать?
Alexej Baryshev,
Ожидайте, чуть позже опишу по пунктах.
Yuri_Geruk,
Можно еще спросить, где изменяется ширина самих контейнеров? Т.е. сделать из поуже.
Alexej Baryshev,

1. Переходим в глобальные блоки - http://v-meste.ru.com/panel/?a=gblocks жмем кнопку Добавить блок в название пишем - DRIGHTER, создаем, блок создан. Добавьте для примера чтобы видеть результат в него один блок друзья скопировав с первого контейнера.

2. Установка. Перейдите в шаблон Редактор страниц - Страницы сайта, находим код:

 $GLOBAL_CLEFTER$
 </div>
 </aside>

заменим его на:

</div>
 $GLOBAL_CLEFTER$
 </div>
 <div id="sidebar-left">$GLOBAL_DRIGHTER$</div>   
 </aside>

3. Стили. В таблицу стилей пропишем:

#sidebar-left {float:left;width: 20%;background:#fff;position: absolute;}

Далее стили в строке 119:

#content {float:left;width:72%; background:#fff;padding:20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

заменить на:

#content {float:left;width: 47%;margin-left: 290px;background:#fff;padding:20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

почти готово, размер блока регулируйте выше в значении 20% правый контейнер регулируем в стилях в строке 79:

#sidebar {float:right;width:26%; background:#fff;}

регулируя значение 26.

4. Ширину центрального контейнера регулируйте выше в стилях в значении 47% а степень сдвига центрального контейнера регулируем в значении margin-left: 290px; в общем настраивайте и подстраивайте как вам нужно.

...