Essex Dog Supplies Posted February 28, 2014 Share Posted February 28, 2014 (edited) Can someone please tell me how I center the carousel to the page, as it currently aligns to the main body and overlaps with the amount of manufacturers I am showing? This is the image to show what I mean: This is the CSS: /*! mancarousel v1.0 */ .mancarousel_slider { background: #fff; box-shadow: 0 10px 30px -16px #000; float: left; margin: 0 auto 20px; padding: 15px 32px; position: relative; } .mancarousel_responsive { float: none !important; padding: 15px 0 !important; } .mancarousel_slider a { text-decoration: none; display: block; float: left; } .mancarousel_slider img { border: 1px solid #f5f5f5; background: #fff; padding: 9px; margin: 7px; display: block; float: left; } div.mancarousel_slider a#mancarousel_prev.prev, div.mancarousel_slider a#mancarousel_next.next { background: url(../img/miscellaneous_sprite.png) no-repeat transparent; width: 45px; height: 50px; display: block; position: absolute; } div.mancarousel_slider a#mancarousel_prev.prev { left: -22px; background-position: 0 0; } div.mancarousel_slider a#mancarousel_prev.prev:hover { background-position: 0 -50px; } div.mancarousel_slider a#mancarousel_prev.prev.disabled { background-position: 0 -100px !important; } div.mancarousel_slider a#mancarousel_next.next { right: -22px; background-position: -50px 0; } div.mancarousel_slider a#mancarousel_next.next:hover { background-position: -50px -50px; } div.mancarousel_slider a#mancarousel_next.next.disabled { background-position: -50px -100px !important; } div.mancarousel_slider a#mancarousel_prev.prev.disabled, div.mancarousel_slider a#mancarousel_next.next.disabled { cursor: default; } div.mancarousel_slider a#mancarousel_prev.prev span, div.mancarousel_slider a#mancarousel_next.next span { display: none; } .clearfix_mancarousel { float: none; clear: both; } /*! mancarousel v0.3 */ Edited March 1, 2014 by Essex Dog Supplies (see edit history) Link to comment Share on other sites More sharing options...
stottycabanas Posted March 1, 2014 Share Posted March 1, 2014 Hi, have a look in the .tpl file(s) that came with the module for the class 'mancarousel_wrapper'. Change the width from 1200px to 960px. Cheers, Dave Link to comment Share on other sites More sharing options...
vekia Posted March 1, 2014 Share Posted March 1, 2014 any chance to see it live? Link to comment Share on other sites More sharing options...
stottycabanas Posted March 1, 2014 Share Posted March 1, 2014 Milos, you can see it here: http://www.essexdogsupplies.co.uk/ Cheers, Dave Link to comment Share on other sites More sharing options...
vekia Posted March 1, 2014 Share Posted March 1, 2014 ok i see i changed width of wrapper to 960px but somehow, after click on next/prev buttons it back to 1200px it's defined probably somewhere in js files Link to comment Share on other sites More sharing options...
Essex Dog Supplies Posted March 1, 2014 Author Share Posted March 1, 2014 I'm happy with it's size, but I just want it centered. Link to comment Share on other sites More sharing options...
Joel Bardsley Posted March 1, 2014 Share Posted March 1, 2014 As it's 1200px wide and being contained in a wrapper that's 1024px wide you'll have to add a negative margin-left to shift it across. With the padding involved as well, here's how it looks with a margin-left of -120px applied to div.mancarousel_slider: Link to comment Share on other sites More sharing options...
Essex Dog Supplies Posted March 1, 2014 Author Share Posted March 1, 2014 Thank you Joel! All sorted, just what I needed. Thank you to those who took the time to help as well Link to comment Share on other sites More sharing options...
Essemme_Forniture Posted August 28, 2014 Share Posted August 28, 2014 Hello guys, i've the same problem, i found the number that i've to put but i don't know where. is here , but wich file? <div class="mancarousel_wrapper" > ="disstyleplay: block; text-align: start; float: none; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; margin: 0px; overflow: hidden; position: relative; width: 448px; height: 112px;" 448 to 495 Thanks for your support Simone Here is the pic https://drive.google.com/file/d/0B4K1usLq2uVUcEFibnk2QnVpZTA/edit?usp=sharing Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now