The only way I know to do this requires a bit of a hack I found for vertical centering. I just changed it to work on the horizontal aspect:
Code:
<!DOCTYPE html>
<head>
<style>
* { margin:0; padding:0; }
#wrapper { padding:4px 8px; position:relative; top:0; left:0; }
#showBox { width:90%; height:700px; margin:8px auto; position:relative; top:0; left:0; overflow:hidden; z-index:1; }
#slideBox { width:0px; height:700px; position:absolute; top:0; left:50%; overflow:visible; }
#slideWrapper { position:absolute; top:0px; left:-900px; width:1800px; height:700px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="showBox">
<div id="slideBox">
<div id="slideWrapper"><p id="slide"><img src="images/image.jpg" alt="1800px image"></p></div><!-- end #slideWrapper -->
</div><!-- end #slideBox -->
</div><!-- end #showBox -->
</div><!-- end #wrapper -->
</body>
</html>
I used an image that was 1800x1215 for testing. To use this code, you need to change all of the 'width:1800px' settings to the width of your slide images, and set the 'left' on #slideWrapper to negative(!) half of the slide width. Then change the width setting for #showBox to the desired width of the display and all of the 'height:700px;' settings to the desired height.
The code creates an invisible (width:0;) container #slideBox for the slides that positioned in the horizontal center of the overall containing <div> #showBox. #slideBox has overflow:visible, so the content spills out as required. Inside #slideBox we have #slideWrapper using position:absolute with the left position set to minus 1/2 of the slide width, effectively centering it within the overall container #showBox.
All of the elements are positioned, so you can set z-index as needed. Good luck!
Rick Trethewey
Rainbo Design
Reply With Quote
Bookmarks