Привязка div к слову - HTML и CSS

Mattuza · 07.08.2009, 18:50

Есть резиновый блок.

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

Можно средствами CSS такое сделать? Или нужен JS?

Заранее спасибо за помощь.

sa_t_an · 07.08.2009, 19:43

Слова - это инлайн элементы, можно попробовать обернуть нужное слово в 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>
  <title>Hello!</title>
  <style>
    .cont { position: relative; }
    .img {position: absolute; right: 0; top: -20px; border:#111 1px solid; width: 20px; height: 20px;}
  </style>
</head>

<body>

<br /><br />Hello, <span class="cont"><div class="img"></div>World!</span>

</body>

</html>

07.08.2009, 19:43	#2
sa_t_an Пользователь Регистрация: 27.04.2008 Сообщений: 38	Слова - это инлайн элементы, можно попробовать обернуть нужное слово в 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> <title>Hello!</title> <style> .cont { position: relative; } .img {position: absolute; right: 0; top: -20px; border:#111 1px solid; width: 20px; height: 20px;} </style> </head> <body> <br /><br />Hello, <span class="cont"><div class="img"></div>World!</span> </body> </html>` Последний раз редактировалось sa_t_an; 07.08.2009 в 19:45.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Высота div-a в котором есть другой div	Antoha	HTML и CSS	2	07.08.2009 18:16
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48
Записать текст лесенкой(по одному слову в строке),вставляя пустую строку после каждого четверостишья	klindk	Паскаль, Turbo Pascal, PascalABC.NET	2	27.11.2008 14:34
Растягивающийся DIV и толкающий в низ следующий DIV	Суриков	HTML и CSS	6	29.08.2008 12:01
Сортировка по второму слову	Romuald	Microsoft Office Excel	5	12.08.2008 13:59

07.08.2009, 18:50	#1
Mattuza Новичок Джуниор Регистрация: 07.08.2009 Сообщений: 1	Привязка div к слову Есть резиновый блок. Нужно привязать картинку к слову, как показано на картинке, чтобы картинка всегда располагалась над искомым словом, независимо от ширины столбца. Можно средствами CSS такое сделать? Или нужен JS? Заранее спасибо за помощь.