CSS Layout of a Particular Website

I really like what this website has done with their CS开发者_如何转开发S layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.

Site: http://www.fssjax.org

Thanks

Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).

After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.

Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.

Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.

Inspect an element, look at the css then Google to find out what the css does if you aren't sure.

Well ok, it's kind of a crap navigation though...

Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.

And like the others said, use Firebug to figure out what everything is doing.