Results 1 to 4 of 4

Thread: Odd shaped vertical rollover nav menu problem

  1. #1
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Odd shaped vertical rollover nav menu problem

    i have a vertical rollover menu which has odd shaped boxes, i'd like these to rollover without hiding those parts of the image that protrude.

    here's the address: http://www.studio69.co.nz/ME/index.html
    basically they have to butt up underneath each other, but not loose the outside top edges on the rollover state. i also want the text aligned right, but have a negative indent of 10 or so pixels. you'll see what I mean upon viewing the example.
    thanks in advance!

    current CSS;

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    position: relative;
    }

    ul a {
    display: block;
    width: 141px;
    height: 44px;
    line-height: 58px;
    text-decoration: none;
    background: url(../images/gif/menuOverA.gif) no-repeat left;
    }

    #home #menu .home a,
    #about #menu .about a,
    #choose #menu .choose a,
    #services #menu .services a,
    #health #menu .health a,
    #testimonials #menu .testimonials a,
    #contact #menu .contact a {
    background: url(../images/gif/menuOverA.gif) no-repeat right;
    cursor: default;
    color: White;
    }

    #menu a:hover {
    background: url(../images/gif/menuOverA.gif) no-repeat right;
    color: White;
    }

    #about #menu .about li {
    background-color: Aqua;
    }
    and html;

    <div id="menu">
    <ul>
    <li class="home"><a href="index.html">HOME</a></li>
    <li class="about"><a href="aboutUs.html">ABOUT US</a></li>
    <li class="choose"><a href="whyChoose.html">WHY CHOOSE US</a></li>
    <li class="services"><a href="services.html">SERVICES</a></li>
    <li class="health"><a href="healthSafety.html">HEALTH &amp; SAFETY</a></li>
    <li class="testimonials"><a href="testimonials.html">TESTIMONIALS</a></li>
    <li class="contact"><a href="contactUs.html">CONTACT US</a></li>
    </ul>
    </div>

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    have a look

    here

    and here

    and check the source code of the pages to see how it was done. These are more extreme examples, but should get the idea across.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fantastic

    many thanks!

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Welcome, hope it helps. You can click the "menus" tab on top of wither of those pages for about 50 more menus. There are a few tutorials there as well, great resource.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

Bookmarks

Posting Permissions

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