For you email subscribers that may not get the Tutorials messages
I’m also posting this on the main FWTalk list in case anyone is
interested.
I’ve been wanting to do this one for a while and finally had a few
minutes to put it together so I hope someone finds it useful. This is
about using graphics for menu buttons and has nothing to do with any
action. It’s all done manually using text links and CSS, there’s not
a graphic box in sight.
I see posts from people struggling with stacks of graphic menu
buttons and whether they need to be grouped, layered, unlayered etc.
While this example is nothing new (no reinventing the CSS wheel here)
I think a lot of users may not be aware of alternative methods. This
example is based on a client design I did recently.
While it’s easy enough to understand the concept behind stacked
images for different link states and its apparent simplicity to
execute it has some major drawbacks:
Completely useless for inline layouts.
A semantic dead-zone (read: not very search engine friendly).
A lot of code and layout clutter due to the multiple divs needed
for each link state.
Using CSS to achieve the same end result is far more elegant and
doesn’t suffer from the above problems. In fact, probably the best
argument for this approach is that it allows the use of lists for the
menu which from the point of view of a search engine makes your page
more tasty.
This example assumes at least a basic understanding of CSS and the
structure of lists though even if you’re new to this stuff please
take the time to pick apart the example, it’s not difficult and
you’ll probably be glad you did. It may appear like a lot of work
compared to drawing graphic boxes on a page but the fact is a lot of
the CSS is repetitive so once you grasp the basic idea it’s easy and
the benefits are many.
You could probably work through the instructions online but I suggest
downloading the file since it helps to pick things apart if you get
stuck. If you find any problems with the instructions let me know as
it was done rather quickly.
I guess that would be my tutorial, glad you like it! I recently
changed hosts and downgraded my web space capacity quite a bit so the
site with all my demos (anoptic.com) got sacked, for the time being. I
hope to have them back online eventually.
Please contact me off-list and I’ll be glad to send you the FW file.
If anyone else is looking for a demo of mine that used to live on the
above site please drop me a line and I’ll send it over. View my FW
Talk profile ‘Todd’ for contact info.
Thanks,
Todd
On May 22, 2009, at 5:56 AM, ed watt wrote:
I tried this tutorial in a previous project and it was fantastic
once I got it figured out!
Seems the link is down now though? Any chance you could re-post it
somewhere?
I recently changed hosts and downgraded my web space capacity quite a bit so the site with all my demos (anoptic.com) got sacked
Hey uncle Walt…since you’ve been kind enough to offer storage space for video tutorials…how about some storage space for tutorial attachments that need a home?
Those videos come out of my own pocket, although with the cost of
storage at S3, that’s shockingly low – $2/month is my average bill.
If anyone else wants to pony up a set of S3 credentials, I can easily
modify the basic framework to stash files of any kind on Amazon’s
worldwide network.
Walter
On May 22, 2009, at 12:34 PM, chuckamuck wrote:
I recently changed hosts and downgraded my web space capacity quite
a bit so the site with all my demos (anoptic.com) got sacked
Hey uncle Walt…since you’ve been kind enough to offer storage
space for video tutorials…how about some storage space for
tutorial attachments that need a home?