Question

My client wants a “wide screen” look for their slideshow on the front page. The background image is really wide, as in 1700~px wide. The content is designed so that the data has a 960px min-width (I use a “margin: 0 auto;” to center things).

CSS:

    #rotate {
    height: 487px;
    min-width: 960px;
    margin: 0 auto;}
    .slides_container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    display: none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/
.slides_container div {
    width: 960px;
    height: 487px;
    display: block;}

HTML:

<div id="rotate">

<div id="container">
    <div id="slides">
        <div class="slides_container">
            <!-- These are the divs that "slide" -->
            <div style="min-width: 960px; background: url(images/rotate-bg.jpg) center no-repeat;">
                <div style="margin: 0 auto; width: 960px;">Test 1</div>
            </div>
            <div style="min-width: 960px; background: url(images/about-markshare-graph.png) center no-repeat;">
                <div style="margin: 0 auto; width: 960px;">Test 2</div>
            </div>
                            <!-- End of sliding divs -->

        </div>
        <a href="#" class="prev"><img src="images/arrow-prev.png" width="40" height="43" alt="Arrow Prev"></a>
        <a href="#" class="next"><img src="images/arrow-next.png" width="40" height="43" alt="Arrow Next"></a>
    </div>
</div>

Here is a link to the site that I can’t seem to find the right CSS changes for: http://www.senjusprinkler.com/2012/index.php

Answer 1

I was trying to do the same thing, eventually found this slider which does the trick just fine.

Check it out http://flex.madebymufffin.com/