резиНОВОСТЬ: (приснилось в угаре 11.5%)...

1021
резиНОВОСТЬ: (приснилось в угаре 11.5%)... (это как бы пожелания умам пытливым, а не для употребления)

Как писал уже в теме Львёнка "Чего не хватает шаблону": в перспективе хотелось бы резиновый шаблон с подменяющимися на лету стилями. В зависимости от ширины окна браузера происходит 4 - 5 переключений (подключений) стиля. Начиная от практически голого текста на голых дивах (для наладонников), далее инстант в "процентных грайдах" расширяется без бордюра. Далее основные блоки практически не расширяются, но увеличиваются бордюры и в конце концов, на широких-широких экранах полоски эти дополняются (возможно с помощью фреймов) полупрозрачными (чтоб не сильно отвлекали) кнопками, закладками, радио-видео, микроиграми и далее по списку...

То, что здесь - это всего-лишь прикидка, как могло бы быть, в исполнении всего лишь (предупреждаю заранее - смотреть особо нечего) на 0.01%. Нужна правка всех "больших" пикселей и неизвестной части малых в модулях и компонентах, формах и стилях, а возможно где-то ещё и не только пикселей...

Получилось кривовато, если присмотреться (мне), кто-то скажет прямо - не кривовато, а криво.
Разумеется, в таком виде - это всего лишь ознакомительный материал и ставить его себе могут только экспериментаторы для возможных доработок. Делалось-то на дефолте для части главной страницы.

Надо бы попробовать с переключением стилей "поиграть". Но что-то не играется...

ССЫЛКА НА ЯНДЕКСЕ: http://narod.ru/disk/32372317001/styles.zip.html

КАК?: скачайте, распакуйте, замените соответствующие файлы в дефолтном шаблоне, перезагрузите браузер и тяните (жмите) резину:)

ПОСМОТРЕТЬ - ПОТРОГАТЬ: http://z180273.infobox.ru (день-два, неделю-другую провисит, пока не упадёт)

ПОСМОТРЕТЬ:
Спойлер
при таком сжатии и Гугл не шибко смотрится...

P.S. Это не шаблон, это зарисовка, эскиз шаблона - не требуйте от него много. Понравилось, как главное меню складывается (ну и чтоб оно не сгинуло, как уже несколько мелких наработок), чуть доработал верх главной страницы, нарастил идеей и выложил..:)
Комментарии (18)
Lexa219 25 ноября 2011 в 00:37 0
Верстка слегка неудачная , попробуйте уменьшить окно браузера , все плывет в кучу
ded-pikto 25 ноября 2011 в 01:01 0
Это вообще не вёрстка
Ше 25 ноября 2011 в 00:49 0
Есть же стандартное решение, одна таблица как контейнер для меню и контента. Меню 250px, ширину контента не указываем, контент тянется на весь экран, работает везде. Подменять стили, я думаю, не стоит, это не оправдывает себя, современные портативные устройства оптимизированы для просмотра обычных сайтов, а браузерам так вообще все по плечу!
Ну а теперь самое интересное, почему НЕ НУЖНО растягивать шаблон на весь экран? Потому что читать не удобно... да да, просто не удобно, строки растягиваются на весь экран и чтение текста превращается в муку! А как Вы сами понимаете, сайт нужен для того, что бы с него получать информацию и делать это в максимально удобной для пользователей форме.
Я уже не говорю о том что не нужная "резиновость" добавит не нужный гемор с версткой компонентов шаблона.
ded-pikto 25 ноября 2011 в 01:15 0
Далее основные блоки практически не расширяются, но увеличиваются бордюры...
Мы говорим фактически об одном: на широких экранах должно быть несколько зон внимания. Но и совсем пустыми большие бордюры долго оставаться не будут - кто-то что-то придумает в них засунуть...
Ше 25 ноября 2011 в 01:36 0
Вы на брендирование намекаете? Для этого фиксиронанные размеры используются. Все эти заморочки с тянучестью - игра не стоит свеч... Наверное нужно подождать год-другой и делать уже под разрешение 1366.
ded-pikto 25 ноября 2011 в 09:46 0
Про брендирование первый раз от Вас услышал, не вникал никогда в эту тему. Просто в голову пришло, почти в угаре, вот что-то изобразил... А дальше и сам не знаю, видимо, end...
Anubis 25 ноября 2011 в 12:32 0
добавьте хотя бы min-width
Morgan 25 ноября 2011 в 13:04 0
Идея неплохая ! Но на мой взгляд было бы куда как симпатичнее и практичнее правую колонку сделать чуть поуже (как в дефолтном), а слева сделать ещё одну колонку аналогичную правой ! Была бы трех-колоночная верстка ... при такой резиновой верстке она смотрелась бы лучше ! ИМХО !
Да и ещё почему то справа больше пространства ... внизу браузера аж прокрутка образуется )))
SE7EN 25 ноября 2011 в 20:50 0
Мне резина нравится, но просто сделать чтоб уменьшалась минимум до 1000 пикс., а растягивалась (для широких моников) ну скажем до 80%.
PET 25 ноября 2011 в 22:55 0
Для начала хотелось бы, чтобы автор как минимум ставил перед собой цель, а уже потом определял задачи и инструментарий для её достижения. Если мысль не понятна, поясню: здесь задача - сделать сайт резиновым во всех разрешениях экрана, и чтобы при этом не было недоделок. А цель какая? Для чего вы пытаетесь решить эту задачу?
Чем конкретно не удовлетворяет вас тип стандартного шаблона? К примеру, стандартный шаблон даже и со своей статикой удобен и отлично смотрится для просмотра для большинства разрешений экрана (ширина от 1024px до 1600px для моего экрана). А ваша редакция шаблона уже начинает давать сбой на разрешении ниже 1280px по ширине.

Нужели студии, которые делали дизайн яндексу, ютубу, майкрософту, мтс, билайну, президенту рф итд. не в курсе, что существует "резина"?
А если вы и хотите применить "резиновость", то сделайте дизайн динамичным в ограниченном диапазоне ширины экрана.
Если не поняли о чём я, посмотрите на шаблон от dezerit - http://ic-coloricity.dezerit.org.ua/
У него ширина динамическая от 1000px до 1300px. Всё, что выходит за этот диапазон, уже статика, и такой подход удобен и эффективен.

Такое чувство, что вы недавно открыли для себя HTML+CSS и упорно, не оглядываясь вокруг, изобретаете велосипед.
ded-pikto 26 ноября 2011 в 02:26 0
Не обижайтесь, если всем сразу отвечу.
Да, fonotrack,
Такое чувство, что вы недавно открыли для себя HTML+CSS и упорно, не оглядываясь вокруг, изобретаете велосипед
, вас не обмануло.
Но, друзья мои, в посте я честно отписал, что смотреть-то особо нечего и что
(это как бы пожелания умам пытливым, а не для употребления)
и, Амстердам, Morgan, SE7EN
Разумеется, в таком виде - это всего лишь ознакомительный материал и ставить его себе могут только экспериментаторы для возможных доработок. Делалось-то на дефолте для части главной страницы.
Что вы хотите от эскиза на тему?.. Хорошо сказал, добавлю в пост. Понравилось, как меню главное складывается, ну а к нему остальное прилепил...
Morgan даже на IE, если честно не проверял. Только на Хроме-15 в Денвере и на тестовом сайте. Так что о горизонтальной прокрутке ничего сказать не могу. Кроме того, что не люблю её шибко, а "резина" эта затевалась и для того, чтоб исключить её навсегда в принципе. А на сайте http://z180273.infobox.ru/ тоже прокрутка образуется? Проверил сейчас у себя на IE-8 - прокрутка не появляется.
ded-pikto 26 ноября 2011 в 02:58 0
P.S.
студии, которые делали дизайн яндексу, ютубу, майкрософту, мтс, билайну, президенту рф...
Если бы все оглядывались на IBM где бы мы были?..
Нил™ 26 ноября 2011 в 09:44 +1
прикольно.)
Morgan 26 ноября 2011 в 13:19 0
да, прокрутка внизу почему то только в Mozilla Firefox ! В остальных браузерах нет !
ded-pikto 26 ноября 2011 в 21:07 0
Morgan:
да, прокрутка внизу почему то только в Mozilla Firefox ! В остальных браузерах нет !
Поубивав бы!.. Некому их нагнуть, как Путин тогда Дерипаску! И по делу же, давно пора объединённый стандарт принять... Похоже, пора придумывать универсальную оболочку для браузеров, чтоб на выходе стандарт выдавала!..
Lexa219 26 ноября 2011 в 22:46 0
тс брось это дело smile зачем так насиловать дефолтный шаблон
LonelyCat 30 ноября 2011 в 08:32 0
нечто подобное и я делал, см. здесь
если будет желание пощупать, дня через два на демо поставлю.
шаб не резина, 960, при уменьшении разрешения сначала сужается, потом боковая колонка уходит вниз, становится одинаковой ширины с основной, и дальше они сужаются до 240.
ded-pikto 1 декабря 2011 в 01:35 0
Ну, сравнил! Ты-то делал!!! А я так - подвернулось, поматросил...