Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2011, 17:16
Новичок на форуме
Отправить личное сообщение для _shpion_ Посмотреть профиль Найти все сообщения от _shpion_
 
Регистрация: 14.05.2011
Сообщений: 1

(jScrollPane) помогите правильно прописать css для div'ов
Добрый день.

Есть сайт на джумле. Верстал в сжатые сроки, получился большой карточный домик.
И под конец заказчик захотел поменять скролл для дива с контентом и тут я встрял.
В ручную писать мозгов (и если честно, желания) не хватило. Решил делать плагином jScrollPane. Сделал отдельно, "прикрутил" нужный заказчику скин. Но возникла проблема прилепить тестовую верстку в разработанный ранее шаблон:

HTML-шаблон + чуток php
<div id="content">
  <div id="top_pos">
   <!--  рюшечки -->
  </div>
 <div id="middle_pos">
	<div id="leftcolumn">
		<!--  меню слева, css -->
	</div>
	<div class="wb2<?php echo $pageview ?>"> </div> <!--  прозрачный фон для контента.  $pageview = wb2category или wb2article -->
	<div id="whitebox2">
			<div class="scroll-wrap" style="z-index:10">
				<div class="scroll-pane" style="z-index:15">
					<!--  контент, который нужно прокручивать, обернутый в <table> -->
				</div>
			</div>
	</div>
</div>
</div>


стили:
#content {
	min-width: 1150px;
	min-height:880px;
	padding: 0 0;
	position:absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	bottom: 10px;
  }
  #top_pos {
    height: 100px;
    margin: 0 auto;
    background: #000;
    background-image: url(../images/top_bg.jpg);
    padding:0;
  }
  #middle_pos {
	background-color: #000;
	margin: 0 auto 0;
	background-image: url(../images/it2b_bg_orange.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	position: absolute;
  	left:0;
  	right:0;
  	top:100px;
  	bottom:100px;
  }
  #leftcolumn {
	float:left;
  }
  #whitebox2,
	div.wb2category,
	div.wb2article,
	div.frameborder {
	margin: 20px;
    	position: absolute;
	top: 20px;
	left: 480px; /*260px*/
	right: 20px;
	height:480px;
 }
  #whitebox2 {
	float:right;
	border:0;
	overflow:auto; /* scroll */
	z-index:5;
  }
  div.wb2category {
	  background-color:#000;
	  background-image:url(../images/bg09a.jpg);
	  background-position:right -10px;
	  background-repeat:repeat;
	  
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
	  filter: alpha(opacity=80); /* IE 5-7 */
	  -moz-opacity: 0.8; /* Netscape */
	  -khtml-opacity: 0.8; /* Safari 1.x */
	  opacity: 0.8;  /* Good browsers */
	  
	  z-index:1;
  }
  div.wb2article {
	  background-color:#000;
	  background-image:url(../images/bg09b.jpg);
	  background-position:right -10px;
	  
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
	  filter: alpha(opacity=80); /* IE 5-7 */
	  -moz-opacity: 0.8; /* Netscape */
	  -khtml-opacity: 0.8; /* Safari 1.x */
	  opacity: 0.8;  /* Good browsers */
  }


jquery.jscrollpane.css
.jspContainer
{
  overflow: hidden;
  position: relative;
}

/* content */

.jspPane
{
  position: absolute;
}

.jspVerticalBar
{
  position: absolute;
  top: 0;
  right: 0;
  width: 19px;
  height: 100%;
  background: #f00;
}

.jspHorizontalBar
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 19px;
  background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
  margin: 0;
  padding: 0;
}

.jspCap
{
  display: none;
}

.jspHorizontalBar .jspCap
{
  float: left;
}

.jspTrack
{
  background: #5b5b5b;
  position: relative;
}

.jspDrag
{
  background: #bbd;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
    background:url(../images/scrollBtn.png) no-repeat left top;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
  float: left;
  height: 100%;
}
.jspHorizontalBar .jspDrag
{
    background:url(../images/scrollBtnH.png) no-repeat left top;
}

.jspArrow
{
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
}

.jspArrow.jspDisabled
{
  cursor: default;
  background: #80808d;
}

.jspVerticalBar .jspArrow
{
  height: 16px;
}

.jspHorizontalBar .jspArrow
{
  width: 16px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
  outline: none;
}

.jspCorner
{
  background: #5b5b5b;
  float: left;
  height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
  margin: 0 -3px 0 0;
}


Проблема в диве #whitebox2, т.к. у него позиция absolute ?
Просто панель jScrollPane не появляется, только системные скроллы.
Делаю overflow:hidden - контент просто обрезается, но jScrollPane не появляется.

Очень прошу помочь.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Люди помогите! Как отключить css для ОПЕРЫ МИНИ??? griha787 Элементы интерфейса 1 13.04.2011 20:10
Узнать CSS правило для элемента vinet Events/DOM/Window 4 10.12.2010 08:12
dragSelector для iframe помогите написать Golizart ExtJS 0 25.07.2010 15:35
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 21:34
Задание CSS для загруженных во фрейм страниц <Pool> Общие вопросы Javascript 1 14.01.2009 16:59