Webvamp | Graphical CSS Rollover Menu
http://www.webvamp.co.uk/blog/coding/graphical-css-rollover-menu/#example
What I Learned
The tutorial was pretty straightforward. I understood most of the instructions, such as displacing the text off the screen to the left and the whole moving of the background position idea, but I almost wish there was more text to explain the code shots. I applied this tutorial almost step by step on another site that I was building, but the process seemed a bit tedious and not really the results I wanted. I looked onto some other sites and found that "there is more than one way to skin a cat". Something that seems to be relatively true about most things on the web.
How I Applied it to the Site
For my personal preferences, I wanted to keep the actual text on the page instead of span tagging each link and pushing off to the left. In order to still have the pixie rollover, I simply made my menu without the text included in the image. I still kept the pseudo class states on the links to style the text in addition to the background position change. I felt this gave me a bit more flexibility in redesigning my navigation bar in the future, but this will probably come back to bite me later with some unexpected text/font issues later.
The other problem I should have adjusted from the beginning is that my buttons are not all the same width. I unfortunately took the long way around and measured out each button individually for background positioning and placing the button dividers. In the end it turned out alright and the look gives the buttons a more uniform margin with the text. However, each button's width is now individually tailored to its current text. This of course shot my future flexibility plan right in the foot. Oh well, live and learn.