две неподвижные фоновые картинки. как?

[clgs]

Здрасти)

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

Картинки имеют определенную ширину, рабочаю область 80% но не менее 800рх. как я понимаю картинки должны быть именно в фоне или дивы привязать. они также должны скрываться если рабочая область не помещается и в то-же время от них не должен появляться скрол. при маленьких размераш рабочая облость не должна скрываться (обычно левый край) за облости видимости браузера.

Если кто-то понял этот бред, можете поделится идеями или код

[LunatiK]

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

[psywalker]

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

[clgs]

то что у меня с дивами получилось. только ширина в данный момент в рх

http://depositfiles.com/files/sly63a28p

http://ifolder.ru/12782292

http://webfile.ru/3728648

везде одно и тоже =)

Edited June 23, 2009 by clgs

[psywalker]

дружище, я конечно попробую даже просто ради интереса, но врядли что-то путное у меня выйдет..

[LunatiK]

Интересная вещица, хотелось бы взглянуть на реализацию, даже если с использованием JavaScript.

Без JavaScript у меня не получилось. Мысли в ступоре идеи кончались...

[Игорь Ермаков]

Качать влом, я так понял, нужно 2 фиксированных изображения?

[psywalker]

clgs

то что у меня с дивами получилось. только ширина в данный момент в рх

друг, а должно быть как у тебя, то-есть при сужении экрана колонки заходят под Центр?

[Zippovich]

<div class="left-image">
<div class="right-image">
<div class="content">
 
</div>
</div>
</div>

.left-image {width: 100%; background: url('left-image.gif') no-repeat}
.right-image {width: 100%; background: url('right-image.gif') right top no-repeat}
.content {width: 80%; margin: 0 auto; min-width: 800px; background: white}

Попробуйте так, для IE6 нужно писать expression для замены min-width

[psywalker]

Zippovich

Вообще ваш вариант мне нравится, но вдруг задача всё таки стоит, что-бы левая картинка заходила за экран при сужении экрана?

[Zippovich]

Zippovich

Вообще ваш вариант мне нравится, но вдруг задача всё таки стоит, что-бы левая картинка заходила за экран при сужении экрана?

Тогда только JS

[clgs]

psywalker, именно так. при сужении заезжала под центр, она у меня сейчас так и сделанно, если проценты поставить. а первоначально для эфекта единого целого немного заезжает. вариант который я выложил меня устраивает и вроде как работает нормально за исключением IE6 =)

Игорь Ермаков, да но только на фоне и чтоб меняли положения при изменении разрешения, и заезжали под центр.

[psywalker]

clgs

а нафига тебе твой вариант, вот вариант Zippovich нормальный и в ИЕ6 работает всё?

[clgs]

psywalker, просто я его еще не пробывал =) я в HTML не очень сображаю, поэтому он мне паказался достаточно странным, и не тем что мне нужно.

Zippovich

Вообще ваш вариант мне нравится, но вдруг задача всё таки стоит, что-бы левая картинка заходила за экран при сужении экрана?

читаем внимательно 12-ое сообщение =) нужно чтоб при маленьком разрешении, 50% картинки за экран без появления скролла, 50% под контекст без фона.

как я понимаю так? (картинка должна уложится в 20% при среднем разрешении)

.left-image {width: 100%; margin-left:-40%; background: url('left-image.gif') center no-repeat}
.right-image {width: 100%; margin-right:-40%; background: url('right-image.gif') center no-repeat}
.content {width: 80%; margin: 0 auto; min-width: 800px; background: white}

Edited June 24, 2009 by clgs

[psywalker]

Не знаю, я сделал вот так и мне нравится в принципе http://psywalker.ru/Forum/nep-fon/

[clgs]

Не знаю, я сделал вот так и мне нравится в принципе http://psywalker.ru/Forum/nep-fon/

А в IE6 проверял?

И всетаки нужно чтоб при уменьшении размера окна чать картинок заходило под content, а часть за пределы видимости браузера.

А если усложнить задачу. При уменьшении ширины окна картинки залазят под content и они видну скажет на растоянии 20% от края content'а, а дальше скрываются =)

Edited June 24, 2009 by clgs

[Zippovich]

А в IE6 проверял?

И всетаки нужно чтоб при уменьшении размера окна чать картинок заходило под content, а часть за пределы видимости браузера.

А если усложнить задачу. При уменьшении ширины окна картинки залазят под content и они видну скажет на растоянии 20% от края content'а, а дальше скрываются =)

Перестаньте мучить себя и нас. Мучайте JavaScript. Версткой такого не сделаешь.

P.S.: немного подскажу, Вам нужно будет дергать скрипт при ресайзе и при загрузке, высчитывать ширину боковых блоков с картинками, в зависимости от ширины центрального блока и менять позицию бэкграунда в них. В общем я бы такого не делал.

Edited June 24, 2009 by Zippovich

[Great Rash]

А я вот вообще не понимаю чего нужно. Вот понимал бы - может и поколбасился бы. Расскажите по человечески (можно с комиксами) чего вам надо?

[psywalker]

Great Rash

Смари дружище, вобщем нужно что-то типо того: http://psywalker.ru/Forum/nep-fon/ , только что-бы при сужении ширины экрана Картинки слева и справа Заходили на половину под Контент, а половину за экран, и ещё что-бы вся эти картинки были Фиксированными и при вертикальной прокрутке не прокручивались, и конечноже чтобы вся эта херь также чётко работала в ИЕ6

[Searcher]

да еще и без JS это?

интересная задачка....

[psywalker]

Searcher

да еще и без JS это?

Даа, и без него полюбому

[Great Rash]

Колонки справа и слева фиксированные или резина?

Пойдет? Проверял только в Мозилле

<?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</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,
		.center {
			height: 500px;
		}

		.left {
			position: absolute;
			z-index: 1;
			float: left;
			top: 0;
			width: 10%;
			background: url('http://psywalker.ru/Forum/nep-fon/new/fon_left.png') right top no-repeat;
		}

		.right {
			position: absolute;
			z-index: 1;
			float: right;
			top: 0;
			right: 0;
			width: 10%;
			background: url('http://psywalker.ru/Forum/nep-fon/new/fon_left.png') left top no-repeat;
		}

		.center {
			position: relative;
			z-index: 2;
			width: 80%;
			min-width: 800px;
			margin: 0 auto;
			background: white;
			border: red 1px solid;
		}
	</style>
</head>

<body>

	<div class="left"></div>
	<div class="center">
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
		text text text text text text text text text text text text text text text text text text text text text text <br />
	</div>
	<div class="right"></div>

</body>
</html>

[psywalker]

Нужна резина,

а вообще твой вариант не прокатит, в ие6 косяки

Edited June 25, 2009 by psywalker

[Zippovich]

да и еще при ширине окна 800px не должно быть горизонтальной полосы прокрутки.

Тут без вычисления ширины боковых колонок не обойтись, а это только на JS можно сделать.

Edited June 25, 2009 by Zippovich