Привязка картинки к углу ячейки таблицы! Помогите с кодом!
Помогите пожалуйста!
Задача вот в чем: На страничке имеется таблица с ячейкой динамического размера. Нужно чтобы картинка (или слой <div>) всегда располагались в нижнем правом углу, даже при изменении размеров ячейки. Силами CSS эту проблему не решить. Покапавшись в инете я нашел один пример кода но с ява скриптами я только начинаю разбираться и многое еще темный лес для меня. Если кто знает напишите пример кода с наглядным объяснением что к чему... Заранее спасибо. P.S. я не хочу чтобы за меня написали код, я хочу понять и разобраться |
Может быть всётаки достаточно только CSS:
td {
background: url(...) no-repeat bottom right;
}
ну а если нужен блок с изображением, то абсолютно позиционируйте его в relative ячейке таблицы, опять же тут JavaScript может понадобится, если только изображение будет иметь переменные размеры. |
Спасибо, но CSS мне не совсем помогает. дело в том что у ячейки уже есть фон. а когда я пользуюсь relative, то стоит измениться ячейке или предъидущей ячейке по высоте, к примеру, то слой (картинка) остается там же где и была относительно экрана, но не ячейки.
В инете я нашел следующий ява скрипт, но что он делает я толком разобраться не могу, пока: (вот ссылка на страницу со скриптом) http://forum.codeby.net/topic5440.html объясните, если не трудно, что это такое. |
Ну самый простой вариант вот:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
position: relative;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
height: 300px;
padding: 0;
vertical-align: top;
border: 1px solid #ccc;
}
#img {
position: absolute;
width: 100px;
height: 100px;
background: #f00;
}
</style>
<script type="text/javascript">
window.onload = function() {
var img = document.getElementById('img'), td = img.parentNode;
document.body.appendChild(img);
img.style.top = (td.offsetTop + td.offsetHeight - img.offsetHeight) + 'px';
img.style.left = (td.offsetLeft + td.offsetWidth - img.offsetWidth) + 'px';
};
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Ячейка</td>
<td>
<p>Ячейка</p>
<div id="img">Картинка</div>
</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>
</body>
</html>
Но все это дело очень сильно зависит от верстки и если таблица резиновая, то еще и событие window.onresize надо обрабатывать и заново считать координаты блока #img |
Спасибо! Есть прогресс))) Теперь слой с картинкой всегда привязан к нижнему краю ячейки, но почему то горизонтально висит по середине ячейки и на него не влияет CSS выранивание((( Как это исправить?
Если не трудно можете дать ссылку на какой нибудь сайт с описанием функций яваскрипта и объяснить что значит каждый элемент в коде который Вы прислали мне. Если это конечно не затруднительно. Заранее спасибо! |
Я думаю мои обьяснения не помогут, если вы не понимаете, что происходит в этом простиньком коде. Почитайте основы JavaScript, на этом сайте можно найти всю необходимую информацию.
|
Ясно! Всеравно спасибо за информацию))) Буду капать дальше сам))) Еще раз спасибо!
|
| Часовой пояс GMT +3, время: 22:46. |