Aligning slideshow area

Sideas
Sideas used Ask the Experts™
on
Hi,

Can anhyone thnk of a way to align the slideshow box to the right of a page, all I can do is get it centre like so http://jacksonglass.co.uk/wordpress/splashbacks-mirrors/splashbacks/

Can't see anyway to align it code wise that works within wordpress. The plusin i'm using doesn't seem to help that much. http://wordpress.org/extend/plugins/simple-slideshow/

The code of that little piece is.
--------
MISSING COPY – Need copy for splashbacks. MISSING COPY MISSING COPY MISSING COPY
[simple_slideshow show_counter="0" auto_advance="1" auto_advance_speed="3000"]

<hr />

<em>Looking for splashback or mirror fitters in High Wycombe, Gerrards Cross, Beaconsfield, Loudwater, Bourne End, Marlow, Hazlemere, Princes Risborough and surrounding areas. Jackson Glass your local splashback fitter. Call on 01494 812207 or 0777 575 3329 on <a href="http://jacksonglass.co.uk/wordpress/doors/contact-us/">contact us</a>.</em>
-------
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The centering is defined in simpleslider.css:
.simpleslider_show {
              margin: 10px auto;    
}
That's a definition for top/bottom vs. left/right ("auto" is to blame!)

Try following:
.simpleslider_show {
              margin: 10px 0px 10px 0px;
}
That's defining the elements margins for top, right, bottom and left resp.
Consultant Instructor
Commented:
Actually, simply changing the margins from 'auto' to '0' would only cause the images to shift to the left, and then it might be out of alignment with the controls (Prev and Next). What I would suggest is that you add a new div element around everything associated with your slide show, and float that div to the right:

Here is how the new HTML structure might look:
<div id="sumpleslider_container">
	<div class="simpleslider_show" id="simpleslider_show_48" style="height: 206px; width: 300px; position: relative;">
		<div style="opacity: 0; position: absolute; top: 0px; left: 0px; display: none; z-index: 5; width: 300px; height: 206px;"><img src="http://jacksonglass.co.uk/wordpress/wp-content/uploads/2012/05/Splashbacks-5.jpg" alt="Splashbacks 5 Splashbacks" title="Splashbacks" height="200" width="300"></div>
		<div style="opacity: 0; position: absolute; top: 0px; left: 0px; display: none; z-index: 5; width: 300px; height: 206px;"><img src="http://jacksonglass.co.uk/wordpress/wp-content/uploads/2012/05/Splashbacks-4.jpg" alt="Splashbacks 4 Splashbacks" title="Splashbacks" height="200" width="300"></div>
		<div style="opacity: 0; position: absolute; top: 0px; left: 0px; display: none; z-index: 5; width: 300px; height: 206px;"><img src="http://jacksonglass.co.uk/wordpress/wp-content/uploads/2012/05/Splashbacks-3.jpg" alt="Splashbacks 3 Splashbacks" title="Splashbacks" height="200" width="300"></div>
		<div style="opacity: 0; position: absolute; top: 0px; left: 0px; display: none; z-index: 5; width: 300px; height: 206px;"><img src="http://jacksonglass.co.uk/wordpress/wp-content/uploads/2012/05/Splashbacks-2.jpg" alt="Splashbacks 2 Splashbacks" title="Splashbacks" height="200" width="300"></div>
		<div style="opacity: 1; position: absolute; top: 0px; left: 0px; display: block; z-index: 6; width: 300px; height: 206px;"><img src="http://jacksonglass.co.uk/wordpress/wp-content/uploads/2012/05/Splashbacks-1.jpg" alt="Splashbacks 1 Splashbacks" title="Splashbacks" height="200" width="300"></div>
	</div>
	<div class="simpleslider_controls"><a href="#" id="simpleslider_show_48_prev" title="Previous Image" class="simpleslider_link prev">¿ Prev.</a> &nbsp;  &nbsp; <a href="#" id="simpleslider_show_48_next" title="Next Image" class="simpleslider_link next">Next ¿</a></div>
</div>

Open in new window


And the CSS:
#sumpleslider_container {
	display: inline-block;
	width: 300px;
	height: 206px;
	float: right;
}

Open in new window

Commented:
.simpleslider_show {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}


If you remove margin-left:auto the slide show will align to right

Author

Commented:
This works, the other 2 solutions work but leave slider controls in the middle still.

Thanks for the input all.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial