пятница, 26 декабря 2008 г.

Технический вопрос - как сделать, чтобы блог был шириной на весь экран

Существует два основных стандарта верстки сайтов:
1. Фиксированная щирина сайта - когда на любом экране сайт занимает одинаковый размер. Этот стандарт распространен на западе.
2. Резиновая верстка - когда сайт "разъезжается" на всю ширину экрана. Этот стандарт распространен в России.
В блогах, как вы видите, по умолчанию работает стандарт "фиксированная ширина". Впрочем, это легко исправить.

Зайдите в Настройки->Макет->Изменить HTML

Если сделать поиск по тексту слова "width:", то в результате можно найти 4-5 надисей типа:
max-width:700px;
width:670px;
width:360px;
width:240px;

и т.п.

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

Можно указать не в пикселях, а в процентах - и тогда размер блога станет не фиксированным, а "плавающим", подстраивающемя под ширину экрана.

Алгоритм:
1. Заходим на страницу Настройки->Макет->Изменить HTML

2. Сделайте поиску по тексту "width:". Найти все надписи "width:" и "max-width:". Иногда еще попадается border-width - но это нам не нужно.
Поиск делается через меню Правка->Найти

3. Выписать все ширины в столбик. Например:
700px
670px
360px
240px
- если такие ширины встречаются в блоге.

4. Нужно перевести пикселы в проценты. Для этого мы берем наибольшую ширину и делим каждую строчку столбика на нее. Например:
Максимальная ширина - 700
700: 700/700=1=100%
670: 670/700=0,95=95%
360: 360/700=0,51=51%
240: 240/700=0,34=34%
Посчитать можно при помощи калькулятора.

5. Еще раз делаем поиск по тексту поиску слова "width:". На этот раз заменяем пикселы на проценты.
Было 700px заменяем на 100%.
Было 670px заменяем на 95%.
и т.д.

6. Сохраняем изменения шаблона.

Все. Теперь ваш блог будет растягиваться на всю ширину экрана.

6 комментариев:

  1. у меня не получилось :(

    Точнее получилось, но криво - половина странички тала такой как надо, зато вторую половину здорово переклинило...

    То ли у меня ручки кривенькие, то ли у автора шаблона...

    ОтветитьУдалить
  2. Ирис, пришли мне код шаблона. Лучше через ЛС на Мозаике.

    ОтветитьУдалить
  3. Сережа :-))) Ты - просто умница! :-))

    ОтветитьУдалить
  4. А как поместить на верх блога картинку? У всех такой красивый дизайн...

    ОтветитьУдалить
  5. Алина, нажмите на кнопку "Настроить" (в самом верху) перейдите на вкладку Макет->Элементы страницы. Там можно поиграть с блоками блога. Например, заменить текстовую шапку графической. Или добавить на страницу какие-то текстовые или графические элементы.

    ОтветитьУдалить