Question

I currently have this on a webpage I’m making:

HTML

<div id="pageHeader">
    <nav id="siteNav">
        <ul>
            <li id="currentNavTab"><a href="index.php"><span>Home</span></a></li>
            <li><a href="services.php"><span>Services</span></a></li>
            <li><a href="gallery.php"><span>Gallery</span></a></li>
            <li class="LastNavTab"><a href="contact.php"><span>Contact</span></a></li>
        </ul>
    </nav>
</div>

CSS

nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}

nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}

nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}

The code results in something like this:

I would like to have it so that the currently selected tab takes on a highlight, which can either be a bitmap or generated with background-gradient; something like this mockup:

I’m having issues with the layout. I tried to put the background behind the li’s, but that didn’t display correctly:

Being a relative amateur at web development I don’t know how to fix this and get the result I want. An additional issue is that I would like the highlight to be masked within the rounded border. Any help would be appreciated!

Answer 1

Here’s a fiddle. http://jsfiddle.net/57VC8/1/

What i did:

1. Set display inline-block on the li’s. Why? Putting inline-blocks or block (that’s elements with one of those displays) inside inline elements just might give you some hard to understand problems.
2. Set all the width’s and paddings on the a element and not on the li.
3. Added a class “current” to the currently selected link, through which you’d apply whichever styles you want.