Thank you for working on this to help me out, I appreciate it very much.
With looking at the image that you modified, I can see it working for the “intro” button but, as soon the image for the rest of them are supposed to be blue arrows they are going to have those grey small triangles on the left.
Here is the on and off state of each in-case you did not look at my original posts:
Thank you again for helping me on this.
Also, the reason for wrapping the <p> tags in the <a> tags is so that I can have the text links with a display of none. Is there a better way to do that?
A good idea. Overlapping elements to be more exact. But you need to rethink your sprite. One blue background, one gray background, ending with an arrow head and a transparent region. Perhaps you need a visual. Here it is. This is how elements should be manipulated. Sorry about the poor graphics
You control the overlap with position: relative; left:-25px;, or whatever, and, if necessary, use z-index to control the order.
@Ralph- Thank you for that bit of information, I will do that.
Do you happen to know a solution to the bigger problem? If not, I am probably going to go to the client and tell them that each button will be a separate page with different image backgrounds for the menu.
(I still want to know how to do this, just in case they say it has to be like this or if another client down the line wants something like this.)
Are you still pursuing Rayzur’s solution? He’s a genius at this stuff, so I thought that had set you on the right track. Do you have an online attempt at that code?
If I had of known you were wanting the tails of the arrows to show then my original suggestion would have worked.
The sprite image that I was using is basically the same since it has tails and points.
In this image I showed how it grids out for the widths and negative margins changing on hover. As explained in my original post. That grid shows the 8px offsets between the tails and points.
The thing about relative positioning is that it only moves the element visually. It still occupies it’s original place in the page and it leaves behind black holes. It gets worse as each following element must account for the black hole plus the visual position of the RP’d element before it.
I used relative position to make the OP better understand what eruna initially meant by overlapping. It’s intuitive. But your point is why I added “or whatever”.
I agree negative margins could prove to be better. But they are not so intuitive. I was trying to be clear about a technique, rather than about an implementation.
All that said, now, just for the sake of argument:
Sometimes “the thing” can prove to be a feature.
True about accounting for the black hole plus the visual position. But an overflow:hidden; on the parent will take care of the… overflow.That would be div id=“mc_mid” in our case.
In the end, I’m happy we all provided options for William
the reason for wrapping the <p> tags in the <a> tags is so that I can have the text links with a display of none. Is there a better way to do that?
You could use<a><span>, and either give a negative indent ( which might allow you an extra tag to use in the hover) or continue with the display:none IR technique. You could also position the make the span contain the image and use AP so that it covers up the text ( this has the advantage that when images are turned off, your navigation will still b visible)
as far as the sprites ( or any images actually) are concerned … the problem is that you navigation REQUIRES overlap. The tip of the arrow has to change when #1 hovered and the fin when #2 is hovered… but they both occupy the same space…
Noonnope is right.
you could also use a gif ( assuming that soft shadow outside the menu is not vital . you can regain it with CSS3 and PIE, BTW)
at this point your sprite would begin to look something like this:
Note the size of the buttons (anchor/ LIs) have change to, to account for the overlap
so 4 x length - (3*overlap) would be your UL width…
OR
you could add padding-left that’s equal to the overlap, and then just give each LI margin-left:-overlap…
…But the “tails” of my 2nd, 3rd, and 4th “arrows” are not showing up. I used Rayzur’s code as a guide.
I’ve been wracking my brains all night on this and just can’t figure it out. I code PHP and javascript but nothing is more aggravating and difficult to me than CSS!
