Текст в картинке

[daemon]

В ячейке таблицы находится картинка, в этой же ячейке внутри картинки должен находиться текст.

В IE прокатывает такой вариант

 
<tr>
	<td nowrap style=\"font-size:12px\" style=\"position: relative\">
	   <span id=\"hp_w\" style=\"position: absolute; left: 5px; z-index: 1; font-weight: bold; color: #FFFFFF\">Раз-два-три</span>
	   <img src=\"images/hp_g.gif\" width=300 height=14 border=0 name=green_hp vspace=0 align=absmiddle>
	</td>
</tr>

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

Отодвигать текст аттрибутом left от края экрана до самой таблицы не имеет смысла, т.к. при другом разрешении экрана уже будет несмотрибельно.

Каким-то образом можно сделать, чтобы текст находился в картинке непосредственно в ячейке этой таблицы?

[s0rr0w]

Каким-то образом можно сделать, чтобы текст находился в картинке непосредственно в ячейке этой таблицы?

Можно. Засунуть картинку в контейнер, который будет иметь position: relative

[daemon]

s0rr0w, я пробовал играться с этими параметрами, но в итоге получается что картинка встает после текста, если с текста убрать position: absolute; , а если не убирать, то текст вне таблицы с краю экрана...

Проблема именно в том, что при position: absolute; текст отображается не в ячейке таблицы внутри картинки, а в левом краю экрана, а играться Left'ом не вариант...

Или я что-то неверно понял в вашей идее? Не могли бы привести мой код с вашими исправлениями?

Edited February 5, 2009 by daemon

[s0rr0w]

s0rr0w, я пробовал играться с этими параметрами, но в итоге получается что картинка встает после текста, если с текста убрать position: absolute; , а если не убирать, то текст вне таблицы с краю экрана...

Проблема именно в том, что при position: absolute; текст отображается не в ячейке таблицы внутри картинки, а в левом краю экрана, а играться Left'ом не вариант...

Или я что-то неверно понял в вашей идее? Не могли бы привести мой код с вашими исправлениями?

Проблема заключается в том, что вы НЕВНИМАТЕЛЬНО читаете то, что вам пишут.

Я написал следующее:

Засунуть картинку в контейнер, который будет иметь position: relative

TD или TH присваивать position: relative абсолютно бесполезно.

<div style="position: relative">

<span style="position: absolute; left: 5px; z-index: 1; font-weight: bold; color: #FFFFFF">Раз-два-три</span>

<div style="width: 300px; height:14px; background: #666"> </div>

</div>

[daemon]

Большое спасибо.

TD и TH я не трогал) Перебрал кучу вариантов, а оказалось все на поверхности.

[s0rr0w]

Большое спасибо.

TD и TH я не трогал) Перебрал кучу вариантов, а оказалось все на поверхности.

<td nowrap style=\"font-size:12px\" style=\"position: relative\">

[SelenIT]

Не проще/лучше ли положить картинку бэкграундом на что надо?

[daemon]

s0rr0w, это осталось с "хороших" времен, а убрать руки не доходили. На самом деле хватит <td nowrap> =)

SelenIT, не проще конечно же-) Картинка динамическая, ее может вообще не быть, текст тоже динамически изменияется посредствам javascript. Поэтому необходим был такой вариант.

[s0rr0w]

s0rr0w, это осталось с "хороших" времен, а убрать руки не доходили. На самом деле хватит <td nowrap> =)

Css-свойство white-space вам неведомо?

[daemon]

Это все для наведения порядка и красоты будет естественно делаться. Пока же на данный момент мне главное, чтобы все работало, как задумано. А наведение порядка в дизайне будет только после того, как будет полностью написана и отлажена программная часть. Я уверен, вы бы испугались, если бы увидели, какой ужас творится в html-коде на данном этапе, но опять же сейчас задача - только работоспособность программы.

Edited February 6, 2009 by daemon