OVERVIEW
I'm developing a master template which will be integrated into an e-commerce software CMS. The final global nav for the site will be TAB based. Due to the final design, the width is limited to 800px, which limits the number of TABS that can be displayed in an order listed. At present I can get 10 TABS, however, there are 17 TABS to display.
PROBLEMS
1) To enable the TAB font size to be increased, there's a large background graphic of a TAB that's displayed more when font size is increased. I have noticed on hovering over the links the left corner graphic disappears for a second. How can I prevent this?
2) Rather than have two rows of TABS, I'm wanting to include a link that on clicking hides the current TABS and display another set of tabs in its place. Is this possible in CSS, or would it be best to use JavaScript?
My current test code for the nav is as follows:
Code:
<html>
<head><title>Test Navigation</title>
<style type="text/css">
ul { margin:0; padding:0; list-style: none; width:700px; float:left; }
ul li { float:left; background: url(image/tab-right.gif) no-repeat top right; }
li a { display:block; padding: 0.6em 0.5em;
background: url(image/tab-left.gif) no-repeat top left;
text-decoration:none;
color:#000; float:left;
}
ul a:hover { color:#fff; }
</style>
</head>
<body>
[list]
<li><a href="#">Stands and Brackets</a></li>
<li><a href="#">Aerials</a></li>
<li><a href="#">Cables</a></li>
<li><a href="#">Computer Accessories</a></li>
</ul>
</body>
</html>
http://www.mediamole.net/testnav/index.html
I would welcome any help or advise, as at present am a little clueless.
Gaz
Tab item display prob / hide TABS query
