The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
Need advice on css styling for navbar
I am trying to create a v4 psuedo tab navigation system that could be used in v3.8. It uses the Tab Menu system at Dynamic Drive: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm but my knowledge on css is very limited so I am having some problems which I hope someone can help with.
There are two problems: 1. How to get the active tab top to be a little higher then the other tabs like in vb v4. 2. How to spread the tabs evenly across the page as in a % of width. I am using vb v3.8.4 This is what I have in my header template: Code:
<script type="text/javascript" src="../tabmenu.js"> </script> <link rel="stylesheet" type="text/css" href="../tabmenu.css" /> Code:
<script type="text/javascript"> <if condition="in_array(THIS_SCRIPT, array('adv_index', 'sendmessage','support','staff'))">ddtabmenu.definemenu("ddtabs1", 0)</if> <if condition="THIS_SCRIPT == 'blog'">ddtabmenu.definemenu("ddtabs1", 1)</if> <if condition="THIS_SCRIPT == 'index'">ddtabmenu.definemenu("ddtabs1", 2)</if> </script> <div id="ddtabs1" class="tabmenu"> <ul> <li><a href="../index.php" rel="sb1">Home</a></li> <li><a href="../forum/blogs/recent-entries/" rel="sb2">Blogs</a></li> <li><a href="../forum/" rel="sb3">Forums</a></li> </ul> </div> <DIV class="submenu ieclass"> <div id="sb1" class="subcontent"> <a href="../index.php?pageid=about">About This Site</a> | <a href="../forum/sendmessage.php">Contact Us</a> | <a href="../forum/support.php">Help Desk</a> | <a href="../forum/staff.php">Volunteer Staff</a> </div> <div id="sb2" class="subcontent"> <a href="http">Recent Entries</a> | <a href="http">Most Popular</a> | <a href="http">Member Blogs</a> | <a href="http">My Blog</a> | <a href="http">Blog Settings</a> </div> <div id="sb3" class="subcontent"> <a href="http">Contacts & Friends</a> | <a href="http">Members List</a> | <a href="http">Open Contacts Popup</a> | <a href="http">Pictures & Albums</a> | <a href="http">Social Groups</a> | <a href="http">Who's Online</a> </div> </DIV> Code:
.tabmenu ul{ margin: 0; padding: 0; float: left; font: bold 13px Arial, Calibri, Verdana, Geneva, sans-serif; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: #006699 url(images/tab_bg.png) center center repeat-x; } .tabmenu li{ display: inline; } .tabmenu li a{ float: left; color: white; padding: 9px 11px; font: bold 13px Arial, Calibri, Verdana, Geneva, sans-serif; text-decoration: none; text-align: center; border-right: 1px solid white; } .tabmenu li a:visited{ color: white; } .tabmenu li a:hover, .tabmenu li a.current{ color: #000000; font: bold 13px Arial, Calibri, Verdana, Geneva, sans-serif; background:url(images/tab_active.png); _background-image:none; padding: 9px 11px; position:relative; z-index:10; } /*sub menus*/ .submenu{ clear: left; height:25px; border: 1px solid #C0C0C0; padding-left: 10px; padding-top: 6px; background: #e9e9e9 url(images/tab_bg_sub.png) center center repeat-x; } .submenu a{ color: #000000; text-decoration: none; font: bold 12px Arial, Calibri, Verdana, Geneva, sans-serif; } .submenu a:hover, a.current{ color: #930000; text-decoration: underline; } *:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/ margin-top: -1em; } * html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/ margin-top: -1em; } .subcontent{ display:none; } I am getting desperate to fix these two problems so any help you could give would be greatly appreciated and thanks from a css newbie |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|