November 9, 2009 - 11:56am
Try setting the line-height as an absolute value
Hey Tony, you've got a couple of options. You could go with image replacement, but if you do, I'd recommend using a non-web font. If you're paying the price of loading the image, even if it's a couple of K, why not add a little style? But as you point out, the rollover issue a a bit problematic as ascenders and decenders overlap.
I prefer text based links. So I'd set the line-height as an absolute value:
a
{
font-size:30px;
line-height: 25px;
}
a:hover, a:active
{
font-size:100px;
}I'd be leery of changing the order of the menu items. I once tried that in a comp and it gets confusing when navigation is not in the expected place. My effect was more subtle (I floated the active item on a horizontal menu). However, your large font might be obvious enough to make it work.
Blessings!
-NP
I think I know what I'm going to do here, but I'd like to see how it "should" be done. First off here's my mock-up: http://dl.dropbox.com/u/720898/anthonyperomusic201....
What I'm specifically trying to figure out is the best way to turn that menu on the right side of the header into rollover links. What I'd LIKE to happen is the following. When I roll over an item, it gets big and light (like the word shop in the mock-up) without displacing the other items. There is a lot of overlap here, and I'm not sure if a bunch of images or straight text/css would work better.
In addition, when a section of the site is accessed, I'd like the link to move to the bottom of the list and remain big. In other words, when someone is at site.com/songs/song-title, I'd like the "songs" link to be where "shop" is now, and look the same. Everything else can "slide" up.
So, image replacement or text/css? The image solution is problematic, because the text of the links overlaps.
Any solutions?
Blessings,
Tony
Anthony Pero
http://www.myspace.com/anthonypero