Question

i’ll have a try on my first question.

This is a problem, I had a few times, but don’t exactly know, how to solve it:

I have a semitransparent background image (e.g. transparent rounded corners) which also as a gradient background color.
(In this example it’s a button for a dropdown navigation: When you hover the button, nav-list appears.)

Here’s the code:

    <div id="top-navi"><a id="top-navi-button" href="#" >Navigation</a>
     <ul>
      <li><a href='#'>bla</a></li>
      <li><a href='#'>blubb</a></li>
     </ul>
    </div>

CSS:

#top-navi {
    position: fixed;
    top: 0px;
    left: 6%;
    z-index: 1000;
}

#top-navi a#top-navi-button {
    float: left;
    width: 130px;
    height: 20px;
    padding: 5px 10px 5px 20px;
    background: url(../img/top-navi-button.png) no-repeat;
    color: #FFF;
    font-size: 120%;
    text-decoration: none;
}
#top-navi a#top-navi-button:hover, 
#top-navi a#top-navi-button:focus {
    text-decoration: underline;
}

The text on the button is white.
Because i want to make the site accessible, I don’t put the text on the image, but write it in html (so screenreaders can read it) and style it white.
This works pretty well until here.

Now, I want to make it even more accessible, so you can use all functionality, even if images are deactivated. If I do this (e.g. with FF developer toolbar) the background image disappears and you can’t see the white text anymore.

Now, if I give the link a background-color (in addiotion to the image) it laps over the transparent corners.
I also tried to put the text in a <span> and give it a background color, but as my image has a gradient, you see the background-color of the span then.

Any ideas how to solve that?
Thank you very much in advance!

Chris

Answer 1

You need an extra image for the non-transparent gradient part of the image. When you add the span to the link you can style the span to have the solid background and a fallback color.

+------------------------------------------------+
| a: Gradient and shadow                         |
| +---------------------------------------------+|
| | a > span: Solid gradient + background color ||
| +---------------------------------------------+|
+------------------------------------------------+

So, HTML:

<a id="top-navi-button" href="#"><span>Navigation</span></a>

And CSS something like:

a#top-navi-button {
  background: url(top-navi-button.png) no-repeat;
}

a#top-navi-button span {
  background: url(top-navi-solid_gradient.png) #00F;
}

Please note that if you want to create an accessible site you should also consider offering keyboard navigation. Right now you can’t use the Tab key to select any of the menu items.