Изменение количества тумб в зависимости от разрешения

Как такое сделать? Увидел на silverasian.com (меняем разрешение на более низкое, получаем меньшее количество тумб в ширину).

Дык код посмотри ;)

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

Цитата:

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

на самом деле пофик в чем выводить, логика везде примерно такая:

Код:

<div/table class="thumbs"> /*if table - <tr><td> */ <img src="thumb.jpg"> <img src="thumb.jpg"> <img src="thumb.jpg"> <img src="thumb.jpg"> <img src="thumb.jpg"> /*if table - </tr></td> */ </div/table>

далее делаем в css

Код:

.thumbs {width:100%}//или любую другую по вкусу .thumbs img {float:left;}

далее браузер будет вставлять в ряд столько тумб, сколько вместит окно браузера.
это самый простой способ, однако если у человека не хватат 1px чтобы вместо 4х тумб засунуть 5, то будет некрасивая пустота.
Если делать совсем грамотно, то надо яваскриптом определять разрешение экрана и в зависимости от этого менять ширину элемента, содержащего тумбы.

Nikit@ писал:

на самом деле пофик в чем выводить, логика везде примерно такая: Код: <div/table class="thumbs"> /*if table - <tr><td> */ <img src="thumb.jpg"> <img src="thumb.jpg"> <img src="thumb.jpg"> <img src="thumb.jpg"> <img src="thumb.jpg"> /*if table - </tr></td> */ </div/table> далее делаем в css Код: .thumbs {width:100%}//или любую другую по вкусу .thumbs img {float:left;} далее браузер будет вставлять в ряд столько тумб, сколько вместит окно браузера. это самый простой способ, однако если у человека не хватат 1px чтобы вместо 4х тумб засунуть 5, то будет некрасивая пустота. Если делать совсем грамотно, то надо яваскриптом определять разрешение экрана и в зависимости от этого менять ширину элемента, содержащего тумбы.

+1, делал так, можно ещё поподбирать количество тумб в блоке чтобы последняя строчка при разных разрешениях тоже заполнялась полностью (например блок из 30 тумб будет норм. если 5 или 6 тумб в ряду будет).
хотя, на проду вроде особо не повлияло и вернул назад, тк фиксированный блок акуратно при любом разрешении смотрится

делаем стили

Код:

.content {    margin: 0px auto;    width: 98%; // чтобы сильно к краям не прижималось    text-align: center; } .content img {    margin: 2px; // отступ от каждой картинки    height: 180px;    width: 240px; }

далее в коде самом уже и в самом темлейте:

Код:

<div class="content"></a> <a href=""><img src="" alt="" /></a> <a href=""><img src="" alt="" /></a> ... <a href=""><img src="" alt="" /></a> </div>