Фоновая картинка в ячейке <table>. - Веб программирование

sba wrote:

> kan>В общем, лучше опиши, какого ты эффекта хочешь добиться, а мы
> подумаем, как это можно сделать.
> Например сделать градиентную заливку беграунда ячейки таблицы. У меня
> растровая картинка с градиентом, размеры 320*20 масштабируется прекрасно
> даже до размеров 1000х1000.
Не верю, что прекрасно.

> ЗЫ. Градиент горизонтальный так что повторением ничего не добьюсь.
Ну дык гугли "html gradient", тут же находится IE-only решение на фильтрах.
Для FF можно заюзать svg.

Posted via RSDN NNTP Server 2.0

Здравствуйте, sba, Вы писали:

sba>Практически получен желаемый результат, осталось только АВТОМАТИЧЕСКИ подбирать высоту имейжа по высоте ячейки.
sba>КАК?

sba>

sba><table border="0" cellspacing="0" cellpadding="0" id="FormCaption" 
sba>{if $width} width="{$width}" {else} width="100%" {/if}>
sba>    <tr>
sba>        <td height="100%" align="center" valign="middle" style="font-size: 100%">
sba>            <div style="position: relative; z-index: -1; left: 0; top: 0; width: 100%;"> 
sba>            <img src="img/Caption.gif" border="0" style="position: absolute; left:0; top:0; width:100%; height: 20;">
sba>            </div>
sba>            {$Caption}
sba>        </td>
sba>    </tr>
sba></table>
sba>

Ну, во-первых:

width={$width:default:"100%"}

А во-торых, можно сделать вообще без таблицы за пару дивов.
http://www.htmlbook.ru/content/?pid=17

... << RSDN@Home 1.1.4 stable SR1 rev. 568>>

Доброго времени суток.

Господа помогите создать кроссбраузерный ХТМЛ-код, для отображения в фоне определенной ячейки таблицы или в фоне самой таблицы промасштабированной картинки. И поверх нее должен отображаться текст ячейки. Кроме того зараее неизвестны ни ширына ни высота ячейки.

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

<table border="0" cellspacing="0" cellpadding="0" id="FormCaption" 
{if $width} width="{$width}" {else} width="100%" {/if}>
    <tr>
            <td height="100%" align="center" valign="middle">
                {$Caption}
            </td>
            
            <div style="position: relative; z-index:-1; height:100%;"> 
            <img src="img/Caption.gif" border="0" style="top:0; left:0; height: 20; position: absolute; width:100%">
            </div>
    </tr>
</table>

Заранее благодарю за помощь.

Здравствуйте, sba, Вы писали:

sba>Господа помогите создать кроссбраузерный ХТМЛ-код

Насколько кросс-браузерный?

sba>Следующий код

... ужасен. Растоптать и выбросить — td/div в одной строке.

Без JS все поставленные условия imho невыполнимы в рамках только html/css.

Все, что здесь сказано, может и будет использоваться против меня...

Здравствуйте, Alex Reyst, Вы писали:

AR>Насколько кросс-браузерный?
По крайней мере IE+Opera

sba>>Следующий код
AR>... ужасен. Растоптать и выбросить — td/div в одной строке.
пасибки

В ХТМЛ не силен.
td/div в одной строке получено методом научного тыка. Просто без относительного <div> последующий контейнер
<img> оставляет пустое пространство в том месте где он должен быть без использования стилей.

AR>Без JS все поставленные условия imho невыполнимы в рамках только html/css.
Вприеципе решенее на JS тоже подойдет.

Практически получен желаемый результат, осталось только АВТОМАТИЧЕСКИ подбирать высоту имейжа по высоте ячейки.
КАК?

<table border="0" cellspacing="0" cellpadding="0" id="FormCaption" 
{if $width} width="{$width}" {else} width="100%" {/if}>
    <tr>
        <td height="100%" align="center" valign="middle" style="font-size: 100%">
            <div style="position: relative; z-index: -1; left: 0; top: 0; width: 100%;"> 
            <img src="img/Caption.gif" border="0" style="position: absolute; left:0; top:0; width:100%; height: 20;">
            </div>
            {$Caption}
        </td>
    </tr>
</table>

Здравствуйте, sba, Вы писали:

sba>Практически получен желаемый результат, осталось только АВТОМАТИЧЕСКИ подбирать высоту имейжа по высоте ячейки.
sba>КАК?

Еще раз — без JS никак.

Даже в том виде, в котором этот код "работает" сейчас — это следствие попустительства браузеров. Этот код не должен отрисовываться, и браузеры, стандарт соблюдающие, этого и не делают — Mozilla, например. Глюками же браузеров для достижения полезных целей пользоваться категорически не советую.

А вот пример того, как это можно сделать с помощью JS. Под собственные нужды доработать напильником.

Все, что здесь сказано, может и будет использоваться против меня...

sba wrote:

> Практически получен желаемый результат, осталось только АВТОМАТИЧЕСКИ
> подбирать высоту имейжа по высоте ячейки.
> КАК?
Вообще говоря, изменять размеры растровых картинок — гиблое дело — выглядит преотвратно, тебе лучше пересмотреть дизайн
и вместо растягивания сделать повторение. Тогда можно сделать:

<td style="background: url(img/Caption.gif) repeat-y">

В общем, лучше опиши, какого ты эффекта хочешь добиться, а мы подумаем, как это можно сделать.

Posted via RSDN NNTP Server 2.0

Здравствуйте, kan, Вы писали:

kan>В общем, лучше опиши, какого ты эффекта хочешь добиться, а мы подумаем, как это можно сделать.
Например сделать градиентную заливку беграунда ячейки таблицы. У меня растровая картинка с градиентом, размеры 320*20 масштабируется прекрасно даже до размеров 1000х1000.

ЗЫ. Градиент горизонтальный так что повторением ничего не добьюсь.

	От:	kan
	Дата:	16.11.06 11:25
	Оценка:	2 (1)

От:	kost-BebiX	http://fedorastones.blogspot.com
Дата:	16.11.06 21:27
Оценка:	2 (1)

	От:	sba
	Дата:	15.11.06 10:31
	Оценка:

	От:	Alex Reyst
	Дата:	15.11.06 11:05
	Оценка:

	От:	sba
	Дата:	15.11.06 11:14
	Оценка: