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, то будет некрасивая пустота.
Если делать совсем грамотно, то надо яваскриптом определять разрешение экрана и в зависимости от этого менять ширину элемента, содержащего тумбы.
Lin
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 тумб в ряду будет).
хотя, на проду вроде особо не повлияло и вернул назад, тк фиксированный блок акуратно при любом разрешении смотрится
Skat
делаем стили
Код:
.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>