Блог по ширине экрана

А можете на примере показать как это будет выглядеть? Сколько процентов ставить? Хочу сделать по ширине экрана, так как сделано на voffka.com

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

Помогите с CSS :)

С год назад сделал резину для http://narodlink.ru
Могу сбросить css-ки от темы,  blog.css, main.css - если есть желание посмотреть что и как правил.
Что именно не помню, т.к. давно было :(

Отправил на мыло

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

видимо без изучения css тут не обойтись :о)
чтож.. приступаю к изучению

Кое-что вспомнил, отписал и выложил css-ки здесь: Блог по ширине экрана для Movable Type

Остальное в личку :)

1. По default ширина страницы Movable Type равна 940px. Это значение задано в файле /var/www/html/mt-static/themes-base/blog.css. Там же, в  секциях

/* Wide-Thin-Thin */
   .layout-wtt . . .
. . .
/* Thin-Wide-Thin */
.layout-twt . . .
. . .
/* Wide-Thin */
.layout-wt . .
. . .
/* Thin-Wide */
.layout-tw . . .
. . .
задаются характеристики для каждого типа расположения полей шаблонов.

Итак, для того, чтобы развернуть страницу блога на весь экран нужно в файле blog.css в секции /* Layout для описания #container-inner установить width: 100% вместо 940px.

2. Также необходимо проверить, что в файле screen.css (или <имя-темы>.css) выбранной темы (ищем в mt-static/themes, или mt-static/support/themes) нет жестко заданных значений размера порядка 900px (например, 940px, 842px или 900px). Если найдены, заменяем их на пропорциональные значения в процентах принимая 940px за 97%. Например, 900px = 93%, 842px =  87% и т.д.
Перед внесением изменений полезно сделать копию исходника.

3. По ширине экрана все поля могут меняться пропорционально или размеры некоторых полей могут быть фиксированными.

Наиболее популярными являются шаблоны WTT и TWT. На их примере рассмотрим принцип изменения свойств шаблона.

Для изменения свойств шаблона заходим в MT под административной учеткой. В меню: Дизайн->Шаблоны, на странице в секции "Индексные шаблоны" выбираем "Таблица стилей".
После второй строчки начинающейся с @import пишем переопределения полей соответствующих шаблонов:
     3.1 Например, если для шаблона TWT хотим тонкие поля оставить фиксированного размера, а широкое поле сделать "резиновым", то пишем следующие переопределения:

.layout-twt #alpha {
    width: auto;
    left: 190px;
    margin-right: 380px;
}
.layout-twt #beta {
    border: 1px solid #CCC;
    width: 190px;
    position: absolute;
    left: 5px;
}
.layout-twt #gamma {
    border: 1px solid #CCC;
    width: 190px;
    position: absolute;
    right: 5px;
}

Жмен "Сохранить и опубликовать". Проверяем результат работы.
     
     3.2. Если хотим, например, для шаблона WTT все поля сделать "резиновыми", то пишем следующие переопределения:

.layout-wtt #alpha {
    width: 70%;
}

.layout-wtt #beta {
    left: 15%;
    width: 15%;
}

.layout-wtt #gamma {
    right: 15%;
    width: 15%;
}

Жмен "Сохранить и опубликовать". Проверяем результат работы.

3.3. После того, как результат проделанной работы по "обрезиниванию" шаблона нас полностью удовлетворил, есть смысл перенести полученные переопределения в соответствующие секции файла blog.css. Это связано с тем, что при смене стиля блога или типа расположения полей шаблона изменения внесенные нами в "Таблицу стилей" обнуляются.

4. Если хотим убрать/изменить цветные полосы вдоль края, то открываем screen.css выбранной темы (ищем в mt-static/themes, или mt-static/support/themes). Находим секцию /* Widget , в ней редактируем строку, соответствующую типу нашего шаблона. Например, строку:

.layout-wtt #content-inner { background: transparent url(content-wtt.gif) repeat-y scroll right top; }

редактируем так:

.layout-wtt #content-inner { }

или заменяем default-ный на свой gif.

;)

3. Для изменения цветовой схемы редактируем все тот же screen.css

У стандартных шаблонов типа WTT и TWT есть общий глюк:
если в результате поиска слово не найдено, то "подвал" лезет "на уши". Для илюстрации этого можно зайти на http://llandryn.net/blog/ и в поиске задать какое-нибудь русское слово. :)

Как с этим бороться пока не знаю. :(

marlik,
Ваш вариант не "резиновый", т.к. размеры столбцов не изменяются с изменением размера окна браузера. ;)

Вам надо поиграть со значениями relative и absolute и все будет отлично как здесь http://webmaster.blogsite.org/ сделал на основе minimalist-red