Sliding Doors for tabbed nav - problem

Discussion in 'HTML and CSS' started by luispunchy, Jul 31, 2006.

  1. luispunchy

    luispunchy

    Joined:
    Jun 28, 2006
    Messages:
    1
    Likes Received:
    0
    My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation.

    Not sure if I'm allowed to post links or attachments, so below are some code snippets.

    The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought.

    CSS:
    Code (Text):


    /* horizontal main menu navigation */
    #nav {
        float:left;
        width: 100%;
        background: yellow; /*temporary color just for visual cue */
    }

    #nav ul {
        margin: 0;
        padding: 0 0 0 300px;
        list-style: none;
    }

    #nav ul li {
        float: left;
        margin: 0;
        padding: 0;
        font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
        background: url(images/tab_right.gif) no-repeat top right;
    }

    #nav a {
        float: left;
        display: block;
        margin: 0 10px 0 0;
        padding: 5px 2px;
        color: #fff;
        text-decoration: none;
        background: #284d73 url(images/tab_left.gif) no-repeat top left;
    }

     
    HTML:
    HTML:

    <div id="nav">
     <ul>
      <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li>
      <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li>
      <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li>
      <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li>
      <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li>
     </ul>
    <!-- end #nav -->
    </div>
     
    Problem is two fold:
    1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing...

    2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing...

    If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?).

    Thanks for any suggestions!
    luispunchy
     
    luispunchy, Jul 31, 2006
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.