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
    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:
    
    /* 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. Advertising

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,087
    vbGansta
    Apr 27, 2004
  2. asj
    Replies:
    138
    Views:
    2,503
    William Brogden
    Sep 1, 2003
  3. harshaL
    Replies:
    1
    Views:
    568
    Victor Bazarov
    Aug 20, 2004
  4. Viktor

    sliding bar problem

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

Share This Page