Question

I would like to know how to use CSS positioning and floats to achieve a content slider effect.

For example rather than having menu links to pages, I would like to disable the link behavior, and instead make the page content appear to slide horizontally (left or right) to give the effect of old content leaving the screen and new content appearing on the screen?

How is this effect achieved?

Is there also any SEO advantages or disadvantages to displaying content on one page like this as oppose to linking to numerous pages?

Thanks,
Rick

EDIT: This question has been modified to appear less problem specific, and therefore of more use to the whole community.

Answer 1

Firstly, you should place your <h2> outside of the .sliders class.

You can add the following styles to the divs:

<div class='container'>

    <div class='sliders'>
        <div class='panel' id='home_slider'></div>
        <div class='panel' id='portfolio_slider'></div>
        <div class='panel' id='contact_slider'></div>
    </div>

</div>

Then your styles would be:

.container{
   width:960px;
   overflow:hidden;
   position:relative;
}

.sliders{
   float:left; 
   width:10000px;
   position:relative;
   left:0; top:0;
}

.panel{
   float:left;
   width:auto; /*You can define a width for this if required*/
   margin:20px;
}

You’ll have to change the values above to meet your requirements, but the gist of it all is that the ‘.container’ class acts as a layer, below which you have the ‘.sliders’ class which contains all the ‘.panels’ divs. By setting ‘overflow:none’ on the ‘container’, the visible ‘.sliders’ width remains the same as the visible area of ‘.containers’, no matter how big the ‘.sliders’ div is. The width of the ‘.sliders’ div will expand depending on the number of divs you have inside (if you set the width to auto) Then you only need to use some JQuery to animate the left position of the ‘.sliders’ class.

Hope this helps.