Форум

Alexofer · #1 (**permalink**) 30.12.2008, 04:05

Помогите пожалуйста!
Задача вот в чем:
На страничке имеется таблица с ячейкой динамического размера. Нужно чтобы картинка (или слой <div>) всегда располагались в нижнем правом углу, даже при изменении размеров ячейки.
Силами CSS эту проблему не решить. Покапавшись в инете я нашел один пример кода но с ява скриптами я только начинаю разбираться и многое еще темный лес для меня.
Если кто знает напишите пример кода с наглядным объяснением что к чему... Заранее спасибо.

P.S. я не хочу чтобы за меня написали код, я хочу понять и разобраться

Octane · #2 (**permalink**) 30.12.2008, 09:48

Может быть всётаки достаточно только CSS:

td {
background: url(...) no-repeat bottom right;
}

ну а если нужен блок с изображением, то абсолютно позиционируйте его в relative ячейке таблицы, опять же тут JavaScript может понадобится, если только изображение будет иметь переменные размеры.

Alexofer · #3 (**permalink**) 30.12.2008, 12:18

Спасибо, но CSS мне не совсем помогает. дело в том что у ячейки уже есть фон. а когда я пользуюсь relative, то стоит измениться ячейке или предъидущей ячейке по высоте, к примеру, то слой (картинка) остается там же где и была относительно экрана, но не ячейки.
В инете я нашел следующий ява скрипт, но что он делает я толком разобраться не могу, пока:
(вот ссылка на страницу со скриптом)
http://forum.codeby.net/topic5440.html

объясните, если не трудно, что это такое.

Octane · #4 (**permalink**) 30.12.2008, 13:58

Ну самый простой вариант вот:

<!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

Alexofer · #5 (**permalink**) 30.12.2008, 23:49

Спасибо! Есть прогресс))) Теперь слой с картинкой всегда привязан к нижнему краю ячейки, но почему то горизонтально висит по середине ячейки и на него не влияет CSS выранивание((( Как это исправить?
Если не трудно можете дать ссылку на какой нибудь сайт с описанием функций яваскрипта и объяснить что значит каждый элемент в коде который Вы прислали мне. Если это конечно не затруднительно.
Заранее спасибо!

Octane · #6 (**permalink**) 31.12.2008, 00:04

Я думаю мои обьяснения не помогут, если вы не понимаете, что происходит в этом простиньком коде. Почитайте основы JavaScript, на этом сайте можно найти всю необходимую информацию.

Alexofer · #7 (**permalink**) 31.12.2008, 00:14

Ясно! Всеравно спасибо за информацию))) Буду капать дальше сам))) Еще раз спасибо!

Форум

Справочник

Discord чат

Курсы javascript