PDA

View Full Version : How to move drop down box to center of navbar text?


RedGTiVR6
06-01-2008, 12:40 PM
I'm trying to figure out how to move a drop down box from the navbar to be centered under the navbar text it's dropping down from...if that makes any sense.

Here's what I have currently:

http://www.mj-garage.com/pics/navbar1.PNG

And here is my navbar template:

Any help would be greatly appreciated!

<br />

<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td>&nbsp;</td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><if condition="$_SERVER['REQUEST_METHOD'] == 'POST'"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" /><else /><a href="$navbar_reloadurl"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>
<if condition="$show['member']">
<td class="alt2" nowrap="nowrap">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

<if condition="$show['notifications']">
<div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
<script type="text/javascript"> vBmenu.register("notifications"); </script>
<else /><if condition="$show['pmstats']">
<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</if></if>

<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
</div>
</td>
<else />
<td class="alt2" nowrap="nowrap" style="padding:0px">
<!-- login form -->
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
</if>
</tr>
</table>
<!-- / breadcrumb, login, pm info -->

<!-- nav buttons bar -->
<div class="tborder" style="padding:$stylevar[cellspacing]px; border-top-width:0px">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr align="center">
<if condition="$show['member']">
<td id="usercpoptions" class="vbmenu_control"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a>
<script type="text/javascript"> vbmenu_register("usercpoptions"); </script></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]
<td class="vbmenu_control"><a href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td>
<if condition="$show['popups']">
<td id="membermenu" class="vbmenu_control">
<a href="#">Member Menu</a>
<script type="text/javascript">
vbmenu_register("membermenu");
</script>
</td>
<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 id="navbar_search" class="vbmenu_control"><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" class="vbmenu_control"><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,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td>
</if>
</if>
$template_hook[navbar_buttons_right]
<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 -->

<br />

<if condition="$show['notices']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="thead">$vbphrase[notices]</td>
</tr>
<tr>
<td class="alt1">$notices</td>
</tr>
</table>
<br />
</if>

<if condition="$show['forumdesc']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%"><strong>$foruminfo[title]</strong> <span class="smallfont">$foruminfo[description]</span></td>
</tr>
</table>
<br />
</if>

<if condition="$show['popups']">
<div class="vbmenu_popup" id="membermenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Member Menu</td></tr>
<tr>
<td class="vbmenu_option" title="nohilite"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a>
</td>
</tr>
</table>
</div>
<!-- NAVBAR POPUP MENUS -->
<if condition="$show['searchbuttons']">
<!-- header quick search form -->
<div class="vbmenu_popup" id="navbar_search_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">$vbphrase[search_forums]</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="search.php?do=process" method="post">
<!-- Start Abe1 Search Title only in search drop-down -->
<div><input type="checkbox" name="titleonly" value="1" /> $vbphrase[search_titles_only]</div>
<!-- End Abe1 Search Title only in search drop-down -->
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<div><input type="text" class="bginput" name="query" size="25" tabindex="1001" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" /></div>
<div style="margin-top:$stylevar[cellpadding]px">
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />$vbphrase[show_threads]</label>
&nbsp;
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />$vbphrase[show_posts]</label>
</div>
</form>
</td>
</tr>
<if condition="$vboptions[threadtagging]">
<tr>
<td class="vbmenu_option"><a href="tags.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a></td>
</tr>
</if>
<tr>
<td class="vbmenu_option"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]</a></td>
</tr>
$template_hook[navbar_search_menu]
</table>
</div>
<!-- / header quick search form -->
</if>

<if condition="$show['member']">
<!-- user cp tools menu -->
<div class="vbmenu_popup" id="usercptools_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos1]

<tr><td class="thead">$vbphrase[networking]</td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
<if condition="$show['quick_links_groups']">
<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
</if>
<if condition="$show['quick_links_albums']">
<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
</if>
$template_hook[navbar_quick_links_menu_pos2]

<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>
<!--<if condition="$show['avatarlink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editavatar">$vbphrase[edit_avatar]</a></td></tr></if>-->
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos3]

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
$template_hook[navbar_quick_links_menu_pos4]

</table>
</div>
<!-- / user cp tools menu -->

<if condition="$notifications_total">
<!-- notifications menu -->
<div class="vbmenu_popup" id="notifications_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead" colspan="2">$vbphrase[your_notifications]</td></tr>
$notifications_menubits
</table>
</div>
<!-- / notifications menu -->
</if>

</if>
<!-- / NAVBAR POPUP MENUS -->

<!-- PAGENAV POPUP -->
<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead" nowrap="nowrap">$vbphrase[go_to_page]</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="$vboptions[forumhome].php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
<input type="text" class="bginput" id="pagenav_itxt" style="font-size:11px" size="4" />
<input type="button" class="button" id="pagenav_ibtn" value="$vbphrase[go]" />
</form>
</td>
</tr>
</table>
</div>
<!-- / PAGENAV POPUP -->
</if>

<if condition="$show['popups'] AND $show['member']">
<div class="vbmenu_popup" id="usercpoptions_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead" align="$stylevar[left]"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['pmstats']"><tr><td class="vbmenu_option" align="$stylevar[left]"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option" align="$stylevar[left]"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option" align="$stylevar[left]"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>
<tr><td class="vbmenu_option" align="$stylevar[left]"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option" align="$stylevar[left]"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
<tr><td class="thead" align="$stylevar[left]">$vbphrase[miscellaneous]</td></tr>
<tr><td class="vbmenu_option" align="$stylevar[left]"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
</table>
</div>
</if>

$ad_location[ad_navbar_below]

RobDog888
06-01-2008, 02:26 PM
<font color="darkgreen">I believe it may be because of the space in your links text. Try renaming it to "Members" or such and see if it works.</font>

nerbert
06-02-2008, 01:39 PM
I would try this:

Locate this code halfway down:


<if condition="$show['popups']">
<div class="vbmenu_popup" id="membermenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Member Menu</td></tr>
<tr>
<td class="vbmenu_option" title="nohilite"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a>
</td>
</tr>
</table>
</div>
<!-- NAVBAR POPUP MENUS -->



and insert align="center" in the table line after border="0"

RedGTiVR6
06-02-2008, 02:29 PM
I believe it may be because of the space in your links text. Try renaming it to "Members" or such and see if it works.

Thanks for the reply. I did this before on a previous forum and it worked fine to have the Members Menu title with membersmenu as the id.

I would try this:

Locate this code halfway down:


<if condition="$show['popups']">
<div class="vbmenu_popup" id="membermenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Member Menu</td></tr>
<tr>
<td class="vbmenu_option" title="nohilite"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a>
</td>
</tr>
</table>
</div>
<!-- NAVBAR POPUP MENUS -->



and insert align="center" in the table line after border="0"

It didn't work. :( If I do that, it stretches the table out to the right side of the page and creates a ton of white space - see attached screen shot.

Thanks for the suggestions guys!

nerbert
06-02-2008, 02:58 PM
See what happens when you insert the bold lines into the code. 15% is just a guess, you can adjust the percentage until it's centered (if it works at all!)

<if condition="$show['popups']">
<div class="vbmenu_popup" id="membermenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td width="15%> &nbsp; </td>
<td class="thead">Member Menu</td></tr>
<tr>
<td width="15%> &nbsp; </td>
<td class="vbmenu_option" title="nohilite"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a>
</td>
</tr>
</table>
</div>
<!-- NAVBAR POPUP MENUS -->

EDIT: Oh, and remove the align="center"

--------------- Added 1212423783 at 1212423783 ---------------

CORRECTION: Make those bold lines read


<td width="15%"> &nbsp; </td>

There should be quote makes before and after 15%

RedGTiVR6
06-02-2008, 05:33 PM
:( Nope...didn't move it to the appropriate place...

nerbert
06-02-2008, 06:02 PM
But it moved didn't it? If it did, tinker with that percent value. What it is is the percentage of the whole long white area you had when you tried align="center". So if it moved to far to the right try 10 or 12 percent.

RedGTiVR6
06-02-2008, 07:35 PM
it moved, but it still has white area...while the boxes move the white area to the left will still remain...it's like the table is locked to that left position but the content of the table will move to the right.

RobDog888
06-02-2008, 07:38 PM
Thanks for the reply. I did this before on a previous forum and it worked fine to have the Members Menu title with membersmenu as the id.


Thanks for the suggestions guys!
Well it had worked for me but if it worked with a space on another one of your sites then what is dfifferent in the template for this site?

nerbert
06-02-2008, 08:58 PM
I was afraid that would happen. Here's one last try, if it doesn't work I'm stumped. Go back to your original code and them put in the bold shown below.

<if condition="$show['popups']">
<div class="vbmenu_popup" id="membermenu_menu" style="display:none">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="15%">&nbsp;</td>
<td>
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Member Menu</td></tr>
<tr>
<td class="vbmenu_option" title="nohilite"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- NAVBAR POPUP MENUS -->


Well, I can think of one more thing if this doesn't work but I'll have to check it out first.

Lynne
06-02-2008, 09:16 PM
Usually, whenever I have seen an issue with the drop-down not being located in the correct place, it is due to a css issue or a javascript issue/interference. Have you changed your css at all or added any javascript?

RedGTiVR6
06-05-2008, 07:51 PM
not to my knowledge, but I do have our main programmer looking into it now. he's fiddled with it some and at least made it suitable, though not perfect.

I realized a while back that it was way over my head at this point...lol

Thanks for the suggestions everyone!

Dax IX
10-04-2008, 06:34 PM
I'm having the same issue with my Guest Navbar. Once people are signed in it looks just fine, but that's mostly because of so many more Navbar links.

I have changed my Navbar and Breadcrumb (I put the Navbar above the Bredcrumb, but that's about all I've done other than changing the colors in the Popup Menus controls.

Any more ideas out there?

http://www.teegopher.com/screenshots/navbar_problem.gif

http://www.teegopher.com/screenshots/navbar_problem_members.gif

Joey Link
12-18-2008, 08:34 PM
I'm having this same problem and trying to figure it out. This guy seems to have fixed it, and it makes sense with the menu's being in an absolute position, but I don't know enough about this stuff to know how to fix it.

Problem solved.

If vBulletin is inside a div with position: relative; the dhtml menu looks bad because in clientscript\vbulletin_menu.js (line 229) this.menuobj.style.position = 'absolute'; the position of the menues are absolute.

As soon as I take out the align="center" from the first <tr> it moves everything to the left and it all lines up fine.

So how do we fix this?

By the way, my website is http://www.northwestfirearms.com for example of what it's doing.

--------------- Added 1229717482 at 1229717482 ---------------

Someone here has to know how to fix this, it works for the search dropdown menu at the top of this site.