Добрый день! Плз подскажите. Я верстаю сайт. Но не знаю, как технически осуществить мою идею. Суть см. ниже.
Посмотрите примерную схематическую картинку моего сайта ЗДЕСЬ:
- >http://musicxchange.narod.ru/prokrutka_img.png
Content space-область, где располагается текстовый контент. Поскольку это пространство небольшое, нужно делать прокрутку. Я где-то видел прокрутку с помощью 2-х кнопок вверх и вниз (см рисунок). Хотелось бы что-то подобное.
И ещё. Тут есть важная деталь. Справа на картинке горизонтальной колбасой идет узор. Он расположен под текстовой областью и нужно, чтобы при прокрутке текста в content space с помощью кноп вверх/вниз, узор, находящийся под текстом и являющийся фоновым рисунком сайта не двигался вместе с текстом, а оставался фоном.
Заранее благодарен, Андрей.

Контент ложи в слой с стилем overflow: auto;
Прокрутку програмно делать не нужно, это не удобно, скролбары привычней. В слюбом случае скролишь изменяя свойство scrollTop, scrollLeft у слоя с контентом.
Бекграунд фиксируешь через стиль background-position: fixed;

Вообще это в вёрстку

Цитата(Sardar @ 24.7.2005, 02:18)

Прокрутку програмно делать не нужно, это не удобно, скролбары привычней.

мне нужно сделать скролл именно программный, не подскажете как ?
вот пример
+ перемещение в самое начало текста и в самый конец, но главное программный скролл.


Это сообщение отредактировал(а) Dave - 25.7.2005, 09:53

Используем scrollTop как я сказал выше. Вот простой пример. Врёстка тяп-ляп, смотри только на код

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>     <title>Untitled</title> <style type="text/css"> #platf {   overflow-y: hidden;   width: 400px;   height: 300px;   border: 1px solid navy; } #scroll {   position: relative;   float: right;   border: 1px solid red;   height: 300px;   width: 25px; } #but_top {   clear: both;   position: absolute;   top: 0px;   left: 0px;   border: 1px solid blue; } #but_bot {   clear: both;   position: absolute;   bottom: 0px;   left: 0px;   border: 1px solid blue; } </style> <script type="text/javascript"> <!-- function scroll_up() {   document.getElementById("platf").scrollTop-=20; } function scroll_down() {   document.getElementById("platf").scrollTop+=20; } //--> </script> </head> <body> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>  <div id="platf"> Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст  <br>Какой нибудь текст Какой нибудь текст Какой нибудь текст   </div></td> <td><div id="scroll" onselectstart="return false;"><span id="but_top" onmousedown="scroll_up();">Up</span><span id="but_bot" onmousedown="scroll_down()">Dw</span></div></td> </tr></table> </body> </html>

Спасибо большое !
а не подскажешь зачем
тут

Код

<div id="scroll" onselectstart="return false;">

вот это: onselectstart="return false;"
у меня и без этого работает, может это помогает избежать каких то глюков ? ...


Это сообщение отредактировал(а) Dave - 25.7.2005, 16:07

Это помогает отключить селекцию на кнопках под ИЕ, они ведь текстовые

Точно! Помогает Ж) Спасибо

На заметку (может кому то пригодится ):
1. для того чтобы нормально отображалось в Firefox и Opera кроме имеющегося

Код

overflow-y: hidden;

нужно добавить еще

Код

overflow: hidden;

Если не добавить то содержимое дива будет выезжать за его пределы
2.

Код

<div id="scroll" onselectstart="return false;">

onselectstart в Firefox и Opera не помогает (как сделать чтобы помогло ?) в итоге у себя я юзал не

Код

<span onmousedown="scroll('platflog1','down');">Dw</span>

a сделал ссылкой:

Код

<a href="javascript:void(0);"  onmousedown="scroll('platflog1','down')">Dw</a>

в этом случае див с onselectstart просто не нужен.

Ну и вопрос:
В Опере скролл не работает, в Firefox и IE пашет, NN не пробовал.
Как сделать чтобы скролл заработал в Опере ?

Это сообщение отредактировал(а) Dave - 4.8.2005, 12:16

тема такая. при использовании кода Сардара нужно будет клацать по кнопам
"вверх" и "вниз" для скроллинга. у меня пожелание было иное. мне надо, чтобы контент скроллился при НАВЕДЕНИИ
курсора на эти кнопы. я поменял в этом коде onmousedown на onmousemove.
вроде получилось, но одиночного наведения курсорана кнопы здесь мало, надо постоянно елозить крысой по кнопе.
сие не есть куль. какой-нить солюшен этого есть??