Navbar links not lining up? There's gotta be an easy fix -- will leave feedback

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • redhawk89
    Member
    • Dec 2008
    • 31
    • 3.7.x

    Navbar links not lining up? There's gotta be an easy fix -- will leave feedback

    Check out the attacked image. That is what happens when you highlight the navbar (which is actually, on this forum, a HEADER template).

    My question is, how do I make them horizontally line up?

    Source code and screenshot below.

    PHP Code:
    <!-- logo -->
    <
    a name="top"></a>
    <
    table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
    <
    tr>
    <
    td class="headerwrap"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <
    tr>
    <
    td class="logowrap"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="images/achik3/spacer.gif" alt="$vboptions[bbtitle]width="460" height="117" border="0"></a></td>
    <
    td >&nbsp;</td>
    <
    td class="headerR">&nbsp;</td>
    </
    tr>
    </
    table></td>
    </
    tr>
    <
    tr>
    <
    td class="navwrap">
    <!-- 
    nav buttons bar -->
    <
    div id="navstyle">
    <
    table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
    <
    tr align="center">
    <if 
    condition="$show['member']">
    <
    td ><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>
    </if>
    <if 
    condition="$show['registerbutton']">
    <
    td ><a href="register.php$session[sessionurl_q]rel="nofollow">$vbphrase[register]</a></td>
    </if>
    $template_hook[navbar_buttons_left]
    <if 
    condition="$vboptions['enablememberlist']">
    <
    td ><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
    </if>
    <
    td ><a href="http://www.saskforum.ca/armysystem.php">Army Game</a>
    <
    td ><a href="http://www.saskforum.ca/blog.php">Blogs</a></td>
    <
    td ><a href="addonchat.php" target="_blank">Chat</font></a></td>
    <
    td ><a href="arcade.php">Arcade</a></td>
    <if 
    condition="$show['popups']">
    <if 
    condition="$show['searchbuttons']">
    <if 
    condition="$show['member']">
    <
    td ><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
    <else />
    <
    td ><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
    </if>

    <
    td id="navbar_search" ><a href="search.php$session[sessionurl_q]accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"vbmenu_register("navbar_search"); </script></if></td>
    </if>
    <if 
    condition="$show['member']">
    <
    td id="usercptools" ><a href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"vbmenu_register("usercptools"); </script></td>
    </if>
    <else />
    <if 
    condition="$show['searchbuttons']">
    <
    td ><a href="search.php$session[sessionurl_q]accesskey="4">$vbphrase[search]</a></td>
    <if 
    condition="$show['member']">
    <
    td ><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
    <else />
    <
    td ><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
    </if>
    </if>
    <
    td ><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
    <if 
    condition="$show['member']">
    <
    td ><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scroll bars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></td>
    </if>
    </if>
    $template_hook[navbar_buttons_right]
    <
    center><if condition="$show['navbar_credits']">
       <
    div>$vbphrase[credits]</a>: <strong><span id="navbar_credits">$GLOBALS[navbar_credits]</span></strong> [<a href="credits.php?$session[sessionurl]do=banking">$vbphrase[check]</a>]<if condition="$show['credits_purchase']"> [<a href="credits.php?$session[sessionurl]do=manage#purchase">$vbphrase[purchase]</a>]</if></div>
      </if>
    </
    center>
    <if 
    condition="$show['member']">
    <
    td ><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
    </if>
    </
    tr>
    </
    table>
    </
    div>
    <!-- / 
    nav buttons bar --></td>
    </
    tr>
    <
    tr>
    <
    td valign="top" class="cwrap">
    <!-- /
    logo -->
    <!-- 
    content table -->
    $spacer_open
    $_phpinclude_output
    $ad_location
    [ad_header_end
    Attached Files
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73976

    #2
    First issue is this code right here:
    HTML Code:
    <center>
        <if condition="$show['navbar_credits']">
            <div>$vbphrase[credits]</a>: <strong><span id="navbar_credits">$GLOBALS[navbar_credits]</span></strong> [<a href="credits.php?$session[sessionurl]do=banking">$vbphrase[check]</a>]<if condition="$show['credits_purchase']"> [<a href="credits.php?$session[sessionurl]do=manage#purchase">$vbphrase[purchase]</a>]</if></div>
        </if>
    </center>
    You can't stick this code in the middle of a table. It needs to be in a table cell. Replace with:
    HTML Code:
                        <if condition="$show['navbar_credits']">
                            <td>$vbphrase[credits]</a>: <strong><span id="navbar_credits">$GLOBALS[navbar_credits]</span></strong> [<a href="credits.php?$session[sessionurl]do=banking">$vbphrase[check]</a>]<if condition="$show['credits_purchase']"> [<a href="credits.php?$session[sessionurl]do=manage#purchase">$vbphrase[purchase]</a>]</if></td>
                        </if>
    Second is that within the vBulletin system, a class is assigned to the TD to center each bit of text within its table cell on the navigation bar and keep them evenly spaced. You don't have this in your code. You should add class="vbmenu_control" to each TD in the navigation bar and adjust the CSS for that class to work with your style appropriately. Probably want to set the background to transparent and then make the text readable on your gradient. You can edit CSS under Main CSS in the Style Manager.

    Modified and readable code is below:
    HTML Code:
    <!-- logo -->
    <a name="top"></a>
    <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td class="headerwrap">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="logowrap"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="images/achik3/spacer.gif" alt="$vboptions[bbtitle]" width="460" height="117" border="0"></a></td>
                        <td >&nbsp;</td>
                        <td class="headerR">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="navwrap">
                <!-- nav buttons bar -->
                <div id="navstyle">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                    <tr align="center">
                        <if condition="$show['member']"><td class="vbmenu_control"  ><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td></if>
                        <if condition="$show['registerbutton']"><td class="vbmenu_control"  ><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td></if>
                        $template_hook[navbar_buttons_left]
                        <if condition="$vboptions['enablememberlist']"><td class="vbmenu_control"  ><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td></if>
                        <td class="vbmenu_control"  ><a href="http://www.saskforum.ca/armysystem.php">Army Game</a>
                        <td class="vbmenu_control"  ><a href="http://www.saskforum.ca/blog.php">Blogs</a></td>
                        <td class="vbmenu_control"  ><a href="addonchat.php" target="_blank">Chat</font></a></td>
                        <td class="vbmenu_control"  ><a href="arcade.php">Arcade</a></td>
                        <if condition="$show['popups']">
                            <if condition="$show['searchbuttons']">
                                <if condition="$show['member']">
                                    <td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
                                <else />
                                    <td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
                                </if>
    
                                <td class="vbmenu_control"  id="navbar_search" ><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
                            </if>
                            <if condition="$show['member']">
                                <td class="vbmenu_control"  id="usercptools" ><a href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
                            </if>
                        <else />
                            <if condition="$show['searchbuttons']">
                                <td class="vbmenu_control"><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
                                <if condition="$show['member']">
                                    <td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
                                <else />
                                    <td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
                                </if>
                            </if>
                            <td class="vbmenu_control"><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
                            <if condition="$show['member']"><td class="vbmenu_control"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scroll bars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></if>
                        </if>
                        $template_hook[navbar_buttons_right]
                        <if condition="$show['navbar_credits']">
                            <td class="vbmenu_control" >$vbphrase[credits]</a>: <strong><span id="navbar_credits">$GLOBALS[navbar_credits]</span></strong> [<a href="credits.php?$session[sessionurl]do=banking">$vbphrase[check]</a>]<if condition="$show['credits_purchase']"> [<a href="credits.php?$session[sessionurl]do=manage#purchase">$vbphrase[purchase]</a>]</if></td>
                        </if>
                        <if condition="$show['member']">
                            <td class="vbmenu_control"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
                        </if>
                    </tr>
                    </table>
                </div>
                <!-- / nav buttons bar -->
            </td>
        </tr>
        <tr>
            <td valign="top" class="cwrap">
    <!-- /logo -->
    <!-- content table -->
    $spacer_open
    $_phpinclude_output
    $ad_location[ad_header_end]
    You can remove the spacing once you get it working to your satisfaction.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment

    • redhawk89
      Member
      • Dec 2008
      • 31
      • 3.7.x

      #3
      What an awesome answer! Thanks Wayne! Positive feedback sent!

      Comment

      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
      Working...