I am trying to understand how this works. The site at http://fixmysite.us/OTO/
has some issues with its tabbed menu…
Im trying to make it so the tab (of the current page) will be on top of the rounded box (so the tab would appear with a solid white bottom, not a blue line underneath) I thought if I made #tabs { position: relative } I can change the stacking order of the active tab by giving a z-index, but I guess not…
So how can do that?
Thanks…
I tried to replicate the 1st example (using a sprite) but I cant figure out why none of the mouseovers dont work…
Can you see why?
You’ve put the image on the ul itself (which sometimes I do but as a sort of backup), but in my examples the ones doing the actual heavy lifting are the spans.
Whats the purpose of the <span></span>?
http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin
This is the technique I’m using. What you have is, your anchors with regular anchor text (this shows onscreen like normal if the user doesn’t load the images for some reason) and also inside the anchor is an empty sandbag element. Sandbags only exist as hooks for CSS… in this case, the span is holding the image.
<li><a href=“#”>Anchor text <span></span></a></li>
Initially, the span’s empty so it has no dimentions and is invisible. The anchor text is visible.
Since your images have the text in the image, you want the image to completely sit on and cover up the text. We use absolute positioning to do this.
the anchor
is position: relative
has a set height (which means it needs to be in block context, so either floated or display: block)
has stylings for the text for those who only see the text
You’ll want separate a:hover and a:focus declarations with text changes, again for those who only see text, like adding/removing underlines or changing the colour.
and the spans
are position: absolute
left: 0;
top: 0; (because I have them after the anchor text, I have to state the coords for top left corner here)
width and height are set to 100%… that’s 100% of their parent, the anchors
the background image
At this point, your anchors will look retarded : ) But you’re on the right track.
You start setting width for the individual anchors, using their id. Now if I have a bunch that are the same width, I’ll state that in the main anchor declaration and only mention the ones who are different widths to save code.
so if they’re mostly 50px wide
#special {
width: 72px;
}
#anotherspecial {
width: 97px;
}
or whatever they are.
Then the spans will automatically be exactly the width and height of its parent anchor.
Last, you need to refer to each anchor’s span individually to set the background position. For a menu like yours with a lot of anchors, it’s a lot of code.
#someanchor span {
background-position: somethingpx somethingpx;
}
#someanchor:hover span, #someanchor:focus span {
background-position: somethingpx -somethingpx;
}
…
Gilder-Levin’s weakness is transparency. Because it relies on the span’s image covering up the text, the image can’t be transparent. If you still have transparency in your image, you might want to try other things. One option is to have the actual anchor text sit out in the open and just hold the background as an image.
<li><a href=“#”>Anchor text<span></span></a></li>
Same HTML, but here, the anchor text sits out in the open (you don’t seem to have a special font or anything) and the anchors each hold the left half of the background (so, you’d make a new sprite: one that has the left side of your tab and no text, which is very very wide— as wide as the widest you’d expect your text to become (and then some), and the right side as a cap, held by the span.
This article uses the li, which is less code but I’ve found it harder to get nice cross-browser.
However, again, this can be a single image, it doesn’t have to be different ones.
You’ll still be sliding the image around on hover/focus, but you’ll only need one declaration for it:
a:focus, a:hover {
background-position: (shift up or down by the height of the image)
}
a:focus span, a:hover span {
background-position: (shift up or down by the height of the image again)
}
(the first number will be different for anchors and spans)
I tried to replicate the 1st example (using a sprite) but I cant figure out why none of the mouseovers dont work…
Can you see why?
Whats the purpose of the <span></span>?
Thanks
Wow, thanks a lot, It makes much more sense to do this with a sprite (like the gif example but it’ll be a png)
Hm, well, normally, yes. You have the concept correct, and normally when I’m doing such things I do simply allow the image to cover up the border (the top border of the main box).
I think what’s hitting you is the use of opacity. The border remains, but looks grey, because the “white” is only at 80%. This is a place where I would do either one of two things:
Either I would make an image for each tab, containing two states: regular and hovered/focussed… so this is a single sprite for a single button, containing two states which could be a semi-transparent PNG (more on this in a bit)
OR (better I think)
make one single, large sprite containing ALL your tabs. Since each tab has its own personal identifyer this is doable on your page already. What’s different is that all tabs would call this same single image, but would have different background-positions (so home shows just the home part and 409 shows just the 409 part etc). Another set of background positions show the top or bottom level of the sprites for each tab.
Now, on the transparency: if you really need to keep this box being able to slide around, then you’ll need the semi-transparency in your image (an alpha layer, so a png) which means IE6 will not show the fancy transparency (unless you want to call some scripts) and your sprite will be larger than if it did not hold this kind of transparency.
If there was a way to keep the background and main box from sliding around each other (if the background image were centered for example, I think they could always line up and larger viewports merely show more of the edges of the image, rather than the left side of the bg image always starting on the left of the browser), then you could instead have a non-transparent image who just shows what looks like transparency (you start out with a semi-trans white layer in your image, but then flatten it before saving the file as an indexed PNG). If you could do this, you’d have a sprite working in all browsers, no scripts needed, and smaller filesize (no alpha layer and you’d be able to index it).
Have you seen large menu image sprites before?
Here is one example (old, sorry): Two-state menu
(member kyllle’s design) I didn’t post the image directly there, which is menu.gif which today I would make as a PNG, not a gif)
and this one is different in that it has margins spacing the items:
two-state menu also designed by someone else.
Both of those sprites have the disadvantage of text being a static size. There is also the possibility of having the tabs as background images and plain text on top, though that adds another layer of complexity because you’d need sliding doors with extra sandbags with your sprites.