div. Опоясать картинку

Старовер · June 2, 2009

DIV .login{
background: url("/imgs/login.jpg") no-repeat center;
}

Но див имеет высоту, которая зависит от input'ов в нем, а я хочу, чтоб он растягивался на всю картинку.

Колос · June 2, 2009

Ничего не понял

Старовер · June 2, 2009

:rolleyes:

Помещаю картинку в див. Хочу, чтоб див был той же ширины, что и картинка.

psywalker · June 2, 2009

попробуй задай div {float: left; } , но боюсь, что ИЕ6-7 всё равно растянет собака div на всю ширину родителя, поэтому специально для ИЕ задай цвет фона такойже как и у общего..

Searcher · June 2, 2009

задайте диву высоту, равную картинке

Старовер · June 2, 2009

попробуй задай div {float: left; } , но боюсь, что ИЕ6-7 всё равно растянет собака div на всю ширину родителя, поэтому специально для ИЕ задай цвет фона такойже как и у общего..

Да кагбе... наоборот див меньше рисунка. Во всяком случае высота.

задайте диву высоту, равную картинке

А вдруг картинка поменяется? Каждый раз менять параметры в стилях? Это не выход, имхо. Edited June 2, 2009 by Старовер

Колос · June 2, 2009

Старовер

Вообще-то высота и ширина разные вещи и не везде себя ведут одинаково.

Для Мозилы, Оперы display:table должен помочь. Но ИЕ его не понимает. Для ИЕ6 думаю должно помочь _width:1px, _height:1px в качестве размеров слоя - картинка все равно растянет слой до нужных размеров. Но для ИЕ7 этот номер не пройдёт.

Пиши как пробуешь, что получается.

В самом начале ты привёл пример с картинкой-фоном. Это дохлый номер. Фон никогда ничего не растянет.

psywalker · June 2, 2009

на вот тебе ссылку, я недавно похожую задачу решал http://www.psywalker.ru/Forum/z-u/main.html , там дело в том было, довёл до того, что картинка может меняться, быть любого размера и при этом всё равно будет с закруглёнными углами, но у тебя пример легче, поэтому может ты что нибудь сможешь с этим придумать, только када найдёшь решение, отпиши обязательно, интересно самому :rolleyes:

Старовер · June 2, 2009

Я вообще хотел сделать подобное. Но посмотрел код - там мало того, что таблица используется, а не див как я думал, так еще и картинка разбита на две части %)

Great Rash · June 3, 2009

Тов. Старовер, по фону у вас див не растянется никогда.

Предлагаю следующий вариант:

1. Создать див, поставить ему позишн релатив и поместить в него необходимую картинку при помощи <img>, а не фона.

2. Создать еще один див внутри с позишн абсолют, и шириной 100%.

Таким образом у вас и див растянется по картинке и контент будет над картинкой.

psywalker · June 3, 2009

Great Rash

Извините пожалуйста, а вы не могли бы решить вот эту задачу, я уже замучился просто:

http://forum.htmlbook.ru/index.php?s=&...st&p=101616

дело в том, что проблема не решается в ИЕ, потому что родительский див растягивается на 100% и не вкакую не хочет обрезаться правильно, чтобы правые уголки сохраняли свои места, как в других браузерах :rolleyes:

Great Rash · June 3, 2009

Че-то другого выхода кроме как назначить ширину диву-контейнеру я не нашел

UPD:

Хотя можно вот такую портянку намутить:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

<head>
	<title>Фильтр</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		.cont {
			float: left;
			border: 1px solid;
		}

		.cont2 {
			border: #0f0 1px solid;
		}

		.cont3 {
			border: #f00 1px solid;
		}

		.cont4 {
			padding: 7px 0 3px 0;
			border: #00f 1px solid;
		}

		img {
			width: 600px;
			height: 400px;
			border: #fbf 1px solid;
		}
	</style>

</head>

<body>

	<div class="cont">
		<div class="cont2">
			<div class="cont3">
				<div class="cont4">
					<img src="http://www.psywalker.ru/Forum/z-u/photo.jpg" alt="" />
				</div>
			</div>
		</div>
	</div>

</body>
</html>

По количеству элементов одинаково с вашим вариантом. В каждый контейнер можно на бекграунд вставлять картинку. Думаю тут не сложно догадаться куда какую.

Edited June 3, 2009 by Great Rash

psywalker · June 3, 2009

Great Rash

Че-то другого выхода кроме как назначить ширину диву-контейнеру я не нашел

блин, к сожалению я тоже, а так хотелось бы добить эту задачу, всё обломал поганый ИЕ :rolleyes:

Zippovich · June 3, 2009

Great Rash
блин, к сожалению я тоже, а так хотелось бы добить эту задачу, всё обломал поганый ИЕ

Так а в чем проблема? Это просто решается с помощью заданию углам абсолютного позиционирования и вывешивания их по углам - в IE6 более менее правильно начинает работать с заданию родительскому слою zoom:1. Слой у меня тянется как по ширине, так и по длине - углы на своем месте - или я что-то не понимаю?

psywalker · June 3, 2009

Zippovich

Так а в чем проблема? Это просто решается с помощью заданию углам абсолютного позиционирования и вывешивания их по углам - в IE6 более менее правильно начинает работать с заданию родительскому слою zoom:1. Слой у меня тянется как по ширине, так и по длине - углы на своем месте - или я что-то не понимаю?

А можешь поподробнее написать и с примером кода?

Вот мой код: http://www.psywalker.ru/Forum/z-u/main.html

Zippovich · June 3, 2009

Zippovich
А можешь поподробнее написать и с примером кода?
Вот мой код: http://www.psywalker.ru/Forum/z-u/main.html

Я в личку тебе ссылку дал - прошу ссылку не ложить тут на работу - авторские права нарушаю.

psywalker · June 3, 2009

Zippovich

послушай, то что ты мне кинул, там нет решения, которое мне нужно

Sign In

div. Опоясать картинку

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information