2 разных бекграунда по сторонам основного блока

tellium · August 5, 2010

Столкнулся с проблемой по разным бекграундам со сторон центрального блока.

В идеале должно получится следующее:

Собственно можно как-то это сделать используя только центральный div и background-image станицы?

Если нет то понимаю нужно делать 3 шт. div по бокам резиновые по центру с заданными пропорциями, может кто код подскажет?

Заранее спасибо за внимание :lol:

rus · August 5, 2010

1) Если б не резиновый бэк, то можно было бы повесить эти два бэка на html И body, но из-за резиновости этот номер не прокатит.

2) три дива: левый и правый скажем по 10-15% а центральный 70-80% шириной, все они зафлоачены в лево.

в левом делаешь - левый бэк, в правом - правый и повтор по ось икс, ну а в центре - контент.

psywalker · August 5, 2010

ТС, посмотри пример, тут я верстал середину фикс, а боковые колонки резина

http://psywalker.ru/Portfolio/Archery/main-page.html

tellium · August 5, 2010

ТС, посмотри пример, тут я верстал середину фикс, а боковые колонки резина
http://psywalker.ru/Portfolio/Archery/main-page.html

Как раз то что нужно щас попробую, сенкс всем кто ответил, может у кого еще есть варианты какие для коллекции и для народа!!!

psywalker · August 5, 2010

Как раз то что нужно щас попробую, сенкс всем кто ответил, может у кого еще есть варианты какие для коллекции и для народа!!!

Я как правило этим пользуюсь всегда.

tellium · August 5, 2010

Я как правило этим пользуюсь всегда.

psywalker извини за надоедливость, толи жара и дым :lol: так действует, толи туплю почерному, правый блок вниз улетает всегда, если не сложно можешь код и CSS выложить без контента, просто середина под фикс размер, а бока резиной, не обессудь просто в натуре запара мозГГГ выключается.

psywalker · August 5, 2010

Не вопрос, только это не мой код, а великого мастера Great Rashа :lol:

<!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</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;
		}

		.left,
		.right {
			width: 50%;
			height: 500px;
		}

		.left {
			float: left;
			margin-right: -500px; /* 1000/2=500 */
			background:#fedfed;
		}

		.left-inner {
			margin-right: 500px;
			height: 498px;
			border: red 1px solid;
		}

		.right {
			float: right;
			margin-left: -501px; /* 1000/2=500 + 1px баг ИЕ */
			background: #defdef;
		}

		.right-inner {
			margin-left: 500px;
			height: 498px;
			border: green 1px solid;
		}

		.center {
			position: relative;
			z-index: 1;
			float: left;
			width: 1000px;
			height: 500px;
			background: #efdabc;
		}
	</style>
</head>

<body>


	<div class="left">
		<div class="left-inner">hgdg</div>
	</div>
	<div class="right">
		<div class="right-inner">df</div>
	</div>
	<div class="center">111</div>

</body>
</html>

tellium · August 5, 2010

psywalker огромное тебе человеческое спасибо :lol:

psywalker · August 5, 2010

psywalker огромное тебе человеческое спасибо

Хорошо, я обязательно ему передам

Sign In

2 разных бекграунда по сторонам основного блока

Question

tellium

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

tellium

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

tellium

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

tellium

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information