adminvps

Умные динамические колонки с применением 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
    Алексей
    @

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

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