Ниже — подписавшиеся:
Темы
Коллеги
Этюд с «резиновой» вёрсткой
Сегодня в Твиттере, мне насоветовали чистый минималистичный блог. В общем, такой, как мне нравится. При всей моей любви к такого рода блог-дизайну, он не стал бы героем поста, если бы не одна важная деталь. Это блог с резиновой вёрсткой. Совсем как предыдущая версия Дизайнфрика.
Я очень хорошо помню, что основной претензией к новому дизайну Фрика, было то, что он перестал быть резиновым. И вот (не прошло и полгода) у меня появилась возможность проиллюстрировать своё решение фиксировать блог по ширине. Дело в том, что я пересел на ширикоэкранный ноутбук. С разрешением 1680х1050. (И собираюсь «развить успех», пересев на 19-дюймовый ноутбук, с запредельным разрешением, которое точно сейчас не вспомню.) Соответственно, вышеуказанный блог (как когда-то и мой собственный), выглядит на моём мониторе вот так. Что, на мой вкус, просто ужасно.
А теперь, внимание, вопрос! Существует ли (о приверженцы резинолюбного юзабилити) способ, убить двух зайцев: сделать сайт резиновым, избежав при этом порнографии на широких экранах? «Физическое сдвигание браузера» в качестве версии не принимается. А вот «да, Мишка, ты был прав» — принимается с лёгкостью (кекеке).
Извините, комментирование закрыто в настоящее время.
Комментарии к «Этюд с «резиновой» вёрсткой» закрыты
Отличная иллюстрация для «всё хорошо в меру».
Если ты готов пожертвовать IE6 (я — готова), то можно сделать сайт средне-резиновым. То есть, ограничить текст по максимальной ширине. Он будет резиновым до какой-то точки, а извращенцы с широким экраном увидят его отцентрованным :)
Так, собственно, и хотелось. А что за загвоздка с IE6?
max-width не работает.
Но это естественно можно обойти. Я просто хочу чтоб шестёркой перестали пользоваться по той причине, по которой люди сейчас тормозят и не переходят на ФФ :)
Хотя если так подумать, какой шанс, что у человека с резолюцией 1680х1050 будет стоять IE6?
Спасибо, так понятней.
P.S.: я и ФФ приговорил, перейдя на Chrome (где можно по-человечески убирать лишние процессы по отдельности). Но это уже совсем другая история.
То, что у тебя ФФ на компьютере не работает корректно нельзя использовать для хромо-понтов :)
Мне не сложно на самом деле поставить max-width, но даже на вашем изображении ещё более менее. Мне присылали ещё более ужасные скриншоты (хотя, судя по анализу посещаемости, случаи захода на сайт людей с такими разрешениями единичны).
Я пока ещё посижу тут на мятом ведре и почитаю смешные комментарии о вреде или пользе резиновой вёрстки, а там может и солью свой CSS.
(На манжетах пишу: вот кого давно хотел добавить в Твиттере!)
Я в своё время тоже был неоднократно уговариваем и урезониваем фактами единичных заходов «большеэкранников». Но меня начал парить процесс постинга в свой собственный блог с моего большого монитора, и я сдался, слез с ведра, и… имею то, что имею.
(Взаимно, боюсь, как бы вы не устали от потока порой безумных сообщений!)
Похоже, что так. Я попробую тогда поставить max-width по приезду домой, может это поможет. Для IE6 не буду вставлять решение типа expression. Под него вообще уже, кажется, верстать грех, хоть его ещё достаточно.
«сделать сайт резиновым, избежав при этом порнографии на широких экранах?»
Да много их, этих способов. Боковые колонки, резиновые марджины и паддинги (внутренние и внешние отступы), игра с размерами кегля и интерлиньяжа. Все возможно.
«сделать сайт резиновым, избежав при этом порнографии на широких экранах?»
Да много их, этих способов. Боковые колонки, резиновые марджины и паддинги (внутренние и внешние отступы), игра с размерами кегля и интерлиньяжа. Все возможно. Было бы желание:-)
а зачем собственно резина ведь вроде главная задача дизайна — предоставить информацию легко для пользователя. А у тебя, Миша, ширина контентной части, с 75(вроде) символами в ширину справляется легко.
Тем не менее, любителей «резины ради резины» — предостаточно.
Добавление доп.блоков? Например, если экран превышает 1280px, то справа вывести (аяксом, например), realtime-комментарии…
Это я насоветовал? :)
Самый простой способ:
p [max-width: 65em] (только кавычки правильные)
Смотри, я у себя сейчас сделал.
perfectomania.com/blog/
Ооо… у меня появилась гениальная идея. Задал max-width всей левой колонке. Теперь круто все :)
Прям жутко собой доволен, спасибо за толчок :)
Ты еще min-width блокам задай:-)
А то при уменьшении ширины экрана схлопывается в плоский блин.
Задал 960px :)
min-width еще задай блокам. А то при уменьшении ширины экрана все в плоский блин слипается.
Подумаю, спасибо.
Мишка молодец) Полностью согласен и разделяю взгляды на резиновую вёрстку.
Неужели нельзя открывать браузер на нужную ширину? Больше ведь не меньше.
Я это оговорил. Нет, не хочу ради одной странички таскать окно.
Переделал свой блог из резинового в фиксированный (правда достаточно широкий вариант), т.к. очень часто делаю вставки какого-либо кода, а он, по хорошему, не должен быть больше 80 символов на строку, следовательно — на широком экране (у самого 1680х1050), контент начинает смотреться убого (строчка текста, код, прижатый вправо, и т.д.)…
Да, и слишком длинные строчки утомляет читать, другой вопрос — что делать с пустотой?
Я решил этот вопрос :)
А вот пустота как раз не мешает. У меня чем её больше, тем картинкам вольготнее сидится. Текст — король блога. Его читабельность и приятность глазу.
В IE6 max-width можно эмитировать без использования скриптов.
Например, вариант Болка:
CSS:
/*
min-width для нормальных браузеров
*/
body
{
margin:0;padding:0;
}
.outer
{
background-color:red;
margin:0 auto;
min-width:600px
}
/*
Для IE6
*/
* html .outer {padding-left:600px}
* html .minwidth {height:0} /*Включаем свойство hasLayout */
* html .container {margin-left:-600px;position:relative; height:0}
HTML:
Блок с min-width 600 пикселей.
На мой взгляд, единственное, чем можно оправдать фиксированные сайты — это простота. И дизайна, и последующей верстки.
Впрочем, вопрос до крайности холиварный и философский, так что правильного ответа на него все равно не существует.
Тогда дай ответ на другой вопрос, тебе нравится то, как выглядит скриншот, который я выложил?
Нет. По нескольким причинам:
1. Колонку можно было изначально верстать не так широко. Сделать процент чуть меньше — ничего бы страшного не произошло. Впрочем, все равно не спасет.
2. У меня рендеринг текста покрасивше. Кекеке.
Впрочем, «слишком широкие» мониторы — проблема и фиксированных сайтов. Ничто не смотрится более одиноко, чем восьмисотпиксельная колонка текста по соседству с явно не запланированной тысячепиксельной пустотой.
(И тут начинается холивар.)
Но у меня такой проблемы не возникает, поскольку браузер никогда не бывает растянут более чем на 1100—1200 пикселей в ширину (разве что в экспериментальных целях). Остальные 700—800 пикселей заняты чем-нибудь другим.
Но этот вариант мы, кажется, отбросили.
если резина, то давно только с min- max-weight. в ie expression или как уже написали выше. но чем больше распространены широкие экраны, тем бессмысленнее резина
Давно замеченно, что в западных странах верстают фиксировано, а в России резиной.
С чем это может быть связано?
Широкая русская душа. :) Пытаемся объять необъятное и впихнуть невпихуемое. ;-)
У них нет Самизнаетекого, способного направить толпы дизайнеров в нужном направлении.
Смотрите шире. На западе верстают и резиново и фиксированно + стандартизированно, для этих целей есть отличные модульные сетки-фреймворки (960.gs, например). Просто, в последнее время, фиксированно верстать стали чаще, это заметно невооруженным взглядом.
Чаще всё зависит от здравого ума разработчика и типа проекта. Я убеждён, что хорошо подать информацию можно при любом типе вёрстки (статическая, резиновая, гибридная, масшатбируемая), только бы руки росли поближе к думающей голове.
DIMOX решил эту проблему давно. Читай тут подробнее: dimox.name/cross-browser-liquid-layout/
Так же скилет шаблона можно сделать тут: csstool.ru