CODEWITHSUNDEEP
htmlcss
wow
wow

Reputation: 8259

How do I fix my CSS menu with rounded image background

I want to show the rounded image on the left and right menu. You can see the example here. The background image is:

<ul>
    <li><a class="current" href="">Home</a></li>
    <li><a href="">Faq</a></li>
    <li><a href="">About</a></li>    
</ul>

Let me know the trick on CSS to achieve my goal without cutting the current image.

The result should be like this

enter image description here

Here is the final result using sliding doors technique

Upvotes: 1

Views: 628

Answers (4)

Dave
Dave

Reputation: 29141

You can use the CSS rounded corners and it works just fine w/ the background image you have there (although you don't need the image's corners to be rounded and the image doesn't have to be so wide - 10px wide is just find since it repeats-x.

li a:link, li a:visited {
     background-image: url('../images/navBg.jpg');
     background-repeat: repeat-x;
     background-position: top left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    }

li a:hover, li a:active{
    background-position: bottom left;
    }

Upvotes: 1

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

Use sliding doors technique. And your main problem is that <li>s are floated so <ul> has 0 height. You can either float ul also, or give it overflow:hidden

http://jsfiddle.net/9DENH/3/

================================

UPDATE: sorry speed read will kill me one day :)

Here is my updated answer: http://jsfiddle.net/9DENH/5/

Add this to css:

li {
padding-left: 10px;/* to create gap that will not be overlapped with <a> background */
background:url(https://i.sstatic.net/yLgZA.png) no-repeat left top #000;

}
li a, li a.current {
background:url(https://i.sstatic.net/yLgZA.png) no-repeat right top #000;
    text-indent: -10px; /* same as li padding, to realign centered text */
}

This is basic you should add hover states.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196217

You should use border-radius:5px and background: linear-gradient(startcolor, endcolor);

For IE support use the CSS3PIE

example at http://jsfiddle.net/gaby/9DENH/4/

Upvotes: 2

Sven Koluem
Sven Koluem

Reputation: 687

Do you try to use the images as a sprite?

If so you have to choose diffrent positions on the background, and you also will have to define a height and width for each element.

Upvotes: 0

Related Questions