Hover state w/ padding

HTML & CSS
1

Hi everyone,

Boy its been a long time since I’ve done some coding :slight_smile:

I am trying to give my hover states to left and right padding of the top navigation bar. This is so the teal doesn’t come up right to the word. Because of the difference in length in the button titles, I cann’t give the nav bar specific widths.

Does anyone know a work-around this? I’ve tried everything!!

This is the page: http://ninaobrecht.com/testing/ballet-testmenu.html

my html:


    <div id="nav">
    
    <a href=""><img src="[images/dance-elite-logo.jpg](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/images/dance-elite-logo.jpg)" alt="Toronto Dance School" /></a>
    
    
        <ul id="main_nav">
            <li><a href="[link1](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/link1)">Events</a></li>
            <li><a href="[link1](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/link1)">Classes</a></li>
            <li><a href="[link1](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/link1)">Registration</a></li>
            <li><a href="[link1](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/link1)">Program Structure</a></li>
            <li><a href="[link1](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/link1)">About</a></li>
            <li><a href="[link1](http://www.sitepoint.com/forums/view-source:http://ninaobrecht.com/testing/link1)">Contact</a></li>
        </ul>
            <!-- end menu-tall-->
            
</div>
    <!-- End nav -->[FONT=verdana]
[/FONT]

my css…


#nav {
    width:960px;
    height:150px;
    position:relative;
    border-bottom: thin solid #666;
}

#main_nav{
    position:absolute;
    margin:0;
    padding:0;
    width:725px;
    height:150px;
    display:inline;
}

#main_nav li {
    display:inline-block;
    line-height:11.5em;
    list-style-type:none;
    float:left;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
    border: thin #FFF;
}

#main_nav li a {
    color:#fff;
    display:block;
    height:150px;
    font-size:16px;
    font-weight: bold;
    outline:none;
}

#main_nav li a:hover{
    display:block;
    background:#00c4df;
    text-decoration:none;
    }

Full css: http://ninaobrecht.com/testing/css/demo.css
Additional css files here - though I don’t imagine that they play a part in this: http://ninaobrecht.com/testing/css/

Thank you so much in advance!!

Nina

2

Do you mean something like this?


#main_nav li{margin:0;}
#main_nav li a{padding:0 15px}
3

holy moly… i could have sworn that i tried that last night it wasn’t working :blush:

thank you.

but since i have you here… do you by chance have a link to instruction on how to add an ‘active’ state?

thanks again. worked like a charm.

4

It depends what you mean by active lol :slight_smile:

I’m guessing you don’t mean the :active pseudo class but rather a way to highlight the current menu item on the current page.

If so then the easiest way is just to add a .current class to the item on each different page.

e.g.


#main_nav li.current a{
    display:block;
    background:#00c4df;
    text-decoration:none;
    }

Then on each page in your site add the current class to the appropriate list item.

e.g.


[B]<li class="current[/B]"><a href="link1">Classes</a></li>
5

Thats exactly what i mean. Thanks so much!