Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Design and Graphics Discussions
  #1  
Old 03-12-2010, 07:19 AM
Wilfred1 Wilfred1 is offline
 
Join Date: Jul 2009
Posts: 99
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default 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" />
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>&nbsp;|&nbsp;
        <a href="../forum/sendmessage.php">Contact Us</a>&nbsp;|&nbsp;
        <a href="../forum/support.php">Help Desk</a>&nbsp;|&nbsp;
        <a href="../forum/staff.php">Volunteer Staff</a>
    </div>

    <div id="sb2" class="subcontent">
        <a href="http">Recent Entries</a>&nbsp;|&nbsp;
        <a href="http">Most Popular</a>&nbsp;|&nbsp;
        <a href="http">Member Blogs</a>&nbsp;|&nbsp;
        <a href="http">My Blog</a>&nbsp;|&nbsp;
        <a href="http">Blog Settings</a>
    </div>

    <div id="sb3" class="subcontent">
        <a href="http">Contacts & Friends</a>&nbsp;|&nbsp;
        <a href="http">Members List</a>&nbsp;|&nbsp;
        <a href="http">Open Contacts Popup</a>&nbsp;|&nbsp;
        <a href="http">Pictures & Albums</a>&nbsp;|&nbsp;
        <a href="http">Social Groups</a>&nbsp;|&nbsp;
        <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
Attached Files
File Type: zip tabmenu.zip (5.5 KB, 2 views)
Reply With Quote
Reply

Thread Tools
Display Modes

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

Forum Jump


All times are GMT. The time now is 01:30 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03411 seconds
  • Memory Usage 2,188KB
  • Queries Executed 14 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)post_thanks_box
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit_info
  • (1)postbit
  • (1)postbit_attachment
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete