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

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

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

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

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

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

  2. 12

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

  3. 13
    sordes

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

  4. 19

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

  5. 20

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

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

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

    • 21

      Не понимаю…

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

  6. 22

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

  7. 26
    Далаирен

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

  8. 28
    Ксаныч

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

  9. 29
    mag13

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

  10. 30
    mag13

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

  11. 32
    mag13

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

    • 33

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

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

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

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

  12. 34
    mag13

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

  13. 35
    mag13

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

  14. 37
    mag13

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

  15. 38
    крок

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

  16. 40

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

  17. 41
    Алексей

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

  18. 45

    а как сделать если сделано не в таблице каждый блок прописан в div для резиновой странички? Спасибо!

  19. 47
    Galina

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

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

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

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

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

  20. 53
    Алексей

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

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