| Wilfred1 |
03-12-2010 07:19 AM |
Need advice on css styling for navbar
1 Attachment(s)
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" />
This is what I have created so far in my navbar template:
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>
This is the style sheet:
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 have also attached the style sheet as a file plus the js file and images.
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 |
More Information