Элемент поверх элемента

[Dracul]

Вот какой вопрпосик:
Нужно сделать так, что бы на картинке (расположенна в ячейке таблицы) появлялся текстовый блок.
Вот пример:

<table>
   <tr>
      <td>
         <img src='путь_к_картнке'>
         <span id='pole'>Текст на картинке</span>
      <td>
   </tr>
</table>

Данный текст на картинке, должен начинаться в левом нижнем углу картинки

Я попытался реализовать это следующим способом:

#pole
{
position: relative;
top: -18px;
left: 2px;
display:block;
float: left;
background-color:#ffffff;
}

Заработало, за исключением одного. Под картинкой осталось пустое место (ровно столько сколько и занимал бокс с текстом)

[Chuda]

а если просто картинку фоном поставить?

[RXL]

Dracul, посмотри в спецификацию: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

При position:relative элемент остается в потоке - можно лишь смещать его от начальной позиции.
Здесь тебе нужно position:absolute.

Есть несколько замечаний:
1. Используй не span с display:block, а div. span - inline-элемент, а div - блочный. В остальном они одинаковы.
2. Т.к. img - inline-элемент, а ячейка таблицы может быть больше этой картинки, то img может переместиться по горизонтали из-за выравнивания. Помести текстовый блок перед картинкой, а ячейке назначь выравнивание текста влево. Правда это с оговоркой: ты не сообщил задачу!

а если просто картинку фоном поставить?

Тоже выход, но тогда надо четко задать размер ячейки под размер картинки.

[Dracul]

Картинка являеться ссылкой, а расопложенный текст на картинке короткий (в ширину он не более 50% от картинки) и указывает размер большой картинки (вес файла).

Если я бубу испоьзовать - position:absolute - то я так понял, что для нее координаты задаються от верхнего-левого угла окна браузера, а ведь я незнаю координаты картинки

[Aveic]

Если я бубу испоьзовать - position:absolute - то я так понял, что для нее координаты задаються от верхнего-левого угла окна браузера, а ведь я незнаю координаты картинки

Не всегда. если родительский элемент имеет position:relative, то дочерний элемент при выставлении position:absolute будет отсчитывать от верхнего левого угла родительского элемента вот так.

Код:

<table>
   <tr>
      <td style='position:relative'>
         <img src='путь_к_картнке'>
         <span style='position:absolute;left:5px;top:5px;'>Текст на картинке</span>
      <td>
   </tr>
</table>

В итоге span должен отступить от начала td по 5 пикселей влево и вниз.

[RXL]

"Абсолютные координаты" отсчитываются от верхнего левого угла родительского элемента.
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

absolute
    The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

расопложенный текст на картинке короткий (в ширину он не более 50% от картинки)

Это никакой роли не играет. Ширину надо задавать руками.
Вот мой пример: https://forum.shelek.ru/index.php/topic,14140.msg166566#msg166566
Попробуй в нем у .caption убрать width и увидишь, о чем я говорю.

[Aveic]

"Абсолютные координаты" отсчитываются от верхнего левого угла родительского элемент

также как с JS

[Dracul]

Aveic спасибки

[Dracul]

Упс... В осле работают оба примера и от RXL и от Aveic
В Опере и Мазиле - оба работают одинаково - не так как надо:
 - от Aveic - не работает ваще (то есть указания координат начинают отсчитываться от верхнего левого угла браузера)
 - от RXL - не совсем как надо (если настроить смещение для осла, то в опере и мазиле - эти смещения выглядят совсем по другому)

Так что видать ридеться делать все ввиде фона

[Aveic]

- от Aveic - не работает ваще (то есть указания координат начинают отсчитываться от верхнего левого угла браузера)
Так что видать ридеться делать все ввиде фона

для того чтобы в опере пахал надо или

Код:

<table>
<tr>
<td style='position:relative;display:block;'>
	<img src='' style='position:absolute;top:20px;left:220px;'/>
</td>
</tr>
</table>

тогда отсчитает и в опере и мазиле

[RXL]

Dracul, поклеп! Я испытывал в SeaMonkey 1.1 (Gecko 1.8.1.2pre) и IE6. Картина совершенно одинакова. С точностью до пикселя.
В IE есть проблемы когда задаешь смещение в процентах - используй абсолютные единицы.

[Dracul]

%) вот пример:

[RXL]

Dracul, ты издеваешься что ли?
Помимо мыльного формата, положил неручной код, да еще и с абсолютными путями... Позор! В помойку такой код!
Кроме того: у тебя html 4.0 transitional с укороченным DTD (что не правильно), а у меня xhtml 1.0 transitional. Разные это вещи. Сравнивать надо корректно.

[Dracul]

нет не издеваюся а формат mht мне ваще нравиться, в нем намного удобнее веб странички сохранять, чем в паре фалик + папочка с картинками и прочим...

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

ps: набрал сей код ручками - действительно работает, приношу извенения за тугодумость (я о примере Aveic-а)

[RXL]

Не ручной код действительно надо причесывать - эти редакторы опираются прежде всего на визуальность, а качество и совместимость оставляют желать лучшего.

Насчет mht: ну, да, просмотреть в IE я могу и так, но как только я хочу открыть в чем-то еще, посмотреть код (не в notepad.exe, а в другом редакторе) и поправить код, тут начинается геморрой. Лучше не извращаться...

[Chuda]

Dracul, вот посмотри:

[RXL]

Шильгия, история повторяется? Теперь чтоб посмотреть надо искать софтину, которая это дело распакует? Зачем шифруетесь?

[Chuda]

нет не повторяюся  а формат webarchive мне ваще нравиться, в нем намного удобнее веб странички сохранять, чем в паре фалик + папочка с картинками и прочим... ©

Вообще-то это в адрес Дракула. Простая демонстрация, как каждому может своё оказываться удобнее, и насколько неудобно это может оказаться для широкой общественности. Ничего ценного в приложенном мною файле нет, но ведь зато как удобно этот формат использовать на любом макинтоше, где есть safari3!

[Sla]

Шильгия, злая ты

[Алексей++]

Инга не злая, Инга хорошая

[Sla]

 

[Алексей++]

просто я злой )

[RXL]

Будет вам. Давайте лучше по теме.