Hoping someone can help me or tell me I’m being stupid!
I have my navigation set up for the site I’m working on as an unordered list of inline links.
I’m trying to get it so I have the text of each listitem fixed to the bottom of the list and then when I rollover each listitem, the a:hover displays an image as a rollover effect using CSS sprites.
If I use position:relative on the UL and then position:absolute; bottom:0; it works fine UNTIL I add a height for the anchor tag.
As soon I add a height to the anchor tag it ignores the position absolute and puts the text of the link at the top of the area. Is this correct?
I need to set a height for the anchor tag so the a:hover has a height for the rollover effect.
It would be much better if you could show us a live link. If you are using sprites, the normal state could just have the text at the bottom and the hover state have the text in a different spot. So this should be easy. But we eed to see what you are doing.
So for the navigation at the top I would prefer it to have the text below the images. I obviously would need to change the sprite so that the whitespace is below the image so the text can sit in the whitespace.
I want to do this with text and images, rather than just adding text into the image as such.
Unfortunately, I’m not getting a clear idea of what you want to see here. From the sound of it, these are not technically ‘sprites’. But anyhow, I can’t quite picture what you are expecting this to look like. Could you elaborate?
I’ve added a background colour to the area so you can see a bit more clearly. I want the text at the bottom of the red area, which I can achieve with position:absolute, bottom:0 but as soon as I add a height to the A tag that each section is, the text goes to the top.
Thanks
This is my current relevant CSS
.navHome a, .navContinuum a, .navQube a, .navSigma a, .navETGuitars a, .navBlog a, .navAbout a, .navContact a
{
width:88px;
height:106px;
display:inline-block;
text-decoration:none;
background-color:Red;
}
What you could do is reduce the height of the <a>s and add top padding instead:
.navHome a, .navContinuum a, .navQube a, .navSigma a, .navETGuitars a, .navBlog a, .navAbout a, .navContact a {
background-color: Red;
display: inline-block;
[COLOR="#FF0000"]height: 26px;
padding-top: 80px;[/COLOR]
text-decoration: none;
width: 88px;
}
Then remove the top whitespace on the sprite image and the images will appear at the top of the link on hover. The sprite image is 106 px tall, so the icons can’t help but appear at the bottom of the anchor. Cut off the top of the image and make it, say, 80 px tall, and you will get your effect.
Great! One extra thing that might be nice is to have the image appear when the page is current, to make it clear what page one is on. It’s quite easy to do that with CSS. One way to do it is to add a unique class to the body tag of each section. So, on the Qube page, add something like
Yes I agree, I’ve done that on other sites and intend to do it on this one as well.
Can I ask why these technically arern’t sprites? My understanding of sprites is using one image file and selecting your images from it using background position?
