Здраствуйте.
Скачал скрипт карусели и маленько его модефицировал. Проверил вл всех браузерах работает нормально.
Перенес его на битрикс во включаемую область на главную страницу, во всех браузерах отображается нормально, кроме 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;
} |