Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > рястяжка бекграунда в таблице

Автор: JTOne 14.6.2007, 11:29

Подскажите как мне растягивать бекграунд или подскажите как вобще выходят из этой проблемы
Суть в том, и имею такую табличку

Код


<table border="0" cellpadding="0" cellspacing="0" style="background-image: url(pic/result/frame.jpg)" width="546px">
<tr height="34px">
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td>sadf
</td>
<td>asdfas
</td>
</tr>
</table>
</td>
</tr>
<tr height="88px">
<td>asdfas
</td>
</tr>
    </table>

И когда я помещяю в ячейки таблицы очень много текста, он конечно же растягиваеться, и снизу вылазит повторный бекграунд(бекграундна картинка размером 546х122, есть вариант ее порезать, вопрос как я это могу использовать), как вобще можно сделать неограничено по высоте таблицу, т.е. он каждый раз новоя высота, а бекграундная картинка остается?

Автор: webster 15.6.2007, 06:50

Есть два варианта, либо оставить эту картинку бэкгроундной и просто ее повторять - repeat, либо вставить в ячейку таблицы относительно позиционированный <img /> и задать ему стили:

Код


img
{
width: 100%; height: 100%; position: relative;...
}

но в таком случае при увеличении ячейки по оси y (то есть вних) будет так же непропорционально деформироваться и сам рисунок в ячейке таблицы.
Пример может выглядеть следующим образом:

Код

<table>
<tr>
<td style="width: 500px; height: 350px; background: pink;">
<p style="font: 100% Arial,Helvetica,sans-serif; color: #000; position: absolute; top: auto; left: auto; z-index: 200;">ddddddddddddddddddddddddddddddd</p>
<img src="#" style="width: 100%; height: 100%; background: red; position: relative; top: 0; left: 0; z-index: 100; display: block;" />
</td>
</tr>
</table>

с Доктайпом или без - не имеет значения.

Автор: JTOne 16.6.2007, 10:42

как реализовать аналогичное,

Тут идут блочки с найденным, и у них на фоне картинка, и ее размер как то подстраиваться под обьем данных в блочке
http://www.apartmenthomeliving.com/apartment_search/results.aspx?search_id=397979

Автор: webster 16.6.2007, 23:50

А вы пробовали в вашем примере реализации сайта смотреть код?!! Во-первых, картинки вставлены с помощью тегов <img /> , а во вторых, адреса картинок имеют абсолютные значения, да к тому же в теге <img /> не проставлен размер, а это значит что рисунок занимает площадь, соответствующую своему реальному размеру.
Поэтому, например картинки большего размера - <img src="http://www.apartmenthomeliving.com/img/comm/5124/5124_1739_185x135.jpg" alt="Lodge at Lakeline Village " /> - они так и имеют больший размер (он даже указан в их названии), чем другие картинки, например <img src="http://www.apartmenthomeliving.com/img/wm/24.jpg" alt="Addington, The" />. Можете вставить эти абсолютные адреса в строку поиска броузера и посмотреть на экране реальные размеры этих картинок.

Автор: JTOne 17.6.2007, 13:32

ок, я понял, может быть, хорошо, а как реализовать аналогичное, не делая 1000 картинок разных размеров?

Автор: webster 17.6.2007, 15:12

Задайте у всех картинок, которые у вас будут отображаться в одинаковых блоках размер стилями width и height одинаковый для всех картинок... только желательно, чтобы у вас и картинки были такого же (или пропорционального, иначе у вас при увеличении или уменьшении, а это делает сам тег <img /> в зависимости от указанных в нем размерах-увеличивает или уменьшает, то есть вписывает в себя, картинки произойдет ее деформация продольная или вертикальная) размера или, как я уже говорил - пропорционального. Во всех случаях всегда готовятся картинки (их размеры) под дизайн, а не наоборот.