CODEWITHSUNDEEP
htmlcssbackground-imagehtml-lists
MLS1984
MLS1984

Reputation: 307

Using CSS to style LI element with background image

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.

Upvotes: 1

Views: 20869

Answers (2)

Dmitry Samuylov
Dmitry Samuylov

Reputation: 1564

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.

Upvotes: 1

Slava Petrov
Slava Petrov

Reputation: 350

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.

Upvotes: 2

Related Questions