www.webdeveloper.com
Results 1 to 2 of 2

Thread: Problem with CSS - Nav Buttons

  1. #1
    Join Date
    Feb 2007
    Posts
    132

    Problem with CSS - Nav Buttons

    Hi there

    I have what seems to be a simple problem, but i am not getting it right and so I thought I would ask.. as would like to know the best solution for this.

    This is the site I am building:
    http://www.leighdesignstudio.com/itech/

    I am having problems with the navigation Hover State, and I'm not able to create what I need to in CSS. The navDivider needs to be directly in the middle, so do the words. I have attached how the navigation should look - illustrating the hover State.

    My code is:
    -------------------------------
    <div class="navBar">
    <ul id="primary-nav">
    <li><a href="#">iServices</a></li>
    <li><a href="#">iQuote</a></li>
    <li><a href="#">iFaqs</a></li>
    <li><a href="#">iAbout</a></li>
    <li><a href="#">iContact</a></li>
    </ul>
    </div>

    My CSS is:
    -------------------------------

    .navBar {
    width:1000px;
    height:47px;
    background-image:url(images/backNav.jpg);
    background-repeat:repeat-x;
    float:left;
    }

    #primary-nav {
    float:left;
    height:47px;
    margin-left:0px;
    padding:0px;

    }
    #primary-nav li,
    #primary-nav li a {
    float:left;
    display:block;
    margin:0px;

    }
    #primary-nav li a {
    padding:0.0em 2.1em;
    color:#fff;
    display: block;
    background-image:url(images/navDivider.jpg);
    background-position:right top;
    background-repeat:no-repeat;
    font-weight:regular;
    font-size:15px;
    text-decoration:none;


    }

    #primary-nav li a:hover,
    #primary-nav li.current a {
    background-image:url(images/navHover.jpg);
    background-repeat:repeat-x;
    height:47px;
    }



    Many thanks!
    Leigh

  2. #2
    Join Date
    Feb 2007
    Posts
    132
    Im not sure if anyone has read my message yet, but would really appreciate some urgent help on this! Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles