
Как быть? Как растянуть наш блог на всю ширину окна браузера, но при этом угодить всей читательской аудитории, имеющей различные технические возможности? Об этом мы и поговорим в этой статье.
Метод, о котором я хочу вам рассказать в простонародье зовется резиновым. Суть его в том, что вместо постоянных величин - в нашем случае пикселей, мы будем использовать относительные - проценты. Благодаря этому, браузер сам оценивает ширину окна, принимая ее равной 100%, а потом обсчитывает размер остальных элементов, заданных в процентах, уже относительно этой ширины. Меняем ширину окна - браузер мгновенно снова все пересчитывает и размеры вновь подгоняются под изменившиеся условия.

Прежде всего откройте Дизайнер шаблонов Blogger (Дизайн->Дизайнер шаблонов) и в блоке "Регулировка ширины" задайте оптимальные параметры. Четко определитесь с шириной боковых панелей, поскольку для них мы оставим статичные, жестко заданные размеры. И определитесь с общей шириной блога - этот параметр нам потребуется, чтобы установить минимальные границы нашего дизайна, меньше которых блог, при уменьшении размера окна, схлопываться не будет. Последнее нужно для того, чтобы при критическом уменьшении размера окна наш дизайн не перекосило.
Итак, теперь откройте редактор шаблона (Дизайн->Изменить HTML) и найдите следующий код:
.content-outer, .content-fauxcolumn-outer, .region-inner { min-width: $(content.width); max-width: $(content.width); _width: $(content.width); }Подсвеченную третью строку мы немного видоизменим. Вместо значения $(content.width) мы пропишем 100%. Если вы хотите, чтоб интерфейс вашего блога был растянут на меньшее значение, то просто замените цифру 100 на ту, что вам больше нравится.
Мы почти достигли поставленной задачи - растянуть интерфейс нашего ресурса на всю ширину окна. Остались небольшие полосы справа и слева от ленты блога. Но тут способы избавиться от них разнятся - все зависит от типа шаблона, который вы используете в качестве основы. Ниже представлен способ, действенный для шаблонов, основой которым служит тема "Простая" из Дизайнера шаблонов Blogger.
Ищем следующий код и удаляем из него подсвеченную строку:
body { font: $(body.font); color: $(body.text.color); background: $(body.background); padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); $(body.background.override) }
Вуаля! Наш блог растянут на всю ширину окна и сам подстраиваемся под его размер :-)
Не помогло(
ОтветитьУдалитьМожно чуть больше конкретики? Что именно не сработало?
УдалитьНа ресурсе, что у Вас в профиле значится, я вижу следующее:
[q].content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: 1000px;
min-width: 1000px;
}[/q]
То есть Вы изменений, что описаны в статье, не произвели.
Давно об этом мечтала!
ОтветитьУдалитьСделала!
Правда, не знаю как проверить, но мне кажется, что работает...[img]http://r11.imgfast.net/users/1111/19/40/96/smiles/1853893524.gif[/img]
Спасибо!
В первых двух блогах, что у Вас в профиле, эта или ей подобная методика явно реализована. В третьем - нет ;-)
УдалитьУ меня вопрос.
УдалитьНа этом блоге реализована, описанная в Посте технология или нет ?
Дело в том, что у меня при просмотре Вашего блога используется
горизонтальная прокрутка страницы, что для меня создает неудобства.
На своем Блоге, я бы хотел бы избежать горизонтального скроллинга
у пользователей с разными техническими возможностями. Для чего я
понимаю жесткое задание ширины поста недопустимо.
А чтобы оценить возможность использования Ваших кодов, хочу знать
ответ : использована ли эта технология на Вашем Блоге ?
Это не претензия. Это вопрос. Спасибо за Ваш комментарий
Юрий, у меня эта технология не реализована. Я при формировании интерфейса данного блога руководствовался тем, что у 90% пользователей разрешение экрана 1024х768 (1024х600) или выше, и они открывают браузер на весь экран. Отсюда и размеры рабочей области блога. За счет клякс по бокам, интерфейс немного шире 1024 пикселей и при подобном разрешении может появиться прокрутка, но рабочая область блога полностью укладывается в эти размеры, и в худшем случае страницу просто нужно немного отцентрировать, чтобы весь текст был перед глазами.
УдалитьУ Вас, видимо, тот грустный случай, когда разрешение экрана меньше... Тут уж, извините, но подстроиться под всех невозможно - приходится выбирать большинство. Наверняка ведь есть и такие, кто до сих пор сидит за первым пентиумом с Windows 98 и IE4. Что же, мне и под них подстраиваться? Увы, всем никогда не угодишь!
Ну, случай не совсем грустный.
УдалитьОтцентрировав горизонтальную прокрутку, подтверждаю Ваши слова, что рабочая область четко попадает на экран !
Смущает само наличие прокрутки (разве что, заценить Кляксу). Не плохо, кстати
Вернемся к баранам.
1. Вы фиксировали жестко ширину : основная часть + боковая панель = 1024, а на края еще 476 ?
2. По каким причинам отказались от "резины" ?
3. Если реализовывать механизм из Поста, конкретней 100 % меняем на что ? (нужен ответ точный)
Спасибо
1. Зачем Вам параметры интерфейса моего блога, мне непонятно.
Удалить2. Потому что мне нравится так, как у меня оно есть сейчас.
3. Статью ВНИМАТЕЛЬНО прочтите! В исходном шаблоне нет никаких "100%", чтобы их на что-то менять.
Знаете, уважаемый, мне не нравится тон нашей беседы. Вы мне как будто допрос устраиваете. Будьте любезны, формулируйте свои мысли чуть менее резко и напористо. Вам здесь никто и ничем не обязан.
Я как раз в двух блогах это применила! Значит работает! Ура! [img]http://r11.imgfast.net/users/1111/19/40/96/smiles/2154879677.gif[/img]
ОтветитьУдалитьЭто не допрос
ОтветитьУдалитьменя заинтересовал Ваш опыт.
я хочу разобраться в том, чего не понимаю.
Написано в посте:
"Вместо значения $(content.width) мы пропишем 100%".
Прошу разъяснить Вашу фразу из поста
Но если Вы не хотите, то я неволить не буду.
Имеется масса других блогов
Что именно Вам непонятно в этой фразе? Что может быть проще и понятнее указания "заменить А на Б"?
Удалитьтак и поставить 100 % ?
УдалитьДа, так и поставить. Только без пробела.
УдалитьЕще вопросы уровня "как сложить 2 и 2"?
Все получилось, огромное спасибо )))
ОтветитьУдалитьВсегда пожалуйста ;-)
УдалитьЯ всё сделала - поменяла на 100%. Но перед этим изменилп пиксели. И как-то даже необычно стало что ли! Слишком широко. Надо бы привыкнуть! :thanks:
ОтветитьУдалитьСпасибо!
ОтветитьУдалитьСпасибо, все работает. Если нужны примеры, см. ссылку в моем профиле.
ОтветитьУдалитьНу и отлично :-)
УдалитьКупила новый комп с большим экраном, и там мой блог не очень смотрится в "резиновом" варианте. Вернула все назад, но появилась внизу прокрутка :wall: Что я только не делала - не уходит! Тимофей, помогите!!! :sos:
ОтветитьУдалитьАлия, я уже подзабыл адрес Вашего блога. А профиль Blogger у вас блокирован для просмотра. Мне в сущности не откуда взять адрес...
УдалитьВот http://kulinariya123.blogspot.com/ Может быть вы поймете в чем может быть дело... И смайлики тоже попали. Проверила в шаблоне - все на месте... Катастрофа!
ОтветитьУдалитьНикакой прокрутки внизу я не наблюдаю. А вот со смайликами и цитатами помочь, я надеюсь, смогу!
УдалитьУ Вас три ссылки на мои скрипты, которые надо попросту удалить! Они нерабочие и тормозят загрузку блога. К тому же у них имеются рабочие аналоги.
<script src='http://sunctorus.narod.ru/blog/smiles/smiles.js' type='text/javascript'></script>
<script src='http://sunctorus.narod.ru/blog/widget_quote.js' type='text/javascript'></script>
<script src='http://sunctorus.narod.ru/blog/widget_quote.js' type='text/javascript'></script>
А вот ссылочку на скрипт:
<script src='http://aboutblogger.googlecode.com/files/widget_smiles.js' type='text/javascript'></script>
...надо заменить на такую:
<script src='http://aboutblogger.googlecode.com/files/widget_smiles_ln.js' type='text/javascript'></script>
Также, советую немного доработать скрипт публикации картинок в комментариях. У Вас при текущем интерфейсе нужно вводить ограничения на размер картинок. Почитайте мою соответствующую статью. А то картинки выползают за границы интерфейса, как, к примеру, здесь. Кстати, вполне возможно, если Вы видите прокрутку не везде, а на какой-то конкретной странице, то, возможно, она вызвана как раз таки неформатной картинкой!
Еще один момент заметил, пока с этим разбирался. Вы искали, где у Вас старый скрипт смайликов, чтобы его отключить. Попробуйте удалить эту строку и он должен перестать работать:
<script src='http://rethna30.googlepages.com/smiley.js' type='text/javascript'></script><noscript><a href='http://introblogger.blogspot.com' target='_blank'><span style='font-size: x-small;'>Add Smilies</span></a></noscript>
По поводу избыточной горизонтальной прокрутки... Поищите этот код:
Удалитьhtml body .content-outer {
max-width: 75%;
min-width: 0;
width: 100%;
}
И попробуйте убрать там параметр max-width: 75%;.
Тимофей, у меня нет слов!!!
ОтветитьУдалитьВообще не понимаю, как такое возможно!!!
Блок выровнялся, смайлики появились! Три ссылки удалила, скрипт заменила, старый скрип смайликов тоже удалила... Просто чудеса!!! Вы просто мастер!
Спасибо вам огромное!!!
П.С. Пойду копаться в скрипте публикации картинок в комментариях
По поводу скрипта публикации картинок в комментариях...
ОтветитьУдалитьПоставила как у вас - 100% и все получилось!!!
Еще раз спасибо! Чтобы бы мы без вас делали!
Тимофей, вы так мне помогли, что мне уже не удобно вас просить снова... Только если вам не трудно и есть время, не моли бы вы мне подсказать, почему во втором моем блоге картинка все равно вылазит за поля. Ставила даже 80% - ничего не меняется. Вот здесь http://asbo-egipet.blogspot.com/2012/10/blog-post_3016.html
ОтветитьУдалитьМожет быть поставить в пикселях?
П.С. Кстати, в этом блоге перестала работать стрелочка к быстрой отправке комментариев :~(
#comment-img {
Удалитьmax-height: 500px;
max-width: 550px;
}
550px замените на что-то поменьше.
#comment-img {
max-height: 400px;
}
А это, по ходу, лишний код. Его, думаю, можно безболезненно удалить.
А кода стрелочки перехода к форме отправки комментариев я у Вас, в том блоге, если честно, вообще не наблюдаю.
УдалитьТимофей, вы меня снова поразили!
УдалитьОказывается, я не там меняла! Теперь картинка на месте!
Вы правы, лишний код безболезненно удалился!
П.С. Я вставляла этот код (стрелку к форме коммент.), но стрелка не появлялась, и я, наверное, удалила его... Сейчас еще раз попробую...
Спасибо за помощь!!!
Я правильно понимаю, что если в коде прописана ширина, например, виджета (тот, что html/css) и пр., то надо менять все значения на проценты?
ОтветитьУдалитьОбщего правила нет. Тут надо смотреть в каждом конкретном случае.
УдалитьТимофей, добрый день. Во первых спасибо Вам за столь информативный блог. Все очень по делу - нашла у Вас много полезной информации. Жаль что нет продолжения Вашего блога. Второй момент такой: возник вопрос. Я начинающий блоггер создаю свою площадку на блогспоте. Мне понравилась идея резиновой страницы. Применила ее у себя. Но возникла проблемка - сделала изображение для шапки загрузила, но она разместилась не по центру, а в левой части страницы. Вопрос: какой код и куда нужно ввести чтобы изображение шапки всегда на любых размерах мониторов вставало четко по центру при использовании фишки резинового сайта? Спс.
ОтветитьУдалитьАнь, ссылочку на Ваш блог дайте - я посмотрю.
УдалитьУниверсального способа нет. Нужно смотреть индивидуально.
3дравствуйте Тимофей, спс за отзывчивость - вопрос с центрированием шапки решен(по крайней мере на моем мониторе все ровненько) Отыскала такой код, он помог: .header {
ОтветитьУдалитьbackground: url("адрес картинки") no-repeat scroll 50% 0 transparent;
height: 241px;
position: relative;
}
Вот ссылка на мой блог http://berezhnayastudio.blogspot.ru. Буду рада Вашим комментариям или советам. Спс
Просто с бухты-барахты что-то советовать я не буду. Будут вопросы - задавайте ;-)
УдалитьСпасибо Вам получилось то что надо, один вопрос, у меня не получается передвинуть влево или вправо текст или гаджет в левой боковой колонке именно в левой, тема простая, при регулировки ширины левой колонки текст не сдвигается стоит на месте а с правой колонкой всё норм именно с левой так, я уже перепробовал столько тем везде одно и тоже, подскажите можно ли это как то исправить?
ОтветитьУдалитьЭто надо смотреть конкретный блог.
УдалитьТут вот столкнулся с другой проблемой.. В окне редактора пишу строку, строка доходит до правого края, перехожу на новую. А при предпросмотре оказывается, что строка не закончена на самом деле, а наоборот еще полно места справа до правого края. Ужасно неудобно. Подскажите пожалуйста это можно как-то побороть ?
ОтветитьУдалитьНичего не понял...
Удалить