Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Design and Graphics Discussions
Reload this Page Centre Header Nav Bar?
FAQ Members List Calendar Search Today's Posts Mark Forums Read
  #1  
Old 01-06-2009, 03:41 PM
Pt1994 Pt1994 is offline
 
Join Date: Jan 2009
Location: United Kingdom
Posts: 40
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Centre Header Nav Bar?
Ok at the moment i haev this code for centering my navbar in my eader

PHP Code:
<link rel=&#8221;shortcut icon” href=”/favicon.ico” mce_href=”/favicon.ico”/>
<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse">
    <tr>
        <td valign="top" width="80" style="background-image:url('images/ambient_lighting/misc/images/wrapper_l.png')">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td width="80" height="40" style="background-image:url('images/ambient_lighting/misc/images/topleft1.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topleft2.png')"></td>
            </tr>
            <tr>
                <td width="80" height="120" style="background-image:url('images/ambient_lighting/misc/images/topleft3.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topleft4.png')"></td>
            </tr>
            </table>
        </td>
        <td valign="top">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td width="420" height="40" style="background-image:url('images/ambient_lighting/misc/images/toplogo1.png')"></td>
                        <td height="40" style="background-image:url('images/ambient_lighting/misc/images/top1.png')">&nbsp;</td>
                        <td width="220" height="40" style="background-image:url('images/ambient_lighting/misc/images/toplogoright1.png')"></td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td width="420" style="background-image:url('images/ambient_lighting/misc/images/toplogo2.png')">
                        <div class="whitefont">
                        <script language="JavaScript" type="text/javascript">
var days = new Array(8);
days[1] = "Sunday";
days[2] = "Monday";
days[3] = "Tuesday";
days[4] = "Wednesday";
days[5] = "Thursday";
days[6] = "Friday";
days[7] = "Saturday";
var months = new Array(13);
months[1] = "January";
months[2] = "February";
months[3] = "March";
months[4] = "April";
months[5] = "May";
months[6] = "June";
months[7] = "July";
months[8] = "August";
months[9] = "September";
months[10] = "October";
months[11] = "November";
months[12] = "December";
var dateObj = new Date(document.lastModified)
var wday = days[dateObj.getDay() + 1]
var lmonth = months[dateObj.getMonth() + 1]
var date = dateObj.getDate()
var fyear =+ dateObj.getFullYear()
document.write(wday + ", " + date + " " + lmonth + " " + fyear)
</script>
                        </div>
                        </td>
                        <td style="background-image:url('images/ambient_lighting/misc/images/top2.png')">&nbsp;</td>
                        <td width="220" height="30" style="background-image:url('images/ambient_lighting/misc/images/toplogogright2.png')"></td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td width="10" height="120" style="background-image:url('images/ambient_lighting/misc/images/logoleft.png')"></td>
                        <td align="$stylevar[left]"  style="background-image:url('images/ambient_lighting/misc/images/headerbackground.png')"><a href="forum.php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
                        <td align="$stylevar[right]" id="header_right_cell" style="background-image:url('images/ambient_lighting/misc/images/headerbackground.png')"><if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if></td>
                        <td width="10" height="120" style="background-image:url('images/ambient_lighting/misc/images/logoright.png')"></td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr style="text-align: center">
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td align="center" width="25%" style="background-image:url('images/ambient_lighting/misc/images/menu_m.png')"><img src="$stylevar[imgdir_misc]/images/menu_l.png" alt="" width="10" height="30" align="right" /></td>
<div style="text-align:center;"> 
                        <!-- Home -->
                <td width="60" class="homelink" style="width:60px; cursor:hand;" onclick="window.location.href='$vboptions[homeurl]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="/">Home</a></td>
                        <!-- /Home -->

                        <!-- Forum -->
                        <td width="60" class="homelink" style="width:60px; cursor:hand;" onclick="window.location.href='forum.php$session[sessionurl_q]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="forum.php$session[sessionurl_q]">Forum</a></td>
                        <!-- /Forum -->

                        <!-- Member List -->
                        <td width="152" class="homelink" style="width:100px; cursor:hand;" onclick="window.location.href='memberlist.php$session[sessionurl_q]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>

                        <!-- /Member List -->

                        <!-- Calendar -->
                        <td width="124" class="homelink" style="width:70px; cursor:hand;" onclick="window.location.href='calendar.php$session[sessionurl_q]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>
                        <!-- /Calendar -->

                        <!-- Contact Us -->
                        <td width="138" class="homelink" style="width:80px; cursor:hand;" onclick="window.location.href='$vboptions[contactuslink]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="$vboptions[contactuslink]" rel="nofollow" accesskey="9">$vbphrase[contact_us]</a></td>
                        <!-- /Contact Us -->

                        <!-- Tournaments -->
                        <td width="90" class="homelink" style="width:90px; cursor:hand;" onclick="window.location.href='competitions.php';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="competitions.php" rel="nofollow" accesskey="9">Tournaments</a></td>
                        <!-- /Tournaments -->
</div>


                      <td width="12" align="left" style="background-image:url('images/ambient_lighting/misc/images/menu_b.png')"><img width="10" height="30" src="$stylevar[imgdir_misc]/images/menu_r.png" alt="" /></td>
                        <td width="25%" align="left" style="background-image:url('images/ambient_lighting/misc/images/menu_b.png')">&nbsp;</td>
                        <td align="center" width="8" style="background-image:url('images/ambient_lighting/misc/images/menu_b.png')"><img width="8" height="30" src="images/Legend/clear.gif" alt="" /></td>
                  </tr>
                </table>
              </td>
            </tr>
        </table>
    </td>
        <td valign="top" width="80" style="background-image:url('images/ambient_lighting/misc/images/wrapper_r.png')">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td width="80" height="40" style="background-image:url('images/ambient_lighting/misc/images/topright1.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topright2.png')"></td>
            </tr>
            <tr>
                <td width="80" height="120" style="background-image:url('images/ambient_lighting/misc/images/topright3.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topright4.png')"></td>
            </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td valign="top" width="80" style="background-image:url('images/ambient_lighting/misc/images/wrapper_l.png')">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td width="80" height="140" style="background-image:url('images/ambient_lighting/misc/images/topleft5.png')"></td>
            </tr>
            <tr>
                <td width="80" height="140" style="background-image:url('images/ambient_lighting/misc/images/topleft6.png')"></td>
            </tr>
        </table>
        </td>
        <td valign="top" bgcolor="#141414">
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end] 
The only problem is if i add a new link after tournaments the actual space all the links occupy dosen't change according to the size of the column the link is in and they all get squashed inside this gap

Really need help making this central please help!

i tried changing the 25% to 100% hoping it would just fill available space and make sure the static figures still fit but it just mashed it all at the right side!

This is my new code

PHP Code:
<link rel=&#8221;shortcut icon” href=”/favicon.ico” mce_href=”/favicon.ico”/>
<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse">
    <tr>
        <td valign="top" width="80" style="background-image:url('images/ambient_lighting/misc/images/wrapper_l.png')">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td width="80" height="40" style="background-image:url('images/ambient_lighting/misc/images/topleft1.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topleft2.png')"></td>
            </tr>
            <tr>
                <td width="80" height="120" style="background-image:url('images/ambient_lighting/misc/images/topleft3.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topleft4.png')"></td>
            </tr>
            </table>
        </td>
        <td valign="top">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td width="420" height="40" style="background-image:url('images/ambient_lighting/misc/images/toplogo1.png')"></td>
                        <td height="40" style="background-image:url('images/ambient_lighting/misc/images/top1.png')">&nbsp;</td>
                        <td width="220" height="40" style="background-image:url('images/ambient_lighting/misc/images/toplogoright1.png')"></td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td width="420" style="background-image:url('images/ambient_lighting/misc/images/toplogo2.png')">
                        <div class="whitefont">
                        <script language="JavaScript" type="text/javascript">
var days = new Array(8);
days[1] = "Sunday";
days[2] = "Monday";
days[3] = "Tuesday";
days[4] = "Wednesday";
days[5] = "Thursday";
days[6] = "Friday";
days[7] = "Saturday";
var months = new Array(13);
months[1] = "January";
months[2] = "February";
months[3] = "March";
months[4] = "April";
months[5] = "May";
months[6] = "June";
months[7] = "July";
months[8] = "August";
months[9] = "September";
months[10] = "October";
months[11] = "November";
months[12] = "December";
var dateObj = new Date(document.lastModified)
var wday = days[dateObj.getDay() + 1]
var lmonth = months[dateObj.getMonth() + 1]
var date = dateObj.getDate()
var fyear =+ dateObj.getFullYear()
document.write(wday + ", " + date + " " + lmonth + " " + fyear)
</script>
                        </div>
                        </td>
                        <td style="background-image:url('images/ambient_lighting/misc/images/top2.png')">&nbsp;</td>
                        <td width="220" height="30" style="background-image:url('images/ambient_lighting/misc/images/toplogogright2.png')"></td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr>
                        <td width="10" height="120" style="background-image:url('images/ambient_lighting/misc/images/logoleft.png')"></td>
                      <td align="$stylevar[left]"  style="background-image:url('images/ambient_lighting/misc/images/headerbackground.png')"><a href="forum.php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
                        <td align="$stylevar[right]" id="header_right_cell" style="background-image:url('images/ambient_lighting/misc/images/headerbackground.png'); text-align: right;"><if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if></td>
                        <td width="10" height="120" style="background-image:url('images/ambient_lighting/misc/images/logoright.png')"></td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr style="text-align: center">
                <td>
                <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
                    <tr align="center">
                        <td align="center" width="10" style="background-image:url('images/ambient_lighting/misc/images/menu_m.png')"><img src="$stylevar[imgdir_misc]/images/menu_l.png" alt="" width="10" height="30" align="right" /></td>
<div style="text-align:center;"> 
                        <!-- Home -->
                <td width="60" class="homelink" style="width:60px; cursor:hand;" onclick="window.location.href='$vboptions[homeurl]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="/">Home</a></td>
                        <!-- /Home -->

                        <!-- Forum -->
                        <td width="60" class="homelink" style="width:60px; cursor:hand;" onclick="window.location.href='forum.php$session[sessionurl_q]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="forum.php$session[sessionurl_q]">Forum</a></td>
                        <!-- /Forum -->

                        <!-- Member List -->
                        <td width="152" class="homelink" style="width:100px; cursor:hand;" onclick="window.location.href='memberlist.php$session[sessionurl_q]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>

                        <!-- /Member List -->

                        <!-- Calendar -->
                        <td width="124" class="homelink" style="width:70px; cursor:hand;" onclick="window.location.href='calendar.php$session[sessionurl_q]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>
                        <!-- /Calendar -->

                        <!-- Contact Us -->
                        <td width="138" class="homelink" style="width:80px; cursor:hand;" onclick="window.location.href='$vboptions[contactuslink]';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="$vboptions[contactuslink]" rel="nofollow" accesskey="9">$vbphrase[contact_us]</a></td>
                        <!-- /Contact Us -->

                        <!-- Tournaments -->
                        <td width="90" class="homelink" style="width:90px; cursor:hand;" onclick="window.location.href='competitions.php';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="competitions.php" rel="nofollow" accesskey="9">Tournaments</a></td>
                        <!-- /Tournaments -->

                        <!-- Shop -->
                        <td width="69" class="homelink" style="width:90px; cursor:hand;" onclick="window.location.href='http://www.cafepress.com/xeon_gaming';" onmouseover="this.className='homehover';" onmouseout="this.className='homelink';"><a href="http://www.cafepress.com/xeon_gaming" rel="nofollow" accesskey="9">Shop</a></td>
                        <!-- /Shop -->
</div>


                      <td width="10" align="left" style="background-image:url('images/ambient_lighting/misc/images/menu_b.png')"><img width="10" height="30" src="$stylevar[imgdir_misc]/images/menu_r.png" alt="" /></td>
                  </tr>
                </table>
              </td>
            </tr>
        </table>
    </td>
        <td valign="top" width="80" style="background-image:url('images/ambient_lighting/misc/images/wrapper_r.png')">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td width="80" height="40" style="background-image:url('images/ambient_lighting/misc/images/topright1.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topright2.png')"></td>
            </tr>
            <tr>
                <td width="80" height="120" style="background-image:url('images/ambient_lighting/misc/images/topright3.png')"></td>
            </tr>
            <tr>
                <td width="80" height="30" style="background-image:url('images/ambient_lighting/misc/images/topright4.png')"></td>
            </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td valign="top" width="80" style="background-image:url('images/ambient_lighting/misc/images/wrapper_l.png')">
        <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
            <tr>
                <td width="80" height="140" style="background-image:url('images/ambient_lighting/misc/images/topleft5.png')"></td>
            </tr>
            <tr>
                <td width="80" height="140" style="background-image:url('images/ambient_lighting/misc/images/topleft6.png')"></td>
            </tr>
        </table>
        </td>
        <td valign="top" bgcolor="#141414">
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end] 
only problem is the buttons fill all the space and dont nicely sit in the middle
Reply With Quote
  #2  
Old 01-07-2009, 05:19 PM
Bellardia Bellardia is offline
 
Join Date: Jul 2007
Location: Hamilton, Ontario
Posts: 378
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Add up the width of all the <td> elements in the table, and set the table width to that amount.
Then set the table inside another element (div or another table even) with width of 100% and center its contents.
Reply With Quote
Reply

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

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 07:55 PM.

Contact Us - Archive - Top

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.03827 seconds
  • Memory Usage 2,427KB
  • Queries Executed 11 (?)
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
  • (2)bbcode_php
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (2)post_thanks_box
  • (2)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit_info
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)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_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_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete