Форум

cuberboy · #1 (**permalink**) 24.11.2009, 12:12

Рисунок с текстом в таблице, то есть в ячейке. И их много...перечитал пересмотрел кучу примеров но так и не понял КАК?
В один момент работало во всех браузерах кроме ИЕ..рамзеры картинок известны текста тоже..

Octane · #2 (**permalink**) 24.11.2009, 12:20

Поместите текст в абсолютно-позиционированный блок и расположите его над изображением.
http://softwaremaniacs.org/blog/category/web/primer/

cuberboy · #3 (**permalink**) 24.11.2009, 12:34

фон не краситься 8(

cuberboy · #4 (**permalink**) 24.11.2009, 12:37

<style>

d1iv{position: relative;top:-20;background-color:red;z-index:2}
i1mg{position: relative;}


img{}
div{position: absolute;top:-20;background-color:red;z-index:2}

</style>


<table border=1><tr>
<td>
<img src="m.jpg">
<div>sdf</div>
</td>

<td>
<img src="m.jpg">
<div>sdf</div>
</td>
</tr></table>

дела. по вашему , вообще всё пропадает 8(

cuberboy · #5 (**permalink**) 24.11.2009, 12:51

вроде работает счас выложу код, ссылка супер!!!

cuberboy · #6 (**permalink**) 24.11.2009, 12:58

<style>
img{}
.iv{position: absolute;margin-top:-30;background-color:red;font-size:20}
</style>


<table border=1><tr>
<td>

<div><img src="m.jpg"></div>
<div class="iv">sdf</div>

</td>

<td>

<div><img src="m.jpg"></div>
<div class="iv">sdf</div>

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

раньше так и было за исключением картинки в диве и ишак кривил, счас всё гуд.

http://softwaremaniacs.org/blog/2005...t-positioning/ вещь!

cuberboy · #7 (**permalink**) 24.11.2009, 17:38

а если текст многостраничный h2 то чего-то не работает

subzey · #8 (**permalink**) 26.11.2009, 13:49

Пржде чем позволять себе такие вещи, подучите блочную модель. В Вашем случае я бы посоветовал, чтобы задник был задником.
Лучшее, что могу предложить:

<!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">
			.tpl-composite-group-image {
				position: absolute;
			}
			.tpl-composite-group-text {
				position: relative;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<div>
						<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="tpl-composite-group-image" alt="" />
						<div class="tpl-composite-group-text">
							<h2>Lorem Ipsum Dolor Sit Amet</h2>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

Логика примерно такая:
Заполнение документа производится слева-направо, сверху-вниз.
В TD находится IMG с position:absolute. Этот элемент рендерится в новом слое, левый верхний угол его находится в текущей позиции «курсора рендеринга» — слева-сверху элемента.
После него рендерится DIV c position: relative. Он также рендерится в новом слое, перекрывая IMG, но его bounding box не равен нулю, и он распирает TD на нужную высоту. «курсор рендеринга» не сдвинулся, так что он тоже будет расположен сверху-слева.

cuberboy · #9 (**permalink**) 26.11.2009, 14:16

описание модели да! так и сделано(тут не дописал)

а вот насчет стилей - не так, relative оставляет пустое место.

subzey · #10 (**permalink**) 27.11.2009, 13:16

Сообщение от cuberboy

relative оставляет пустое место.

Ну, я думаю, мы друг друга поняли: relative занимает место на странице, а absolute — нет.

Форум

Справочник

Discord чат

Курсы javascript