Having trouble positioning a slideshow

**chadlexmorgan** · 07-20-2013, 05:23 PM

I am using the Ultimate Fade in Slideshow v2.4 in this site and I am having trouble positioning it in the right spot. Here is a link to the site Rezzurection Taxidermy. You will be able to see what I'm talking about. It needs to be center under the title in the header. Any help would be greatly appreciated! Thanks

**Beverleyh** · 07-20-2013, 06:10 PM

I'm on iPhone at the mo so I can't test but to center an element you would usually put margin:auto; on it.

So with your slideshow, try doing this;

Code:

<div id="fadeshow2" style="margin:auto;"></div>

If that doesn't work on its own, try setting a specific width on the fadeshow2 div aswell, and maybe also text-align:center; on any parent container.

**chadlexmorgan** · 07-20-2013, 08:46 PM

Thank you, that helped. It made it centered vertically but not horizontally. Why isn't the CSS that I have "fade" controlling its position? It doesn't seem to be doing anything really.

Code:

		   

<object id="fade">
             	<div id="fadeshow2" style="margin: auto;"></div>
</object>

**Beverleyh** · 07-20-2013, 09:51 PM

Have you applied the change? I cant see it but maybe the script is modifying the style so add it to your stylesheet instead;

Code:

#fadeshow2{margin:auto important!;}

That centers the slideshow for me here.

Also, are you aware that you're using HTML5 tags, and the HTML5shiv, but you're not using the HTML5 doctype? You should fix that.

The reason why your CSS on .fade isn't working is because you're using, for some reason, an object tag, which isn't a block-level elements, like a div is for example. There's no reason to use the object tag in this case - object tags are for multimedia assets such as video, audio and Flash, so, change the object tags to a standard div and your CSS will work.

**chadlexmorgan** · 07-21-2013, 01:51 AM

The id fadeshow in that div refers to a script in the header, thats why I created the .fade in the css. So in the CSS I have this:

Code:

.fade {margin:auto;}

and set this as the class for that same div that is using the id fadeshow. The slide show is centered, now it needs to come down a bit. Let me know if there is something you can't see that i need to provide. Thanks

**Beverleyh** · 07-21-2013, 07:56 AM

The id fadeshow in that div refers to a script in the header, thats why I created the .fade in the css.

Yes, I know and that's why the centering wasn't working before and why I couldn't see the applied change in your stylesheet - because you were applying margin:auto; to the parent container (previously an object tag with the .fade class) rather than the #fadeshow2 element.

Now that you've removed the parent container, you could just reference the #fadeshow2 id in the CSS and eliminate the .fade class altogether.
Either way would work (one is just a bit more efficient) but using what you have now, you should be able to apply styles to the div to alter its positioning. Try a margin-top:40px; (or whatever) to push it down, but make sure it goes after margin:auto; in the definitions otherwise it would be overwritten.

However, I'm not sure if the script is modifying any additional styling so you may have to encase the #fadeshow2 div in a parent container div and apply styles to that instead - you may need to refer to my first post re: text-align:center; on the parent container. I had tested that in my last post (changing the previous object tag to a div instead) and it worked.