Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Sliding Doors for tabbed nav - problem

Reply
Thread Tools

Sliding Doors for tabbed nav - problem

 
 
luispunchy luispunchy is offline
Junior Member
Join Date: Jun 2006
Posts: 1
 
      07-31-2006
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 Code:
<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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
NAV, NAV 5x.... Norton Anit-Virus?? MrDave Microsoft Certification 0 08-09-2009 07:48 PM
sliding bar problem Viktor Javascript 1 04-22-2006 11:48 AM
Closing the doors 15 minutes before closing. doofus Computer Support 12 06-11-2005 08:20 AM
closed doors brian mac Computer Support 5 05-02-2004 07:22 PM
Blowing the doors to Palm - Java programming for Tungsten handhelds asj Java 138 09-01-2003 07:44 PM



Advertisments