В стиле league_of_legends имееться слайдер Посмотреть вложение 284 Как мне его сдвинуть в право так чтоб нормально отображался в разных браузерах. Была жалкая попытка изменить но в Opere одно в Chrome другое а на других компах вообще через ЖЕ! Вот код слайдера Код: <script type='text/javascript' src='{style_images_url}/js/jquery-1.6.2.min.js'></script> <script src="{style_images_url}/js/slides.min.jquery.js"></script> <script type='text/javascript'> jQuery.noConflict(); jQuery(document).ready(function($){ $('#slides').slides({ preload: true, preloadImage: '{style_images_url}/images/loading.gif', play: 5000, pause: 2500, pagination: false, generatePagination: false, hoverPause: true, animationStart: function(current){ $('.caption').animate({ bottom:-35 },100); if (window.console && console.log) { // example return of current slide number console.log('animationStart on slide: ', current); }; }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) { // example return of current slide number console.log('animationComplete on slide: ', current); }; }, slidesLoaded: function() { $('.caption').animate({ bottom:0 },200); } }); }); </script> <style> /* Make it work!! */ a { color: #fff; text-decoration: none; } a:hover { color: #F8A406;} #slider{ height: 157px; width: 380px; float: right; position: relative; background: none; margin-right: 30px; } #example{ height: 157px; width: 380px; position: absolute; right: 0; } #frame{ position: absolute; z-index: 0; width: 477px; height: 194px; top: 6px; right: 0px; } #slides{ position: absolute; z-index: 100; width: 370px; height: 156px; top: 15px; right: 53px; } /* Slideshow */ /* Slides container Important: Set the width of your slides container Set to display none, prevents content flash */ .slides_container { width:370px; overflow:hidden; position:relative; display:none; } /* Each slide Important: Set the width of your slides If height not specified height will be set by the slide content Set to display block */ .slides_container div.slide { width:372px; height:157px; display:block; } /* Next/prev buttons */ #slides .next,#slides .prev { position:absolute; top:56px; left:0px; width:24px; height:43px; display:block; z-index:101; } #slides .next { left:346px; } /* Caption */ .caption { z-index:500; position:absolute; bottom:-35px; left:0; height:20px; padding:3px 20px 0 20px; background:rgba(0,0,0,.5); width:370px; font-size:1.0em; line-height:1.33; text-align: left; color:#fff; border-top:1px solid #000; text-shadow:none; } #ribbon { position:absolute; top: 7px; left: -53px; z-index:500; } </style> <div id='slider'> <div id="example"><img src="{style_images_url}/images/corner.png" width="112" height="112" alt="" id="ribbon"> <div id="slides"> <div class="slides_container"> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l1.jpg" width="380" height="157" alt="Slide 1"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l2.jpg" width="380" height="157" alt="Slide 2"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l3.jpg" width="380" height="157" alt="Slide 3"></a> <div class="caption" style="bottom:0"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l4.jpg" width="380" height="157" alt="Slide 4"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l5.jpg" width="380" height="157" alt="Slide 5"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l6.jpg" width="380" height="157" alt="Slide 6"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l7.jpg" width="380" height="157" alt="Slide 7"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l8.jpg" width="380" height="157" alt="Slide 8"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l9.jpg" width="380" height="157" alt="Slide 9"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> <div class="slide"> <a href="url Link to post here" title="-here-" target="_blank"><img src="{style_images_url}/images/l10.jpg" width="380" height="157" alt="Slide 10"></a> <div class="caption"> <a href="http://indepthdesign.blogsopt.com">Happy Holidays from tampaba1</a> </div> </div> </div> </div> <img src="{style_images_url}/images/example-frame.png" width="380" height="147" alt="Example Frame" id="frame"> </div> </div> </div>
Код: #slider{ height: 157px; width: 380px; float: right; position: relative; background: none; margin-right: 30px; } float:left; пробовал ставить?
