Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют "резиновыми"). Недостатком фиксированных колонок при их использовании в "резиновом" блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ...
Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, ...
С целью дальнейшего развития моего сервиса-скрипта Share42.com я искал способ динамического подключения фреймворка jQuery непосредственно в коде JavaScript. Нашел красивое решение, которое выполняет одновременно 2 задачи: Проверяет, подключен ли уже на странице jQuery. Если не подключен, ...
Публикация статьи «Умные динамические колонки с применением CSS и jQuery» стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта. Задача — реализовать динамическое изменение размера шрифта сайта ...
Данный скрипт — это усовершенствованная версия JS-скрипта «Добавить в закладки», который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его «добить». Скрипт уже давно ...
Комментарии (54)
Красиво:)
Возмем на заметку.
Еще бы к этому автоматическое подстраивание размера шрифта под разные разрешения, раз уж скрипт используется :)
Удивлен, что тебе понравилось, ты же не любишь скрипты.
У куда без них, Дима :)
Тенденция однако :)
Но ты подумай, как с размером шрифта при разном разрешении быть.
Еще бы при при уменьшении размеров экрана монитора пропорции соблюдались бы, размер колонки уже — шрифт чуть меньше :)
Я предполагаю, что это можно сделать по аналогии с колонками, только для этого нужно знать зависимость,т. е. в какой пропорции делать изменение размера шрифта в зависимости от размера экрана.
В общем, я понял. Сейчас сделал, так сказать, набросок, уже кое-что получилось. Так что это вполне реально реализовать.
Получилось — dimox.name/fontsize.html. С кроссбраузерностью проблем нет.
В самом скрипте есть 2 настройки:
1000 — это та же ширина, что и усновного родительского блока (#wrapper).
Кроме тега
body, у всех тегов нужно использоватьemвместоpx(там, где ты хочешь динамически менять размер шрифта).Пожалуй, уже можно писать статью на эту тему =)
Круто :)
Пиши статью, но лучше, если за основу макет возьмешь стандартный трех колоночный.
Пусть там и ширина колонок меняется и размер шрифта.
И в пошаговом режиме объяснялка, что, как и куда.
Цены тогда ей не будет :)
Всех к тебе засылать буду, для прочтения :)
смотрел в konqueror при определенной ширине браузера, начинается «слайд шоу»!!!
ширина около 1200−1300, точно сказать не могу, ибо ФФ еще не ставил!
К сожалению, указанная вами ссылка не работает сейчас.
Не могли бы вы воскресить эту страницу?
Заранее спасибо.
Да, все хорошее вовремя…
Делал подобное в своем проекте, то там было немного веселее, там такое происходило с таблицей :) это уменьшает вероятность того что во «всемилюбимом» ИЕ распологаться блоки будут хорошо…
Может, я чего проглядел, но ИМХО, вместо jQuery можно было бы обойтись ведением min-width.
А шЫштой осел — да забудем уже про него:-)
А внимательнее пост прочитать?
Речь-то совсем о другом :)
Да, вроде, мысль понятна.
Покажите тогда на примере, как-то же самое будет решено на чистом CSS.
Посидел, покрутил, и понял, что при расширении контентной части без скриптов никуда.
C некоторыми оговорками (последняя строка ячеек всегда будет по горизонтальному центру, сколько бы их в строке не было) — можно:
Для
ul class="column"text-align:center, для списков — display: inline-block; без обтекания + хаки для IE и младших лисиц.
Дима, кинул тебе на мыло, свою новую разработку,
к ней поможешь свое хозяйство прикрутить?
Не понимаю, каким образом может пригодиться в трехколоночком макете техника динамических колонок. Именно в таком макете достаточно указания %-й ширины, ведь количечество столбцов в строку всегда будет одинаковое.
А изменение размера шрифта к такому макету можно прикрутить.
Нет, конечно, переноса колонок делать не надо :)
Но динамика измения ширины колонок и одновременно размера шрифта нужна.
Важны пропорции не только в ширине колонок, но и в расстоянии между ними.
Приблизительно так, как в посланном тебе на мыло, моем макете,
не важно, что там фиксированная колонка, в принципе все может прокручиваться.
Причем, вместе с min/max-width всему макету.
Пусть ширина колонок в %.
Как пропорциональное именине размера шрифта к этому привязать?
Спасибо, Дима за помощь.
Все получил.
Играюсь :)
Если будут вопросы то задам, ты же автор данной фишки.
Пиши статью, от себя обязательно линк дам,
думаю многим пригодится.
Пожалуйста. Статью напишу.
К тому, что ты сделал для меня, по моей просьбе,
надо бы добавить из оригинального примера возможность масштабирования картинок, тогда полный фен-шуй будет :)
И, как писал, рассмотреть все на конкретном примере — стандартной трех колоночной разметке, во всех подробностях.
Может даже и не на одну статью потянет :)
В примере из статьи масштабирование изображений работает на голом CSS, так что скриптов для этого не нужно.
FF3 Win7RC1
Скрипт, боюсь, не выполняет свою функцию.
Opera10 Wnin7RC1 — нормально.
Прошу прощения — деза)
В примере не выполняется, но к кастому моему вполне прикрутилось. о_О
Мистика.
Спасибо, очень интересный пример! Интересно и увлекательно разобран по полочкам. Что-то в этом роде я придумал на div, а на списках не догадался. Не додумался и картинкам назначать ширину width: 89% — клёво!
Но вот вопрос: я решил этот пример использовать для фотоальбома, в котором фоты наложены «внавал», резиново. Но к каждой фотке хотелось бы вставить комменты.
Если размеры и ориентация, а также объем комментов строго одинаков, то все идет пучком: при изменении разрешения экрана, размера окна браузера все резиновое и «резинит» отлично.
Но в реале фотки имеют разный размер и ориентацию, разный объем текста и колонки получаются разной высоты. И вот тут получается неприятный фикус-покус: маленькие колонки цепляются за высокий правый край бОльших колонок, находящихся раньше — получаются зияющие пустоты. Как их избежать — ума не приложу.
Может честной изобретательный и остроумный народ подскажет что-то оч. ценное? Или такая идея неважнецкая?
а как закинуть шаблон в joomla?
А почему он не воспринимает русский шрифт? Как актуализировать русский шрифт?
Видимо, сохраняете в неправильной кодировке.
Подскажите пожалуйста в какую кодировку написать и где, наверно В CSS. Очень надо
Во-первых, кодировка указывается в текстовом редакторе, в котором сохраняется файл.
Во-вторых, она указывается в HTML-коде в теге
<meta>, например:Здесь
utf-8— это название кодировки. Она должно быть одинаковой в обоих случаях. Можно также использовать кодировкуwindows-1252.Спасибо Dimox, буду пробовать)
не получается (Dimox скажи пожалуйста как в кодировке демо сайта сделать так чтобы читался русский шрифт. Я поменял то, что ты говорил и в настройках блокнота по умолчанию задал данную кодировку (UTF-8), но ничего не помагает ((
Замени
iso-8859−1наutf-8и сохрани файл вutf-8.Сработало! Большое спасибо Dimox. Очень помог частенько буду посещать этот сайт!
Подскажите куда вставлять jQuery Сайт будет под Joomla Спасибо!
Посмотрите, как сделано в примере, и сделайте по аналогии.
Каким образом в блоки картинки вставить? Спасибо!
как можно распределить свободное пространство между блоками?! Спасибо!
Вопрос непонятен.
у вас свободное пространство распределяется в блоки тем самым они растягиваються одинаково и заполняют всю страницу по ширене с фиксированными отступами между блоками.
А как сделать так чтобы свободное пространство распределялось между блоками, а сами блоки оставались с теми же размерами?
Сходу я могу лишь сказать, что самое просто — сделать это таблицей. Вот пример:
а как сделать если сделано не в таблице каждый блок прописан в div для резиновой странички? Спасибо!
Не знаю.
Добрый день,
хорошая тема.
1. В браузерах Opera и Firefox пример работает как задумано.
2. В браузере IE приведенный пример не работает:
— ширина колонок (div-ов) не изменяется при изменении ширины окна;
— колонки (div-ы) ведут себя как div-ы со стилем float и поэтому справа всегда какое-то место остается. Div-ы не заполняют все пространство.
— при уменьшении экрана до размера, на котором помещается 4 div-а IE входит в ступор — зацикливается. После этого его остается только закрыть.
3. Напишите пожалуйста, не встречался ли в Вашей практике плагин или пример работающий на трех браузерах.
Галина
PS Ссылки на пример, переадресовываются и пример получить нельзя.
У меня работает во всех браузерах, в том числе и в IE, начиная с 6-й версии. Вот рабочий пример — http://fiddle.jshell.net/Dimox/U2A3j/1/show/light/
Этот пример (у меня IE вер.9) работает на широком экране 1800 и при уменьшении окна до 5−6 колонок. Но нельзя уменьшить окно до одной колонки (до одного div-а).
Нельзя преодолеть рубеж 4−5 колонок (div-ов) - IE зацикливается.
В других браузерах этого не происходит.
Попробуйте пожалуйста уменьшить окно до одной колонки, интересно что у Вас получится?
Я выводила ширину окна в Вашем примере ив своем (с другими размерами div-а) и обнаружила, что Ваш и мрй пример зацикливают IE ровно при ширине окна 950px.
Вам это что-нибудь говорит?
Спасибо,
Галина
У меня без проблем уменьшается до одной колонки.
У меня все заработало после удаления, баров-надстроек в IE.
Спасибо
Галина
Замечательно.
А если задача немного иная? То есть, блоки расположены не слева-направо, а сверху-вниз, если объема хватает они стоят по одной вниз, если нет, выкидываются поочередно во второй вертикальный ряд.