How to center a Slider in Homepage Content

[Fred Timor]

Please see this site: http://www.tmwdiamonds.com/catalog/

 

Can you figure out where I need to "align center" to get the slider in the center?

 

I'm using the Simply Clothes theme and slideric.

[Mike Kranzler]

Hi MG_PS,

It looks to me that your slider is aligned in the center of the page, but doesn't stretch all the way to the edge. Is that the issue, or does it not look aligned in the center for you.

 

If so, please post a screenshot demonstrating what your issue is exactly.

 

-Mike

[Fred Timor]

1

[Fred Timor]

<a href="http://www.flickr.com/photos/53457255@N08/6175223689/" title="SP32-20110923-125714 by geretre, on Flickr"><img src="http://farm7.static.flickr.com/6178/6175223689_d4efedc4c0_z.jpg" width="640" height="481" alt="SP32-20110923-125714"></a>

[Mike Kranzler]

Hi Fred,

I don't think you posted that screenshot correctly

 

In the full editor, please upload the image as an attachment and then insert it into the post.

 

-Mike

[Fred Timor]

http://farm7.static.flickr.com/6178/6175223689_d4efedc4c0_z.jpg

[Mike Kranzler]

Hi Fred,

You should be able to change that in the nivo-slider.css file

 

-Mike

[Fred Timor]

Can you show me where? I tried a few things but it isn't reflecting on the page.

 

Thanks again for your help with this!

 

/* The Nivo Slider styles */
div#slide_holder {
width:556px;
height:282px;
clear:both;
margin: 10px 0;
}
div#slider {
width:556px;
height:278px;
   overflow: hidden;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;

[Fred Timor]

Anyone?

[gijomloy]

Hello Fred,

You should use the firebug add-on for firefox or the native inspection tool from Chrome. Right-click on the element you are interested in and select "inspect". Then you can tweak the CSS attribute, add directives on the fly and when you get the result you want, you just have to copy in your CSS file. Once you learn how to use this powerful tool, you should be able to customize your page at will. Hope it helps.

Guillaume