- Joined
- Jun 28, 2006
- Messages
- 1
- Reaction score
- 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:
HTML:
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
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