Умные динамические колонки с применением CSS и jQuery

Умные динамические колонки с применением CSS и jQuery

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

Комментарии (55)

  1. Красиво:)
    Возмем на заметку.

    Еще бы к этому автоматическое подстраивание размера шрифта под разные разрешения, раз уж скрипт используется :)

    • Удивлен, что тебе понравилось, ты же не любишь скрипты.

      • Удивлен…

        У куда без них, Дима :)
        Тенденция однако :)
        Но ты подумай, как с размером шрифта при разном разрешении быть.
        Еще бы при при уменьшении размеров экрана монитора пропорции соблюдались бы, размер колонки уже — шрифт чуть меньше :)

        • Т.е. ты хочешь, чтоб шрифт был тем больше, чем больше разрешение экрана и наоборот (в указанных пределах)?

          Я предполагаю, что это можно сделать по аналогии с колонками, только для этого нужно знать зависимость, т.е. в какой пропорции делать изменение размера шрифта в зависимости от размера экрана.

          • Да, именно так, чтобы все было автоматом. Понятно, что задача не простая и может быть однозначного решения не имеет, но лично не отказался бы от такой фишки :)

            • В общем, я понял. Сейчас сделал, так сказать, набросок, уже кое-что получилось. Так что это вполне реально реализовать.

              • Давай, давай :)

                Тоже озадачился этой проблемой, так сказать пролог «Контроль», примеры там есть, но это только про подгонку размеров макета при разных разрешениях, до размеров шрифта, еще не созрел :)

                • Получилось — http://dimox.name/fontsize.html. С кроссбраузерностью проблем нет.

                  В самом скрипте есть 2 настройки:

                  var width = 1000; // ширина, от которой идет отсчет
                  var fontSize = 12; // минимальный размер шрифта

                  1000 — это та же ширина, что и усновного родительского блока (#wrapper).

                  Кроме тега body, у всех тегов нужно использовать em вместо px (там, где ты хочешь динамически менять размер шрифта).

                  Пожалуй, уже можно писать статью на эту тему =)

                  • Круто :)
                    Пиши статью, но лучше, если за основу макет возьмешь стандартный трех колоночный.
                    Пусть там и ширина колонок меняется и размер шрифта.
                    И в пошаговом режиме объяснялка, что, как и куда.
                    Цены тогда ей не будет :)
                    Всех к тебе засылать буду, для прочтения :)

                  • смотрел в konqueror при определенной ширине браузера, начинается «слайд шоу»!!!
                    ширина около 1200-1300, точно сказать не могу, ибо ФФ еще не ставил!

                  • К сожалению, указанная вами ссылка не работает сейчас.
                    Не могли бы вы воскресить эту страницу?

                    Заранее спасибо.

  2. Да, все хорошее вовремя…
    Делал подобное в своем проекте, то там было немного веселее, там такое происходило с таблицей :) это уменьшает вероятность того что во «всемилюбимом» ИЕ распологаться блоки будут хорошо…

  3. Может, я чего проглядел, но ИМХО, вместо jQuery можно было бы обойтись ведением min-width.
    А шЫштой осел — да забудем уже про него:-)

  4. Дима, кинул тебе на мыло, свою новую разработку,
    к ней поможешь свое хозяйство прикрутить?

  5. Пиши статью, но лучше, если за основу макет возьмешь стандартный трех колоночный.
    Пусть там и ширина колонок меняется и размер шрифта.

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

    А изменение размера шрифта к такому макету можно прикрутить.

    • Не понимаю…

      Нет, конечно, переноса колонок делать не надо :)
      Но динамика измения ширины колонок и одновременно размера шрифта нужна.
      Важны пропорции не только в ширине колонок , но и в расстоянии между ними.
      Приблизительно так, как в посланном тебе на мыло, моем макете,
      не важно, что там фиксированная колонка, в принципе все может прокручиваться.
      Причем, вместе с min/max-width всему макету.
      Пусть ширина колонок в %.
      Как пропорциональное именине размера шрифта к этому привязать?

  6. Спасибо, Дима за помощь.
    Все получил.
    Играюсь :)
    Если будут вопросы то задам, ты же автор данной фишки.
    Пиши статью, от себя обязательно линк дам,
    думаю многим пригодится.

    • Пожалуйста. Статью напишу.

      • К тому, что ты сделал для меня, по моей просьбе,
        надо бы добавить из оригинального примера возможность масштабирования картинок, тогда полный фен-шуй будет :)
        И, как писал, рассмотреть все на конкретном примере — стандартной трех колоночной разметке, во всех подробностях.
        Может даже и не на одну статью потянет :)

  7. FF3 Win7RC1
    Скрипт, боюсь, не выполняет свою функцию.
    Opera10 Wnin7RC1 — нормально.

  8. Спасибо, очень интересный пример! Интересно и увлекательно разобран по полочкам. Что-то в этом роде я придумал на div, а на списках не догадался. Не додумался и картинкам назначать ширину width: 89% — клёво!
    Но вот вопрос: я решил этот пример использовать для фотоальбома, в котором фоты наложены «внавал», резиново. Но к каждой фотке хотелось бы вставить комменты.
    Если размеры и ориентация, а также объем комментов строго одинаков, то все идет пучком: при изменении разрешения экрана, размера окна браузера все резиновое и «резинит» отлично.
    Но в реале фотки имеют разный размер и ориентацию, разный объем текста и колонки получаются разной высоты. И вот тут получается неприятный фикус-покус: маленькие колонки цепляются за высокий правый край бОльших колонок, находящихся раньше — получаются зияющие пустоты. Как их избежать — ума не приложу.
    Может честной изобретательный и остроумный народ подскажет что-то оч.ценное? Или такая идея неважнецкая?

  9. а как закинуть шаблон в joomla?

  10. А почему он не воспринимает русский шрифт?Как актуализировать русский шрифт ?

  11. Подскажите пожалуйста в какую кодировку написать и где, наверно В CSS. Очень надо

    • Во-первых, кодировка указывается в текстовом редакторе, в котором сохраняется файл.

      Во-вторых, она указывается в HTML-коде в теге <meta>, например:

      <meta http-equiv="content-type" content="text/html; charset=utf-8" />

      Здесь utf-8 — это название кодировки. Она должно быть одинаковой в обоих случаях. Можно также использовать кодировку windows-1252.

  12. Спасибо Dimox, буду пробовать)

  13. не получается( Dimox скажи пожалуйста как в кодировке демо сайта сделать так чтобы читался русский шрифт. Я поменял то, что ты говорил и в настройках блокнота по умолчанию задал данную кодировку (UTF-8), но ничего не помагает((

  14. Сработало!Большое спасибо Dimox. Очень помог частенько буду посещать этот сайт!

  15. Подскажите куда вставлять jQuery Сайт будет под Joomla Спасибо!

  16. Каким образом в блоки картинки вставить? Спасибо!

  17. Алексей
    9 лет назад

    как можно распределить свободное пространство между блоками!? Спасибо!

    • Вопрос непонятен.

      • у вас свободное пространство распределяется в блоки тем самым они растягиваються одинаково и заполняют всю страницу по ширене с фиксированными отступами между блоками.
        А как сделать так чтобы свободное пространство распределялось между блоками а сами блоки оставались с теми же размерами?

        • Сходу я могу лишь сказать, что самое просто — сделать это таблицей. Вот пример:

          
          <table style="width:100%">
          	<tr>
          		<td style="width: 150px">123</td>
          		<td></td>
          		<td style="width: 150px">456</td>
          		<td></td>
          		<td style="width: 150px">789</td>
          	</tr>
          </table>
          
  18. а как сделать если сделано не в таблице каждый блок прописан в div для резиновой странички? Спасибо!

  19. Добрый день,
    хорошая тема.

    1. В браузерах Opera и Firefox пример работает как задумано.

    2. В браузере IE приведенный пример не работает:
    — ширина колонок (div-ов) не изменяется при изменении ширины окна;
    — колонки (div-ы) ведут себя как div-ы со стилем float и поэтому справа всегда какое-то место остается. Div-ы не заполняют все пространство.
    — при уменьшении экрана до размера, на котором помещается 4 div-а IE входит в ступор — зацикливается. После этого его остается только закрыть.

    3. Напишите пожалуйста, не встречался ли в Вашей практике плагин или пример работающий на трех браузерах.

    Галина
    PS Ссылки на пример, переадресовываются и пример получить нельзя.

  20. А если задача немного иная? То есть, блоки расположены не слева-направо, а сверху-вниз, если объема хватает они стоят по одной вниз, если нет, выкидываются поочередно во второй вертикальный ряд.

Ваш комментарий