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

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. vbGansta

    Smart Nav and AutoRefresh Problem

    vbGansta, Apr 27, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,282
    vbGansta
    Apr 27, 2004
  2. Guadala Harry

    Cache and Sliding Expiration

    Guadala Harry, Nov 4, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    11,838
    jongalloway
    Nov 4, 2004
  3. Alberto La Pera

    sliding menus

    Alberto La Pera, Dec 8, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    621
    Nick Stansbury
    Dec 8, 2004
  4. asj
    Replies:
    138
    Views:
    2,932
    William Brogden
    Sep 1, 2003
  5. harshaL
    Replies:
    1
    Views:
    670
    Victor Bazarov
    Aug 20, 2004
  6. Saqib Ali
    Replies:
    9
    Views:
    641
    Michael Torrie
    Jan 16, 2012
  7. Viktor

    sliding bar problem

    Viktor, Apr 22, 2006, in forum: Javascript
    Replies:
    1
    Views:
    178
  8. RobG
    Replies:
    2
    Views:
    208
    news@chthonic.f9.co.uk
    Jul 31, 2006
Loading...