1

I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given proportions of the tab.
This is the page: http://thegoodgirlsnyc.com/holly/about. The active tab should look like this:

screenshot

The CSS styles are the following one:

#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p

How can I get this image to show at the bottom of the predefined background? These tabs will be included in multiple locations, with varying length of text, so they should only use the one image.

apaderno
  • 28,547
  • 16
  • 75
  • 90
MLS1984
  • 307
  • 2
  • 6
  • 21

2 Answers2

2

Due to the background image with diagonal lines I doubt it is possible to do what you need by styling one tag only.

The solution could be either styling both the LI and the inner A tags (see an example that is very close to your image there: http://www.litecommerce.com/services.html) or wrapping the anchor text into SPAN and styling the A and the inner SPAN tags.

Slava Petrov
  • 350
  • 2
  • 9
1

Here's is HTML and CSS i got from tweaking your page in Firebug that gets the desired effect:

<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
  <a href="#one" class="current" style="background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px;">Featured</a>
</li>

You can convert the inline styles to the appropriate CSS styles. The above markup is just for the selected LI element and the anchor element inside.

Hope this helps you.

Ok, here's an updated version for you that should work (note, the above CSS should only be applied to the selected LI and the A element within):

Your HTML Markup 

<ul class="nav">
  <li class="nav-one current"><a href="#one">Services</a></li>
  <li class="nav-two"><a href="#two">Clients</a></li>
</ul>

NOTE: class='nav-one current' on selected LI element instead of A element

Your NEW CSS

ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }

There is an error in your CSS selector. It should be:

#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }

Here's a sample of what i did in Chrome and the result: Example Style

NOTE: Also, it looks like your image path is not resolving to the image on your server correctly, in my case it is because I put in the full path to the image.

NOTICE: You didn't change the markup to have the "current" class on the LI element instead of the A element.

Dmitry Samuylov
  • 1,554
  • 2
  • 14
  • 37
  • Thank you Dmitry, but this does not work. If I apply the styles that you have shown, then both the active, and inactive tab show the arrow. I tried switching the styles from the current to the call of the li, but the height deceleration cancels the image showing. – MLS1984 Sep 19 '11 at 17:26
  • I've applied the styles, but they are still not working properly. This is the tags that the code should apply to: #example-one ul.nav ul.one li.nav-one .current { display:block; height:35px; background: url('/images/tabarrow.png') no-repeat 50% 24px; } #example-one ul.nav ul.one li.nav-one .current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; } – MLS1984 Sep 19 '11 at 21:58
  • Thank you for all of your support Dmitry. Finally I was able to target the CSS correctly, but when I move the "current" class to the li, the linking functionality is lost. – MLS1984 Sep 20 '11 at 15:13
  • ok, in that case leave "current" class where it is and add another class to the LI, call it something like "selected-li" and then change your selector for the stylesheet above from `#example-one ul.nav ul.one li.nav-one.current` to `#example-one ul.nav ul.one li.nav-one.selected-li` and from `#example-one ul.nav ul.one li.nav-one.current a` to `#example-one ul.nav ul.one li.nav-one.selected-li a`. Also note that this selector will only target the first LI element, so if you later select the second LI element, the selector won't apply. For it to work for either one use the following selectors: – Dmitry Samuylov Sep 20 '11 at 16:12
  • `#example-one ul.nav ul.one li.selected-li` and `#example-one ul.nav ul.one li.selected-li a` – Dmitry Samuylov Sep 20 '11 at 16:12
  • @MLS1984 If this answer helped you please consider marking it as an answer or voting for it. Thanks. – Dmitry Samuylov Sep 20 '11 at 16:54