Hi Ben, you should be able to center the slideshow by setting the left and right margins to auto like this:
.meteor-slides {
margin:0 auto;
But that centers it within the main-col div, do you need the main col to be full width so that the slideshow is centered on the site, like this?
#main-col {
float:left;
width:960px;
}
The previous and next navigation absolutely positioned, so you could use negative positioning to push them out of the slideshow like this:
.meteor-nav .prev a {
left:-35px;
}
.meteor-nav .next a {
right:-35px;
}
Make sure the overflow on the slideshow is visible so that you can still see the navigation:
.meteor-slides {
overflow:visible;
}
Ah, don’t forget to use a custom stylesheet so that you don’t lose these changes when updating the plugin.
Thread Starter
Ben
(@benredpath)
Hi JLeuze,
Thanks for your detailed and prompt response!
I have added margin: 0 auto; to the meteor-slides div class like so:
.meteor-slides {
margin: 0 auto;
overflow: visible;
padding: 0;
position: relative;
z-index: 1;
}
but still doesn’t posotion the slideshow in the centre of the man-col div…any idea why this doesn’t seem to work?
Positioning the nav has worked perfectly tho! 🙂
Thanks
Ben
No problem Ben, it looks like it is centering within main-col. Try selecting meter-slides with Firebug and toggling the margins on and off.
If you tweak main-col to be wider you can see the slideshow center as it grows.
Thread Starter
Ben
(@benredpath)
Ah it was just i didn’t have the main-col div specified as wide as I wanted it! Thanks again for your help, I don’t know anywhere else that offers such great support for free! Made a small donation, happy christmas!
Glad to help Ben, thanks for your contribution!
Hello. I am trying to center as well. I tried to follow the changes recommended above but it did not seem to make any difference. I do see it load centered and then fall to the left on page refresh. I also expanded my column to 980 like so
.meteor-slides {
margin: 0 auto;
overflow: visible;
padding: 0;
position: relative;
z-index: 1;
}
#main-col {
float:left;
width:980px;
}
Here is the url. Is there any way I can address this? I am not a css whiz but can follow instructions most of the time. Thank you. Also I posted the url below.
http://sowinteraction.com/playpen_private/
This plug-in is great. So easy to use and implement. I have tried out about 9 of them and this is the only one I found that was idiot proof and worded as promised. I lover that you have created a unique slide section. No fake features! and much easier to teach to a client. Thank you!
@georgiag Hi, glad to hear that Meteor Slides is working out for you. The slideshow looks centered, did you get your problem solved?
I did… for the time being. When I moved the site to a new location it would open centered and then jump right about half an inch. There are other problems there though so I am hoping that as those are resolved this issue will take care of itself. Thank you for the reply. I appreciate that you follow through.
Best, Georgia
You’re welcome Georgia, let me know if it is still giving you problems.
