HTML,CSS?: фиксированные тени сбоку от содержания стр.

[e-partner]

Здравствуйте всем!

Есть сложная задача - собрать html-страничку так, чтобы внутренняя часть двигалась,

сбоку были как бы тени - зафиксированные картинки (position:fixed) по бокам от основного контента и основной градиентный фон (направление сверху вниз, position - тоже fixed).

Итого 3 части: 1. Контент (двигается). 2. Сбоку от контента - узкие изображения "теней контента" (не перемещаются с ползунком). 3. фон (градиент: сверху - вниз), тоже фиксированный.

Что не получается: прикрепить к контенту(центральной части) зафиксированные изображения теней контента слева и справа.

Помогите кто может!!!

Образец: http://www.djtafa.com/images/образец.jpg

[s0rr0w]

Есть сложная задача

Да ладно вам... Забудьте про зафиксированные картинки (position:fixed), и почитайте про background-attachment

Ложите ваш градиент как background для body и танцуйте джигу.

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

[e-partner]

Да ладно вам... Забудьте про зафиксированные картинки (position:fixed), и почитайте про background-attachment

Ложите ваш градиент как background для body и танцуйте джигу.

Спасибо за хоть кукую-то помощь. НО мне надо один градиент размножить сверху вниз и зафиксировать и еще - прилепить по бокам от контента "тени", и их тоже зафиксировать. Т.е. надо фиксировать два элемента(!) - вот это-то как сделать? Скажем, один background-attachment на "body" сделать, а другой куда?

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

Зато все хорошо читается и воспринимается!

Edited April 12, 2009 by e-partner

[Nekromancer]

Зато все хорошо читается и воспринимается! happy.gif

не правда, напрягает!

Спасибо за хоть кукую-то помощь. НО мне надо один градиент размножить сверху вниз и зафиксировать и еще - прилепить по бокам от контента "тени", и их тоже зафиксировать. Т.е. надо фиксировать два элемента(!) - вот это-то как сделать? Скажем, один background-attachment на "body" сделать, а другой куда?

ничё не понял, но лучше сделать position: absolute; и height: 100%;

[e-partner]

не правда, напрягает!

ничё не понял, но лучше сделать position: absolute; и height: 100%;

Спасибо. Думал что написал понятно. В общем, один элемент: градиентный фон, который имеет направление сверху вниз с черного цвета (см. "Образец.jpg" выше или ниже по ссылке) до серого закрепить своими силами умею, а второй элемент: "тени от содержимого странички", имеющие вид узких полосочек, которые будут сделаны в виде картинки и будут прикрепляться непосредственно к боковым частям центрального содержимого, также требуется зафиксировать. Вот как крепить вторые элементы - 2-е "картинки-тени", если body уже будет занято градиентным фоном для фиксации?

То есть итого на странице будут: основной фон и, с просветом слева и справа (для того чтобы был виден градиентный фон) - посередине будут находиться двигающийся контент с зафиксированными тенями по бокам.

http://www.djtafa.com/images/Образец.jpg

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

Edited April 12, 2009 by e-partner

[Nekromancer]

как вариант засунуть всё в один див.. левую тень, блок контента, и правую тень, всем трём блока hieght: 100%, одному один фон повторяющийся другому другой. ну а уже ширину расставишь как тебя надо, фикс или в процентах чтоб растягивалось

делается через позиционирование или через display:inline-block;

Edited April 12, 2009 by Nekromancer

[s0rr0w]

Спасибо за хоть кукую-то помощь. НО мне надо один градиент размножить сверху вниз и зафиксировать и еще - прилепить по бокам от контента "тени", и их тоже зафиксировать. Т.е. надо фиксировать два элемента(!) - вот это-то как сделать? Скажем, один background-attachment на "body" сделать, а другой куда?

У вас центральный блок будет иметь фиксированную ширину, или нет?

Edited April 12, 2009 by s0rr0w

[e-partner]

У вас центральный блок будет иметь фиксированную ширину, или нет?

да

Edited April 12, 2009 by e-partner

[Searcher]

0. Устанавливаете нормальный доктайп, например <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;

1. Основной верхний градиент устанавливаете для body;

2. Делаете див нужной ширины, позиционируете его в центре при помощи margin: 0 auto, и задаете левую тень в качестве фона;

3. Вставляете в описанный выше див еще один див и задаете ему 100% ширину и высоту и правую тень в качестве фона;

4. Снова вкладываете еще один див, задаете ему правый и левый марджин по размеру тени и сплошной фон.

[e-partner]

0. Устанавливаете нормальный доктайп, например <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;

1. Основной верхний градиент устанавливаете для body;

2. Делаете див нужной ширины, позиционируете его в центре при помощи margin: 0 auto, и задаете левую тень в качестве фона;

3. Вставляете в описанный выше див еще один див и задаете ему 100% ширину и высоту и правую тень в качестве фона;

4. Снова вкладываете еще один див, задаете ему правый и левый марджин по размеру тени и сплошной фон.

Searcher

Эксперт

Во, вот это, понимаю, эксперт! Ясно и понятно.

Спасибо! Буду пробовать. Всем: s0rr0w, Nekromancer тоже спасибо, так как уже что-то стало получаться.

[Searcher]

Searcher

Эксперт

Вы мне льстите

[e-partner]

0. Устанавливаете нормальный доктайп, например <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;

1. Основной верхний градиент устанавливаете для body;

2. Делаете див нужной ширины, позиционируете его в центре при помощи margin: 0 auto, и задаете левую тень в качестве фона;

3. Вставляете в описанный выше див еще один див и задаете ему 100% ширину и высоту и правую тень в качестве фона;

4. Снова вкладываете еще один див, задаете ему правый и левый марджин по размеру тени и сплошной фон.

Чего то у меня не получается так как Вы писали - тени у меня узкие. И их надо как то выдвинуть одну влево, другую вправо.

Лично я сделал body градиент, потом одновременно на картинку в центре страницы (чуть шире контента) поместил лев. и прав. тень. Потом наложил контент.

[Searcher]

не знаю что там у вас не получается... не видя код и не узнаю.

[e-partner]

не знаю что там у вас не получается... не видя код и не узнаю.

Всем приветы!!! ))))

Вот, у меня получилось. Сдела все сам!!! Это код не совсем рабочий - там надо тени как-то "закрепить": fixed.

(А так, у меня тени отцентрованы и сделаны одной картинкой, под контентом,чуть шире.)

Если можете - исправьте мой код на "div"-ы, как вы и писали мне.

Остальные - кто сможет - тоже помогите. Оптимизация кода - дело хорошее! : )))))

Картинки можете взять отсюда:

http://depositfiles.com/files/tjtr5euq2

http://depositfiles.com/files/88eipmww6

http://depositfiles.com/files/klm6jznn1

http://depositfiles.com/files/ja0hsmcqz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>SPACE-CLUB.RU</title>
<head> 
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css" />

<style>
* {
margin:0; padding:0;} 

   BODY {
background-image: url('bg.jpg');
background-attachment: fixed;
background-repeat:repeat-x;
background-position: 0% 0%;
padding:0;
margin:0;
top:0px;
width:100%;
height:100%;
   }
</style>

</head>
<body>
<table width="100%" border="0" align="center">

<tr align="center">
<td width="20%" align="center" valign="middle"></td>
<td width="20%" align="right" valign="middle"><img title="" src="leftshad.jpg"/></td>

<!-- Слайд-шоу, тут оно будет, но я его убрал от "перехватчиков"))) -->
<td width="1121px" height="888px">
<img title="" src="space1.jpg"/>
</td>
<!-- Конец Слайд-шоу -->

<td width="20%"  align="left" valign="middle"><img title="" src="rightshad.jpg"/></td>
<td width="20%"  align="center" valign="middle"></td>
</tr>

</table>

</body>
</html>

пишите!!!

Edited April 16, 2009 by e-partner