[Help] Nav Bar Centering

[metalguitarist3]

Hi.

We are completely new users to vBulletin, and have to say we're liking what we see.

We are trying to center the part of our forums where it says "Homepage" , "Your Account" etc

We can move the header image so that it is centered but cant for the life of us figure out how to move the nav bar links.

Have tried adding <center> tags pretty much everywhere in the header but to no avail.

Any ideas?

Our header looks like this:

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/logo.gif" border="0" alt="" /></td>
<td align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
</td>
</tr>
</table>
<!-- /logo -->

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><a href="index.php"><img src="$stylevar[imgdir_misc]/homepage_nav.gif" border="0" alt="" /></a></td>
<if condition="$show['member']">
<td><a href="usercp.php"><img src="$stylevar[imgdir_misc]/youraccount_nav.gif" border="0" alt="" /></a></td>
</if>
<td><a href="memberlist.php"><img src="$stylevar[imgdir_misc]/memberlist_nav.gif" border="0" alt="" /></a></td>
<td><a href="calendar.php"><img src="$stylevar[imgdir_misc]/calendar_nav.gif" border="0" alt="" /></a></td>
<td><a href="search.php"><img src="$stylevar[imgdir_misc]/search_nav.gif" border="0" alt="" /></a></td>
<td id="usercptools"><a href="$show[nojs_link]#usercptools"><img src="$stylevar[imgdir_misc]/quicklinks_nav.gif" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("usercptools",true); </script></td>
<td><a href="faq.php"><img src="$stylevar[imgdir_misc]/faq_nav.gif" border="0" alt="" /></a></td>
<td width="100%"></td>
</tr>
</table>

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/extralinks.gif" border="0" alt="" /></td>
<td width="100%" style="padding-left:10px;">
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
</td>
</tr>
</table>

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/top-left.gif" border="0" alt="" /></td>
<td width="100%" style="background-image:url('blueevolution/misc/top-bg.gif'); background-repeat:repeat-x;"></td>
<td><img src="$stylevar[imgdir_misc]/top-right.gif" border="0" alt="" /></td>
</tr>
</table>

<!-- content table -->
$spacer_open

$_phpinclude_output
$ad_location[ad_header_end]

Thanks in advace.

[tipoboy]

could you provide a link

[metalguitarist3]

sorry, my bad.

[Mr-Moo]

What happens when you try to put:

<td align="center">

[Seven Skins]

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/logo.gif" border="0" alt="" /></td>
<td align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
</td>
</tr>
</table>
<!-- /logo -->

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="50%">&nbsp;</td>
<td><a href="index.php"><img src="$stylevar[imgdir_misc]/homepage_nav.gif" border="0" alt="" /></a></td>
<if condition="$show['member']">
<td><a href="usercp.php"><img src="$stylevar[imgdir_misc]/youraccount_nav.gif" border="0" alt="" /></a></td>
</if>
<td><a href="memberlist.php"><img src="$stylevar[imgdir_misc]/memberlist_nav.gif" border="0" alt="" /></a></td>
<td><a href="calendar.php"><img src="$stylevar[imgdir_misc]/calendar_nav.gif" border="0" alt="" /></a></td>
<td><a href="search.php"><img src="$stylevar[imgdir_misc]/search_nav.gif" border="0" alt="" /></a></td>
<td id="usercptools"><a href="$show[nojs_link]#usercptools"><img src="$stylevar[imgdir_misc]/quicklinks_nav.gif" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("usercptools",true); </script></td>
<td><a href="faq.php"><img src="$stylevar[imgdir_misc]/faq_nav.gif" border="0" alt="" /></a></td>
<td width="50%">&nbsp;</td>
</tr>
</table>

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/extralinks.gif" border="0" alt="" /></td>
<td width="100%" style="padding-left:10px;">
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
<a href="#" class="sublink">Link Here</a>
</td>
</tr>
</table>

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/top-left.gif" border="0" alt="" /></td>
<td width="100%" style="background-image:url('blueevolution/misc/top-bg.gif'); background-repeat:repeat-x;"></td>
<td><img src="$stylevar[imgdir_misc]/top-right.gif" border="0" alt="" /></td>
</tr>
</table>

<!-- content table -->
$spacer_open

$_phpinclude_output
$ad_location[ad_header_end]



Try this, it should work.

[metalguitarist3]

Seven_Skins: That worked great thanks very much.

Next question is the header image, how would i go about making it the width of the screen?

Thanks in advance again.

[Mr-Moo]

I see what you did Seven, you added an extra TD in there and it shoved the data over, but in my eyes is that the 'proper' method in doing this? I am curious why none of the aligns properly function, could it be a CSS conflict?

I'm just curious :p

As for your question metalguitarist, you need to have an image the proper length to span across the page, but to size it properly, please revise your code to the following:


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%"><img src="$stylevar[imgdir_misc]/logo.gif" border="0" alt="Logo" width="100%" height="300" /></td>
<td align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
</td>
</tr>
</table>
<!-- /logo -->


This will make the Cell that the logo is in, and the logo 100% width of the Table. However, please keep in mind, your table width for that is determined by "$stylevar[outertablewidth]". If you want that to also span across your full page, change that to 100% also. Please keep in mind though, this may alter the display of the page since I have not looked at the CSS.

Test it out, let us know what it looks like.

[Seven Skins]

I see what you did Seven, you added an extra TD in there and it shoved the data over, but in my eyes is that the 'proper' method in doing this? I am curious why none of the aligns properly function, could it be a CSS conflict?

I'm just curious :p




There was a TD at the end with width=100% ... hence none of the center tag worked.
So amde another TD in front with 50% width and reduced the width of end TD to 50%.

.

[Mr-Moo]

Excellent, thank you Seven,

I appreciate you taking the time out to explain that to me. I will keep my eyes peeled for that in my own code in the future.

[metalguitarist3]

Hi guys. Just tested it our and it works great thanks very much. Put a temporary header in just now so theres something to look at lol. Obviously need to make it bigger in photoshop to get rid of those rough edges, but thats easy enough.

Thanks again.