InfiniPhoto collection trouble [PHP, Javascript]...

[toddart65]

Here's the page i'm currently working on: toddyoungart.elementfx.com/collection.html

Here's the tutorial i followed and attempted to adapt to my page: How to Create an Infinite Scroll Web Gallery | Net Tuts+

Note: view the Demo HERE on the tutorial page to understand how the InfiniPhoto script is supposed to work.

Problems:
1] The "My Collection" nav button is way off it's original position, causing the other buttons to bunch up and not be all lined up. Is it the CSS that's causing it to go crazy?
2] Where did i go wrong in creating the Infinite "effect"? I am not good at reading javascript and i SUCK at php...
3] The "Top" link [just below a single set of 9 images] that's supposed to go to the top of the page doesn't work either...

 

[descalzo]

1. You used the id "collection" twice. The CSS is meant to be applied to the other usage, but it is being applied to the link too. Change the id on that <li> (not sure why you gave id's to those anyway...).

Will look at the other stuff...but if you gave multiple items the same id, that can cause javascript to break.

Edit/Add...

Yup, looks like using the id "collection" for both the link <li> element and the content div is the culprit. Change/delete it from the link <li> and that might solve some if not all the problems.

 

[toddart65]

okay, i got the collection nav button back to normal, but i still have no "infinite effect" being applied and nor does my "top" button work to take me back to the top...

and i have one question from a friend;

How do I make a CSS3 Background Gradient, using two colors, going from top to bottom, for the body of my HTML...