Как стать автором
Обновить

Комментарии 139

НЛО прилетело и опубликовало эту надпись здесь
Да без обид!как раз новичок и как раз с этим парюсь)Спасибо огромное
НЛО прилетело и опубликовало эту надпись здесь
я на своем огромном 23-дюймовнике сжимаю браузер до 1280х900. Так удобнее
для смартфона (и других портативных устройств) лучше отдельную версию делать.
Для смартфона нужно делать отдельную версию, которая будет не только адаптирована под размер экрана, но будет еще и "весить" меньше.

Но самое главное — версии сайтов для мобильных устройств должны быть адаптированы в части пользовательского интерфейса и самого контента.

Так что ограничивать адаптацию лишь версткой или даже отдельным CSS — неправильно.
Плюс ко всему, другой набор интерфейсов. Это можно отнести к легковесности, но эт не то.
Спасибо, мне тоже будет полезным.
Давно интересовался как ЭТО можно сделать...
Спасибо автору огромное...
Спасибо, действительно полезная фишка. Я версткой занимаюсь лишь от случая к случаю, когда находит блажь переделать дизайн для сайта, и коллекционирую подобные хинты.
В конце заголовка точка(.) по правилам не ставится.
спасибо. =)
я не ставлю, но интересно, все-таки по каким это правилам? :)
ГОСТ по оформлению различного рода трудов и работ
о, пасиб :)
http://www.computerra.ru/offline/1997/213/769/print.html - взято из книги "Справочник художественного и технического редактора"
Вполне можно и без js обойтись, в css все отлично работает.
только не в ие6 и ниже
в ие6 работает
Что конкретно работает в ие6???
min-width?
Как я понял, камент выше как раз об этом и говорит.
выше говорится об экспрешенах в цсс (по крайней мере я так понял)
ааамм... согласен.
Вы правы.
Экспрешены вешают ие6, сам проверял. Спасает подключение отдельного яваскрипта.
странно... я тестил вроде не вис. Может это из-за специфики вычислений в экспрешенах?
если поставить, например, пустой комментарий перед доктайпом - не вешают. Или вот парой комментов ниже ещё одно, более симпатичное, решение с добавлением пиксела.
Вообще, expression для IE - это тот же самый JavaScript.

Мой опыт показывает, что грамотная вёрстка предполагает на страницы использовать всего навсего один блок для expression. Но сложность возникает, если нужно определить не только минимальную ширину, но и максимальную.

Так вот, если для одного блока определить два expression'а (min-width и max-width), то именно тогда начинаются тормоза и "конфликт". Для себя я нашёл решение: нужно использовать два блока. Один блок для expression(min-width), другой - для expression(max-width).
Когда-то сталкивался с проблемой min-width.
С решением с js в ие6 были проблемы. При ресайзе он просто вис.

Как у вас? Нет такой проблемы?
Не вешают, если задать ширину в условии на 1px больше чем ту, которая должна получиться в результате. Вот так: width:expression(document.body.clientWidth < 751? "750px": "auto" );
Неплохо.
А если просто невидимую картинку впихнуть шириной 760 пикселей?
В принципе тоже min-width.
а как быть с максимальной?...
Не думал. Обычно для меня максимальная - 100%
Это решение сродни однопиксельным прозрачным картинкам в качестве распорок. Давно уже устаревший метод.
А что сейчас используют вместо них?
Потом однажды кто-то додумался, что делать однопиксельный гиф в 43 байта - вообще не нужно, и достаточно написать <img width=100 height=1> , т.е. не указывать src вообще - и эффект будет тот же. И причем это работает во всех броузерах, в т.ч. и в старых версиях, типа там IE4 и подобное. Почему так не делали раньше - загадка.

Но распорки в любом случае зло, с прозрачными картинками или без.
Грамотная блочная верстка со стилями и JS-добавками в случаях min-max решает все эти и не только проблеммы.
По стандартам это не работает. Ширина будет, такой как она указана, а все внутренние элементы, которые по ширине больше будут выступать.
Такие танцы с бубном JavaScript только для IE6? Понимает ли IE7 min-width и max-width?
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
А чем Вам Сафари не угодил?!
НЛО прилетело и опубликовало эту надпись здесь
Вы странный
НЛО прилетело и опубликовало эту надпись здесь
А Вы не думали, что именно для этого и придумали стандарты? И бороться надо с теми, кто их не поддерживает, раз все "уныло-говняные" браузеры их поддерживают?
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
А причём тут Opera 6 и Ie6? Давайте тогда дождёмся FireFox 6...
А какой для вас тогда ХОРОШИЙ броузер ?!

Я просто лучше чем FF и Safari не вижу....
Оперу посмотрите :)
НЛО прилетело и опубликовало эту надпись здесь
Сам недавно в Safari разочаровался. Уж больно странно ведёт там себя JS именно в мелочах да и отладка в нём дело не очень лёгкое.
+1000000000000000
мне - тем что у меня падает постоянно
ты б линк на работающий пример показал.
А expression слишком нагружает браузер...

Это в смысле ие нагружается? У меня вроде бы не сильно. В любом случае интересно, это чисто визуальные наблюдения, или есть какое-нибуть обоснование?

Меня давно интересовали экспрешены, интересно было бы узнать мнение сообщества о днанной технологии.
НЛО прилетело и опубликовало эту надпись здесь
1500 это слишком широко. разумное ограничение под разрешение 1280 по ширине
1500 - это максимальный размер..
под 1280 сайт впритык будет.

вообще автору спасибо!
впритык к чему?
Я использую максимальную ширину 1200px, так еще сохраняется удобная для чтения длина строки
Зависит от монитора и разрешения. У меня на работе 2560 пикселей ширина строки и подобные сайты выглядят весьма убого...
Я про удобочитаемость говорил, а не про эстетические аспекты. У вас наверное вообще топики в 2 строки выводятся ) Удобно ли вам читать текст, длина строки которого 2000 px, а количество строк > 10, написанный 11 кеглем?

А на счет естетики, нужно ориентироватся на целевую аудиторию. Статистика показывает, что таких как вы очень мало )
У меня 150dpi стоит (бред, конечно, реально экран имеет 100dpi, но так уж задаётся размер шрифтов в GNOME), так что никаких описанных вами ужасов нету. А колонка получается зауженной, читать не очень удобно...
я ошибся, других, таких как вы, больше нет )
Зайдите в офис любой нормальной конторы - найдутся "таких как я" десятки, если не сотни (у нас в офисе человек 20 точно есть). А уж если включить сюда тех, кто имеет обычный 24-дюймовый монитор с разрешением 1920x1200 и режим "120dpi", так тех вообще тысячи...
Мой домашний (по совместительству рабочий)ноут имеет разрешение по ширине 1680px (при диагонали15")!
В виду того, что у многих рядовых пользователей появляются дома мониторы 19" и больше... а сайты перевёрстываются зачастую не чаще чем раз в два-три года, думаю стоит уделять побольше внимания пользователям с "большими"... мониторами!
Я не предлагал не ориентироваться на пользователей с большими мониторами.
Имхо, разумнее ширину указывать в ex, а не px, если вас волнует ширина строки, а не изображения.
Вы имеете ввиду относительные единицы измерения? Не знаю, можно ли их использовать в max-width
В спеках, емнип, одинаково для /(min|max)?-?(width|height)/.
И проценты там допустимы...
Фактически - можно.

Целесообразно? Да. Если вы задаете рамерности текста в относительных единицах, то и "колонку" увеличить не мешало бы.
Относительные единицы разумно использовать при работе с шрифтами, когда они выставляются относительно какого то "эталона", которым может быть стандартный размер шрифта броузера либо вручную заданный размер.
А относительно чего вы ширину контента собираетесь выставлять?
Укажем минимальную ширину контента в пикселях (например, не менее 750px), а максимальную — в относительных единицах (например, не более 150ex, что примерно равно 150 символам в строке).

В результате контент не съежится до неприличия при скромном разрешении, но и на большом экране останется удобочитаемым, причем пользователь может спокойно выбирать удобный ему размер шрифта, не опасаясь, что в каждой строке останется пара слов.

По-моему, именно так сделано и на вышеупомянутом ThinkVitamin.
Тоже вариант, но ex, если не ошибаюсь как то связан с x-height - высотой глифов, а не с шириной букв.
Ага. При этом для русского алфавита значение ширины, указанное в ex, примерно равна числу символов в такой строке. Разумеется, это зависит от самих символов. Для латиницы ex вообще, возможно, не имеет смысла в этом контексте.

микроэксперимент
(разумеется, соотношение зависит и от шрифта, но погрешность обычно не так велика, чтобы взволноваться)
Вот недавно у меня была проблема эта.
Экспрешены не помогли — как уже тут писалось, при ресайзе IE вешался.
Так что надо подключать отдельный яваскрипт для IE. А остальные браузеры с CSS нормально работают.
Я считаю такой вариант решения наиболее оптимальным для резиновых сайтов.

А вот для нерезиновых необходимости нет)
Больше нравится вариант с expression

* html #root
{
width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 770
?
"770px"
:
(
document.documentElement.clientWidth > 990
?
"990px"
:
"auto"
)
)
:
(
document.body.clientWidth < 770
?
"770px"
:
(
document.body.clientWidth > 990
?
"990px"
:
"auto"
)
)
);
}
я такие вещи при помощи условных комментариев подключаю в отдельный цсс, а не хаком
йопт, дак гдеж здесь хак? А уж про условные комментарии (или condcom), это вообще следует считать как правило хорошего тона. Уж лепить expression в основной файл css я б не стал, да и читетели http://habrahabr.ru/blog/webdev думаю тоже.
* html — хак
это просто фильтрация, иногда много чести писать свои стили под ИЕ младше 6-го [if lte IE 7], когда можно просто в стилях под ИЕ [if IE] осущестыить подобную фильтрацию. *html ie7 игнорирует.
Это именно хак, поскольку вы не знаете, в каком ещё браузере есть такой баг, что он будет работать с * html, вы не знаете, в каких будущих браузерах будет эта ошибка, вы не знаете, какие новые фичи введут в будующем. Например, сайт будет распологаться в #browser>#site-window>html..
А собственно зачем такой большой expression?
У меня и вот с таким не зависает IE

min-width: 700px;
width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto');
max-width: 1500px;
width: expression((documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
а вы пробовали это пременить к одному и тому-же элементу?
Да пробовал. В большинстве случаев не ограничиваю максимальную ширину, но иногда приходится - все работает.
Применяется это же не к body, а к некому div который содержит в себе все остальное.
Извиняюсь, не правильно написал, для одного элемента работать будет вот это:
width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto' && (documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
1. Я тут, увлёкшись клёвыми статьями о резиновом дизайне, делаю резиновый дизайн для сайта Датавед о свободном программном обеспечении. Что хочется:
а) три колонки L, M, R с заданной минимально разрешённой шириной,
б) когда все три влезают по ширине на экран, средняя расширяется до определённого размера,
в) при уменьшении экрана сначала пропадает правая колонка — попадает под левую,
г) затем обе управляющие колонки уходят вниз и расширяются по ширине средней колонки.

Есть ещё вариант, когда левая и правая колонки уходят влево и вправо, а не вниз — и появляется полоса прокрутки. Что мне совершенно не нравится — это как сейчас, когда при уменьшении средней колонки текст и картинки не начинают залезать на управляющие колонки. Нет ли примеров и идей, как такое сделать?

2. Попутно возник ещё следующий вопрос — может Вы и с подобным сталкивались? Как правильно настроить блог, чтобы картинки показывались маленькими при просмотре ленты постов, и рисовались в нормальном размере при открытии поста целиком. Мы используем Блоггер — интересно, как поправить стили и темплейт для этого случая.

3. Жалко, что ссылка на мотивацию статьи более не работает. Зачем вообще делать резиновый дизайн, если дизайнеры говорят, что изменение пропорций на процент всё портит?

а кто знает, как IE6 заставить поддерживать min-width и max-width
Напиши им письмо )
Эта… Вы топик-то читали?
Читал. Сделал так как описано в топике, но в ие6 ширина #site - 100% выходит.
дык вы для теста попробуйте седать мин и макс, к примеру, 400 и 800 пикселей.
я так и делал
min-width очень часто и просто сымитировать каким нибудь фиксированным элементом внутри тянущегося блока. Если это таблица, например:

<table width="100%">
<tr>
<td><hr style="width: 600px" /></td>
</tr>
</table>

Ну естественно, на каждом конкретном примере нужно смотреть как и что сделать
НЛО прилетело и опубликовало эту надпись здесь
hasLayout для блока
НЛО прилетело и опубликовало эту надпись здесь
Ммм.. А просто:
* html #site { width: 760px; }
чем не устраивает?
НЛО прилетело и опубликовало эту надпись здесь
Так IE6 вроде как расширяет блок, если в него контент не влезает... То есть если контента мало, то блок фиксированной ширины 760px, а если много, то он расширяется. В чем отличие от min-width? ;)
Хотя можете не отвечать, это меня немного не в ту степь понесло =)
НЛО прилетело и опубликовало эту надпись здесь
Все бы так по уму делали. У меня несколько нетандартное разрешение (сбоку висит панелька gkrellm'а) и огромное количество сайтов просто едет или показывает скроллбар. Слава опере, часто это лечится Fit to width.
вообщето код выше именно от туда, и ссылочка там эта тоже есть
сорри :)
весьма давно использую скрипт, который так и называется - minmax.js
Кто ищет - тот найдет :) Почти все проблемы верстки решаются "велосипедами".
Вот еще бы работающий layout :)
minmax.js - рулит
Загрузить minmax.js

Правда, разбирался в коде - там он ТАКОГО воротит...
После него даже страшно в DOM лезть.
Интересно, у скольких человек стоит ИЕ6 при разрешении большем 1280? :)
А с чего Вы взяли, что мало? :) У меня, например, 1680px, однако же у меня стоит IE6
И для чего вы его используете? Для поиска багов или для повседневного лазанью по www?
Скорее для первого :)
НЛО прилетело и опубликовало эту надпись здесь
кусок моего стандартного css:
.outer { position: relative; max-width: 1400px; min-width: 1000px; width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000 ? '1000px' : (document.documentElement.clientWidth || document.body.clientWidth) > 1400 ? '1400px' : '100%' ); }

я считаю что 1000 и 1400 самые оптимальные цифры для максимального и минимального значения... в этих пределах дизайн не уродуется.
Вообще-то где-то я похожее недавно видел и не на Q-ZMA. :)
Большое спасибо, давно искал:)
Нельзя ли подобные решения для div выложить?
А нельзя ли более развёрнуто о преимуществах этого способа перед expessions? "expression слишком нагружает браузер" - крайне мутно, хочется поподробнее (они его в данном случае могут повесить, да, но это решаемо).
Либо ссылку какую хорошую на эту тему.

Хочется как-то однозначно определить для себя плюсы-минусы и там уже решать, чем пользоваться.
Я как понял - вы не хотите лишний кондишенал комент? Тогда стоит написать экспрешен, который будет реализовывать ту же логику. Это достаточно просто :)
ох батя, силен! =)
=D
я бы не рискнул вешать обработчики на онресайз, потому как при сложном дизайне (много таблиц етц) перерисовка будет случаться очень очень часто. правильнее вещать интервал и отслеживать изменения ширины / высоты окна.
Кажется, в скрипте допущена ошибка.
Определение переменных (var minwidth, var maxwidth) надо засунуть в тело функции, иначе у меня скрипт отказывается работать.
А мужики то не знают)) . сижу - думаю (от нечего делать что ли) - почему не хочет. да. всовываем в тело и все работает (привет дедушке Фрейду)
Автору - спасибо. И чтобы там все-таки не говорили про экспрешены, я считаю в корне неверно мешать логику оформления страницы и индивидуальные для IE хаки, в одном файле. На маленьких проектах это еще можно допустить, но когда кол-во стилей доходит до 5-8, получается основательная каша.
А у меня в Safari не работает! :(
Все сужается до размера контента и все.
У меня почему-то все-таки пример автора не хочет работать в IE6.
Во всех других брайзерах работает, в IE6 сжимается и растягивается без всяких правил.
Пример с экспрешенами (как советует kostos) работает отлично везде.
Может быть потому, что у меня в системе установлен IE7, а IE6 доустановлен позже с помощью multiple-ie. Интересно было бы все-таки узнать, как применение expessions в одном единственном месте будут нагружать браузер. В чем + и -?
Я писал замечание 2-мя комментариями выше. Засуньте переменные в тело функции.
Спасибо, все заработало как надо.
ого себе! 100 баллов накапало...
Поздравляю!
спасибо! сам не ожидал!
Не это же было сутью написания поста.
Вы действительно считаете, что этот ход нагружает браузер меньше, чем использование экспрешена? ;)
У меня в FF, IE, Opera работает отлично. Пасиб =)
НЛО прилетело и опубликовало эту надпись здесь
Самый простое решение проблем с минимальной шириной - распорка для всех версий IE.
На это есть две веские причины:
- Правильные пацаны верстают в em, и делают страницы полностью зуммируемыми. увеличил шрифт - и минимальная ширина уже должна быть не 750px, а 900, к примеру.
- у даже у IE7 есть баг, связанный с ресайзом при использовании min-width, если отступы у body заданы в процентах. При ресайзе ширина контентной области уменьшается, а ширина блоков в контентной области уменьшается через раз. в итоге сетка разрушается.

Поэтому все же лучше банально окружить документ таблицей в условном комментарии, и распереть ее div'ом с шириной, заданной в em. Какой браузер - такое и решение =)
Спасибо автору!
Поставил, во всех браузерах работало, кроме ИЕ. Почитал коменты, сделал исправления, - все равно не работало. А потом попробовал вместо document.documentElement.clientWidth вставить document.body.clientWidth - и все заработало!
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.