Из ВК

17 августа 2007

резиновый blogspot

рассмотрим на примере шаблона "Minima" как растянуть свой блог по ширине окна браузера. думаю все заметили, что при хорошем (читай - большом) разрешении экрана странновато смотрятся шаблоны блогов шириной в 700 пикселей. эдакая ленточка по центру, или ещё хуже - с левого края. для того чтоб сделать все цивильно мы применим технологию "резиновой вёрстки", собсна идея которой спёрнута с webmascon.ru. "а в чём сосна заковыка-то?" - спросите Вы. и правильно сделаете! заковыка в том, что ежели задать блокам (блок основного текста и правый сервисный блок "sidebar") размер в процентах, то на большом разрешении наш сайдбар будет неприлично широк, а инфы в нем от этого не добавится. вот чтобы этого не происходило нужно сделать сайдбар фиксированой ширины, а основной блок - плавающим. т.е. чтоб он автоматом заполнял остаток пространства слева от сайдбара. если вас это заинтересовало - продолжим!

знач так. напоминаю! мы используем шаблон "Minima". окрываем "Настроить/Шаблон/изменить HTML" галочку "Расширить шаблоны виджета" ставить не надо! (а то запаритесь искать чё-где). далее:
1. правим #outer-wrapper (обертка для всего содержимого блога) до ширины 100%

#outer-wrapper {
width: 100%;
text-align:left;
font: $bodyfont;
}


2. аналогично поступаем с #main-wrapper (обертка для основного содержимого, того что будет левее сайдбара). ну ещё я убрал из него padding (на ваше усмотрение). но самый главный нюнс - margin-right: -220px! отрицательное поле шириной в сайдбар позволяет этому самому сайдбару втиснуться между основным содержимым и правым краем браузера. word-wrap и overflow удаляем, т.к. в нашем варианте они абсолютно недееспособны (текст все равно будет залазить на сайдбар) вместо них мы сделаем по другому, позже...

#main-wrapper {
width: 100%;
float: left;
margin-right: -220px;
text-align: justify;
}


3. меняем #sidebar-wrapper, из него также удаляем word-wrap и overflow и всё (если я не ошибаюсь больше в нём ничего и небыло)

#sidebar-wrapper {
width: 220px;
float: right;
}


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

4. создаём вспомогательный тип - #main-content-wrapper вот так:

#main-content-wrapper {
margin-right: 240px;
}


это уменьшит такой блок на 240 пикселей справа. а блоком этим и будет наше содержимое блога. в принципе можно ставить и 220 пикселей, но тогда буквы будут прилипать вплотную к сайдбару, а это не айс. осталось только этот блок создать в теле блога:

5. находим <div id='main-wrapper'> и сразу за ним ставляем <div id='main-content-wrapper'>, а перед закрвающим этот блок </div> добавляем ещё один. вот как это у меня:

<div id='main-wrapper'>
<div id='main-content-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
</b:section>
</div>
</div>


теперь всё в порядке :)