(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 не появляется. Очень прошу помочь. |
Часовой пояс GMT +3, время: 23:31. |