Question

I’m trying to implement a design that I found on another site. It’s designed in Flash, but I’m trying to replicate something similar using HTML5, CSS, and Javascript (or PHP if necessary).

See the following site.
http://www.raytheon.com/newsroom/technology/

I’m trying to replicate the window-shade type design, but I’m just starting. My initial question is, how would I go about making the buttons be alongside the content as such? I’m not worried about the sliding transition at the moment, I’m just wondering how it should be laid out like that.

Answer 1

I’d do it like this:

<div class="pagecontainer">
  <div id="page1" class="page"  style="background: url(picture20px*400px);"/> 
  <div id="page2" class="activepage"  style="background: url(picture20px*400px);"/> 
  <div id="page3" class="page"  style="background: url(picture20px*400px);"/> 
</div>

css:

 .pagecontainer {
  position:relative;
  width:440px;
  height:400px;
  overflow:hidden;
 }
 .activepage {
  float:left;
  width:400px;
  height:400px;
  overflow:hidden;
  padding-left:20px;

 }
.page {
  float:left;
  width:20px;
  height:400px;
  overflow:hidden;
  padding-left:20px;
}

Update: actually, i think (after reading the update of the other answers) that float is better because the animation will be easier with float. I’d still use overflow:hidden on the page. to make the page visible, animate its width, so the active page has a width of 400px. All pages have content of 400px, but only 20px should be visible.