Позиционирование

~Kitty~ · April 9, 2008

Имеем ячейку таблицы заданной высоты и картинку в этой ячейке, высота которой больше этой таблицы.

<tr>
 <td height="38" style="font-size: 1px;">
 <div class="raz">
 <img src="img/raz.gif" alt="" style="position: absolute;"/>
 </div>
 </td>
 <td height="38" class="foot">
 текст
 </td>
</tr>

css:

div.raz {
 position: relative;
 right: -30px;
 width: 57px;
 height: 61px;
 float: right;
}

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

P.S. Текст во второй ячейке в одну строчку и никак не растягивает высоту.

Storm · April 9, 2008

Поставить картинку в фон ячейки

~Kitty~ · April 9, 2008

И тогда картинка обрежется по высоте ячейки, а надо, что бы она просто выходила за границы ячейки.

Storm · April 9, 2008

А каким образом картинка может выйти за пределы ячейки?

~Kitty~ · April 9, 2008

Если она будет спозиционированая. Она получается как бы верхний независимый слой. Но даже если поставить z-index, в данном случае почему-то не работает. Я вот и хочу понять почему. Что неправильно в коде написано.

Для примера http://tabletka.ru/ - посмотри как внизу сделана ступка (где указаны часы работы).

Storm · April 9, 2008

Задача, собственно, в чем состоит? Должен быть текст, на его фоне прямоугольник, залитый цветом, высота которого не меняется, и картинка, расположенная рядом с этим текстом?

~Kitty~ · April 9, 2008

Собственно говоря, должно получится вот что:

Полоски - рамки таблицы.

ZoNT · April 9, 2008

так сделай так же как и ступка!

Storm · April 9, 2008

Если размеры таблицы фиксированы, то можно применить такой при?м:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
table {background:green;}
td {background:#FFF;width:100px;text-align:center;}
#img {width:30px;height:30px;background:gray;position:absolute;top:9px;left:88px;}
/*]]>*/
</style>
</head>
<body>
<div style="position:relative;">
<div id="img">img</div>
<table border="0" cellspacing="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</body>
</html>

~Kitty~ · April 9, 2008

Я и сделала. Код выше. Я и пытаюсь понять, что в н?м не то, потому что в мо?м случае не работает. Ячейка оста?тся той же высоты, что и картинка. Может, есть другой способ какой?..

~Kitty~ · April 9, 2008

2Storm: Размеры таблицы не фиксированы, т.к. это таблица со списком товаров. Высота и ширина могут зависит от наполнения и ширины экрана. А вот высота нижней ячейки - фиксирована.

Storm · April 9, 2008

Новый вариант

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
table {background:green;}
td {background:#FFF;width:100px;}
#img {width:30px;height:30px;background:gray;position:absolute;top:-20px;left:-20px;}
/*]]>*/
</style>
</head>
<body>

<table border="0" cellspacing="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>
<div style="position:relative;">
<div id="img">img</div>
</div>
4
</td>
</tr>
</table>
</body>
</html>

Почитай

http://htmlbook.ru/css/position.html

У тебя не получалось из-за того, что у div-а с картинкой было свойство position:relative

~Kitty~ · April 9, 2008

Ура, получилось. Огромное спасибо за подсказку =)

Просто что интересно, на сайте, откуда брался пример подобного кода (со ступкой) у дива с картинкой тоже стояло position:relative и вс? работало.. Меня теперь это удивляет.

Но хотя, конечно, главное, что вс? работает в мо?м случае =)

Ещ? раз спасибо =)

ZoNT · April 9, 2008

position: relative;
right: -30px;

Нет, так не покатит - это вам не абсолютное позиционирование

ZoNT · April 9, 2008

На сайте позишн релэйтив и лефт отрицательный! А у вас райт!

~Kitty~ · April 9, 2008

А это играет такую большую роль - вправо или влево мы сдвигаем позиционируемый relative блок? Я всегда считала, что это не играет разницы..

Спасибо, что просветили..

Sign In

Позиционирование

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information