Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.12.2008, 03:05
Новичок на форуме
Отправить личное сообщение для Alexofer Посмотреть профиль Найти все сообщения от Alexofer
 
Регистрация: 30.12.2008
Сообщений: 4

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

P.S. я не хочу чтобы за меня написали код, я хочу понять и разобраться
Ответить с цитированием
  #2 (permalink)  
Старый 30.12.2008, 08:48
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,656

Может быть всётаки достаточно только CSS:
td {
background: url(...) no-repeat bottom right;
}

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

Последний раз редактировалось Octane, 30.12.2008 в 08:50.
Ответить с цитированием
  #3 (permalink)  
Старый 30.12.2008, 11:18
Новичок на форуме
Отправить личное сообщение для Alexofer Посмотреть профиль Найти все сообщения от Alexofer
 
Регистрация: 30.12.2008
Сообщений: 4

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

объясните, если не трудно, что это такое.
Ответить с цитированием
  #4 (permalink)  
Старый 30.12.2008, 12:58
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,656

Ну самый простой вариант вот:
<!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
Ответить с цитированием
  #5 (permalink)  
Старый 30.12.2008, 22:49
Новичок на форуме
Отправить личное сообщение для Alexofer Посмотреть профиль Найти все сообщения от Alexofer
 
Регистрация: 30.12.2008
Сообщений: 4

Спасибо! Есть прогресс))) Теперь слой с картинкой всегда привязан к нижнему краю ячейки, но почему то горизонтально висит по середине ячейки и на него не влияет CSS выранивание((( Как это исправить?
Если не трудно можете дать ссылку на какой нибудь сайт с описанием функций яваскрипта и объяснить что значит каждый элемент в коде который Вы прислали мне. Если это конечно не затруднительно.
Заранее спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 30.12.2008, 23:04
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,656

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

Последний раз редактировалось Octane, 30.12.2008 в 23:30.
Ответить с цитированием
  #7 (permalink)  
Старый 30.12.2008, 23:14
Новичок на форуме
Отправить личное сообщение для Alexofer Посмотреть профиль Найти все сообщения от Alexofer
 
Регистрация: 30.12.2008
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с кодом. TheWanderer Общие вопросы Javascript 10 17.04.2010 12:41
позиция рисунка внутри ячейки таблицы. arlek1n Общие вопросы Javascript 11 22.12.2008 09:21
Помогите вытащить из таблицы данные... MD6 Общие вопросы Javascript 1 07.10.2008 12:03