vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   Centre Header Nav Bar? (https://vborg.vbsupport.ru/showthread.php?t=200875)

Pt1994 01-06-2009 03:41 PM
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

Bellardia 01-07-2009 05:19 PM
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.


All times are GMT. The time now is 09:58 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01576 seconds
  • Memory Usage 2,036KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_php_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (2)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete