Horizontal scrolling website with frames which are centered

Hi,

I'm trying to build a website which has horizontal scrolling frames of 900px x 600px, the 'active' frame is centered in the middle and each frame has right and left margins of 100px.
If the screen is wide enough the end of the left frame can show on the screen and the left of the next screen.

Here is an example: http://www.peter-pearson.com/ 
it also has to have navigation like <a href="#section2">2</a>

How should i do this?

Thanks a lot!!
peps03Asked:
Who is Participating?
 
sivagnanam chandrakanthConnect With a Mentor Technical LeadCommented:
set amrgin-left and right as 100px for each frame(ie, each div)

For vertical align add style to frame as vertical-align:middle
0
 
sivagnanam chandrakanthTechnical LeadCommented:
The example site is having the body width as 10861px; and each page is a div with width as 400 px

When user clicks the next link they are showing the next div and hiding the previous one

http://www.peter-pearson.com/js/plugins.js - see this for full understanding

below is the code they are using to scroll

function scrollHere($target){
		$.scrollTo($target, 1400, {
			offset: getOffset()
		});
	}

Open in new window


Hope it explains
0
 
peps03Author Commented:
Thanks you!
Is it also possible to show the edges of the previous and next frames?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
sivagnanam chandrakanthConnect With a Mentor Technical LeadCommented:
yes you can, you need to specify proper width and css for the frames
0
 
peps03Author Commented:
Hmm i see.
What would i need to adjust to only have a 100px margin left and right of each frame?

And is it also possible to center the slides vertically in the middle?
0
 
peps03Author Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.