Градиентный бэкграунд

[vadimon]

Возникла проблема с версткой градиентного бэкграунда. Смысл в том, что градиент идет не строго по вертикали или по горизонтали, а из нижнего левого угла в верхний правый. Блок не строго фиксированный, а должен тянуться по вертикали вниз в зависимости от наполнения его контентом, при этом независимо от вертикального размера блока градиент должен быть строго по диагонали из нижнего левого угла в верхний правый. Скрин прилагаю. Изображением бэкграунд вставить нельзя, так как блок должен тянуться.

Edited November 21, 2010 by vadimon

[tt48]

Возникла проблема с версткой градиентного бэкграунда. Смысл в том, что градиент идет не строго по вертикали или по горизонтали, а из нижнего левого угла в верхний правый. Блок не строго фиксированный, а должен тянуться по вертикали вниз в зависимости от наполнения его контентом, при этом независимо от вертикального размера блока градиент должен быть строго по диагонали из нижнего левого угла в верхний правый. Скрин прилагаю. Изображением бэкграунд вставить нельзя, так как блок должен тянуться.

Можно использовать тянущееся изображение.

Вот, почти похожее что-то.. не решение, но мысль

http://forum.htmlbook.ru/index.php?showtop...;hl=beavers-net

С уважением, Олег.

[vadimon]

В принципе не самое плохое решение нашел вот такое: задал как фон всю картинку и под ним репител вертикально последний 1 пиксель из бэкграунда. Вроде, получилось неплохо.

[Mr Loga]

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

И после часа, мозгоиссушения, до меня дошло, что можно использовать табличную ячейку, и 2 слоя, слой на изображение и слой на контент. Работает, кроссбраузерно. Попробуйте. Если не получиться, отпишитесь, разберем вместе что и как делать.

[psywalker]

Мужики, а если не сложно, сделайте странички с отдельными примерами.

[Mr Loga]

Вот кусок html кода

<td id="tdLeft">

		<img class=i1 width=250px height=100% src="./img/menu-fon.png">
		<div class=i2>
		<h3>Наши координаты</h3>
		<h4>Адрес:</h4>
		г. Екатеринбург, ул. Бакинских Комиссаров, 112
		<h4>Телефоны:</h4>
		(343) 330-04-05<br>
		(343) 330-04-08<br>
		(343) 330-04-10<br>
		(343) 330-32-09
		<h4>E-mail:</h4>
		<a href=mailto:info@oborona.ru>info@oborona.ru</a>

		</div>
		<p class="href" ><img src="./img/exel.png"><a href=#>Скачать прайс лист</a></p>		
		</td>

А вот кусок css

#tdLeft { width:260px; padding:0 10px 30px; position: relative; display: block; zoom: 1;}
#tdLeft img.i1  {position: absolute; min-height: 100%; height: 100%; display: block;}
#tdLeft div.i2 { margin-left: 40px; height: 100%; z-index: 3; margin-top: 10px;  position: relative; width: 230px; }

Ссылку пока дать не могу, потому что сайт сейчас контентеры наполняют, пока не вывешали

[psywalker]

Mr Loga

Спасибо дружище, но ты не мог бы если будет время, сделать просто отдельную страницу с примером. Чисто пример и всё. Очень хочется посмотреть реализацию.

[rus]

Макс, а что, уже сложно так стало скопировать код и создать страничку самому?

[psywalker]

Макс, а что, уже сложно так стало скопировать код и создать страничку самому?

Да не люблю я всё это, копировать, додумывать и т. д. Просто когда реальный есть рабочий пример на отдельной страничке, то сразу всё понимается хорошо. А так хз чё там делать надо.

[Mr Loga]

Вот ссылка, с нашего тестового сервера, видишь там менюшку справа, с градиентным фоном, вот это оно и есть.

Ссылка удалена

Edited January 19, 2011 by Mr Loga

[psywalker]

Вот ссылка, с нашего тестового сервера, видишь там менюшку справа, с градиентным фоном, вот это оно и есть.

А выходит, что это просто одна картинка растянутая на 100% в высоту, так?

[vadimon]

HTML

<div class="wrap">
	<div class="wrap-middle-price">					   
		<div class="pricecontent">
		</div>
	</div>
</div>

CSS

.wrap { width:850px; margin:0 auto;}
.wrap-middle-price { border:4px solid #ec6701; background:url(images/price_repeat.jpg) repeat-y;}
.pricecontent {padding:125px 25px 25px; background:url(images/price_area_bg.jpg) no-repeat top left; min-height:500px;}

Конечно, диагональный градиент переходит в горизонтальный, но, думаю, тоже неплохой симпатичный вариант, причем совсем несложный.

Демо можно посмотреть здесь

[psywalker]

vadimon

А выходит, что ты просто сделал полоску градиента, которую растягиваешься по оси-y, а сверху просто положил шапку с начальным градиентом.

[vadimon]

vadimon

А выходит, что ты просто сделал полоску градиента, которую растягиваешься по оси-y, а сверху просто положил шапку с начальным градиентом.

Совершенно верно. Не совсем, конечно то, что надо получилось, но тоже симпатично и несложно.

[psywalker]

Совершенно верно. Не совсем, конечно то, что надо получилось, но тоже симпатично и несложно.

Да, согласен, спасибо за идею. Но кажется когда-то делал подобное. Сейчас освежил в памяти.