Здраствуйте.
Скачал скрипт карусели и маленько его модефицировал. Проверил вл всех браузерах работает нормально.
Перенес его на битрикс во включаемую область на главную страницу, во всех браузерах отображается нормально, кроме internet explorer 8, скорее всего в других версиях тоже самое. У картинки в теге див появляется отступ слева и я никак не могу его убрать, уже все перепробовал. В результате этого отступа дизайн разъезжается.
Прикрепляю два скриншота первый нормальное отображение, второй с отступом и как результат разъезд дизайна.
И еще прикрепляю картинку для работы скрипта.
--> код в шаблоне между head
--> script-1.js
--> включаемая область (основной код)
--> И css код
Скачал скрипт карусели и маленько его модефицировал. Проверил вл всех браузерах работает нормально.
Перенес его на битрикс во включаемую область на главную страницу, во всех браузерах отображается нормально, кроме internet explorer 8, скорее всего в других версиях тоже самое. У картинки в теге див появляется отступ слева и я никак не могу его убрать, уже все перепробовал. В результате этого отступа дизайн разъезжается.
Прикрепляю два скриншота первый нормальное отображение, второй с отступом и как результат разъезд дизайна.
И еще прикрепляю картинку для работы скрипта.
--> код в шаблоне между head
Код |
---|
<?$APPLICATION->AddHeadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js')?> <?$APPLICATION->AddHeadScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js')?> <?$APPLICATION->AddHeadScript('/bitrix/js/script-1.js')?> |
--> script-1.js
Код |
---|
$(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); |
--> включаемая область (основной код)
Код |
---|
<div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-7"><a href="#fragment-7"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-9"><a href="#fragment-9"><div id="point-1"></div></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-10"><a href="#fragment-10"><div id="point-1"></div></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel"><img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /><div class="info"><h2><a href="#" >15+ Excellent High Speed Photographs</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p></div></div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2> <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p> </div> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >35 Amazing Logo Designs</a></h2> <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> <!-- Five Content --> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> <!-- Six Content --> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> <!-- Seven Content --> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> <!-- Eight Content --> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> <!-- Nine Content --> <div id="fragment-9" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> <!-- Ten Content --> <div id="fragment-10" class="ui-tabs-panel ui-tabs-hide"> <img width="580px" height="218px" src="/bitrix/templates/01/images/caurusel/4.jpg" alt="" /> <div class="info"> <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2> <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p> </div> </div> </div> |
--> И css код
Код |
---|
<!-- CAURUSEL --> #featured ul { margin:0; padding:0; } #featured ul.ui-tabs-nav { float:left; width:20px; margin:0; padding:0; } #featured ul.ui-tabs-nav li { color:#666; width:20px; height:20px; margin:0; padding:0; list-style-type:none; } #featured li.ui-tabs-nav-item a { display:block; width:20px; height:20px; color:#333; background:#fff; } #featured li.ui-tabs-nav-item a:hover { background:#f2f2f2; } #featured li.ui-tabs-selected { background: #cccccc top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a { border:none; width:20px; height:20px; background: url(images/caurusel/vibor.jpg) no-repeat left center #e3b1b0; } #featured .ui-tabs-panel { width:780px; height:218px; margin:0; padding:0; float:left; } #featured .ui-tabs-panel img { float:left; border:none; margin:0; padding:0; } #featured .ui-tabs-panel .info { background: url(images/caurusel/transparent-bg.png); height:218px; width:200px; float:left; } #featured .info h2 { font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p { margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a { text-decoration:none; color:#fff; } #featured .info a:hover { text-decoration:underline; } #featured .ui-tabs-hide { display:none; } #point-1 { width:20px; height:20px; background:url(images/caurusel/transparent-bg.png) no-repeat center; } #featured { height:218px; border:3px solid #BD5552; width:800px; } |