Меню
Что нового?

Спозицировать картинку в ячейке. IE vs Opera

flower

Новичок
Спозицировать картинку в ячейке. IE vs Opera

В одной из ячеек таблицы имеется ещё одна таблица. В одной из её ячеек не удаётся сделать DIV style='height:100%;'. А он нужен для того, чтобы спозиционировать там картинку. Если делать без DIV, придав ячейке, относительно которой нужно спозиционировать картинку, position:relative, то это срабатывает только в IE. В Opera позиционирует относительно BODY. Что не так делаю?

Код: 
<html>
<body>

<table border=1 width=100% height=100%>
<tr>
<td width=20%>ячейка1</td>
<td width=60%>
ячейка2
</td>

<td width=20%>
<table border=1 width=100% height=100%>
<tr><td height=10>верх</td></tr>
<tr><td>

<div style='height:100%; border:2 solid red; position:relative;'>
ячейка2
середина
<img width=50 height=50 alt='картинка' style='border:2 solid black; position:absolute; bottom:0; right:0;'>
</div>

</td></tr>
<tr><td height=10>
низ
</td></tr>

</table>
</td>

</tr>
</table>

</body>
</html>
 

dimagolov

Новичок
зачем вообще игры с position у картинки? убери нафиг вместе с bottom и right, ну и div убери.

тебе же просто надо картинку в таблицу вставить и все?
 

flower

Новичок
"просто" прилепить её к правому нижнему углу средней ячейки вложенной таблицы.
 

dimagolov

Новичок
почему не воспользоваться td align, а высоту (или ширину) сделать равной картинке?
 

flower

Новичок
Потому что в ячейке, помимо картинки, прилепленной в угол, будет текст, который может налезать на данную картинку (у неё z-index будет ниже, чем у текста).
 

dimagolov

Новичок
извращенец. клади картинку в background и прописывай background-position куда там тебе хочется.
 

flower

Новичок
Бэкграунд уже положен - другой рисунок. чем удостоился Вашего оскорбления, уважаемый?
 

dimagolov

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

flower

Новичок
Вопрос был, собственно, в том, почему не получается задать DIV'у высоту, равную 100% высоты ячейки таблицы, в которой он расположен.
Насчёт задумки - не хотел загружать лишним, но если просите, то идея состоит в том, чтобы прилепить к каждому углу ячейки по узорчику-завитушке, которые будут располагаться над бэкграундом, но под текстом. Никаких проблем и извратов тут, на мой взгляд, нет.
 

dimagolov

Новичок
по-моему должно получиться первый background прописать таблице или ее контейнеру, а уголок ячейкам.

-~{}~ 28.01.09 17:10:

по-моему 100% высоты ячейки хрен выйдет, так как высота ячейки растягивается по содержимому по дефолтному поведению. когда мне подобная хрень понадобилась (а именно перечеркивать строку таблицы красной линией с текстом посередине), то я рисовал контейнер position:relative, в нем два дива position: absolute; top: 0px; left: 0px, в первый выводил собственно таблицу с данными, а во второй строчки с div-ом чертой. Так как это была форма для печати, то все размеры были выставленны жестко и в см.
 

flower

Новичок
Автор оригинала: dimagolov
по-моему должно получиться первый background прописать таблице или ее контейнеру, а уголок ячейкам.
-~{}~ 28.01.09 17:10:

Решено! Спасибо за поодержку.

<html>
<body>

<table border=1 width=20% height=100%>
<tr>
<td bgcolor=yellow>

<div style='height:100%; border:1 solid red; position:relative; z-index:2;'>
текст текст текст текст

<img width=50 height=50 alt='картинка' style='border:2 solid red; position:absolute; top:0; left:0; z-index:-1;'>
</div>

</td></tr></table>

</body>
</html>
Нажмите для раскрытия...
 
Войдите или зарегистрируйтесь для ответа.
Сверху