Issues with multiple hover effects

Hi everybody,
First of all, I don't have a very solid base in code. I never took a class or formally learned about HTML or CSS. I've only experimented with Dreamweaver or looked through tutorials I found on google to get the results I wanted. I'm really stumped at the moment and would really appreciate some help.

I'm helping a friend create a website for his artwork. Where I'm struggling right now is with the image gallery, as I'm not sure how to do anything complex that requires Javascript or Flash. So I found a nice tutorial here (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb) that shows you how to do it in CSS.

The problem I'm having now is, I can't get it to work with the rollover buttons I have on the top of the page. Not sure what to do, but with all the things I've tried, here are the two closest attempts at getting what I want. In terms of look, this version is closer (http://arteelin.com/illustration.html). In terms of functionality, as in with the buttons on the top and the artwork thumbnails, this is what I want (http://arteelin.com/illustration2.html). So, my end product, should be the combination of the two.

If it helps any, the tutorial I used to create the buttons at the top can be found here (http://www.alistapart.com/articles/sprites). I'm wondering if there's something about combining the two tutorials that creates a conflict, or if I just did something wrong.

Thanks for taking the time to read this and I hope someone out there can help!

-Andrew

I am really not sure what your problem is or what your looking for, but you do need to put <li> tags inside of <ul> tags

<div class="buttons">
<ul>
<li id="home"><a href="news.html"></a></li>
<li id="illustration"><a href="illustration.html"></a></li>
<li id="design"><a href="design.html"></a></li>
<li id="madison"><a href="madison.html"></a></li>
<li id="about"><a href="about.html"></a></li>
<li id="personal"><a href="personal.html"></a></li>
<li id="blog"><a href="http://arteelin.blogspot.com" target="_blank"></a></li>
<li id="facebook"><a href="http://www.facebook.com/profile.php?id=6302796" target="_blank"></a></li>
<li id="news"><a href="news.html"></a></li>
<li id="contact"><a href="contact.html"></a></li>
<li id="email"><a href="mailto:Artee023@yahoo.com"></a></li>
</ul>
</div>

What do you need to get this magnificent artists works on line?

I may have found a solution! After including the correct tags, and playing with the .gallerycontainer class positioning and the z-index, I was able to achieve what I was looking for! Basically the original problem was that the way I had the gallery positioned was making the navigation items at the top (blog, facebook, news, contact, etc) not function. But after giving the .gallerycontainer an absolute position, and making the z-index higher than the .buttons container, I got it to work.

Thanks for helping out! Here is the correctly working page now! (http://arteelin.com/illustration.html)