...

View Full Version : centering header in vbulletin



wezzeh
09-11-2011, 02:23 AM
hello everyone, I'm quite new at the whole css and coding stuff and I've encountered a problem with my vbulletin forums.

on my resolution(1024/768) everything looks as intended, no problems what so ever, but on widescreen monitors part of my header is moved to the left. it also happens if I zoom out from my browser.

this is how it looks on my resolution:
http://i55.tinypic.com/2uh01m0.png


this is how it looks when you zoom out/widescreen monitor
http://i55.tinypic.com/eiq2d.png



<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]">
<div id="hon_header" style="position: relative; height: 295px; width: 100%; text-align: center;">
<div style="position: relative; width: 1000px; margin: 0 auto; height: 84px;">

<img src="http://g-gaming.ge/forum/images/sh_1.png" width="165" height="84" style="float: left;">
<img src="http://g-gaming.ge/forum/images/sh_2.jpg" width="585" height="84" style="float: left;">
<img src="http://g-gaming.ge/forum/images/sh_3.png" width="250" height="84" style="float: left;">
</div>
<div style="position: relative; width: 1000px; margin: 0 auto; height: 82px;">
<div style="position: relative; width: 100%; height: 73px; margin: 0;"><img src="http://g-gaming.ge/forum/images/sh_4.jpg" width="1000" height="73"></div>
<div style="position: relative; width: 100%; height: 9px; margin: 0;"><img src="http://g-gaming.ge/forum/images/sh_v2_1.png" width="1000" height="9"></div>
</div>
<div style="position: relative; width: 100%; height: 76px; margin: 0 auto;">
<img src="http://g-gaming.ge/forum/images/sh_v2_men1.png" style="width: 9px; height: 76px; float: left;">
<a href="http://www.g-gaming.ge/download/HoNClient-2.1.8.exe" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_download"><div style="padding-top: 61px; font-size: 10px;">Download</div></div></a>
<a href="http://www.g-gaming.ge/forum/forumdisplay.php?f=5" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_media"><div style="padding-top: 61px; font-size: 10px;">Media</div></div></a>
<a href="http://www.g-gaming.ge/forum/forumdisplay.php?f=8" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_tourney"><div style="padding-top: 61px; font-size: 10px;">Tournaments</div></div></a>

<a href="http://www.g-gaming.ge/forum/forumdisplay.php?f=7" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_replays"><div style="padding-top: 61px; font-size: 10px;">Replays</div></div></a>
<a href="http://www.g-gaming.ge/forum/" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_forum"><div style="padding-top: 61px; font-size: 10px;">Forums</div></div></a>
<a href="http://www.heroesofnewerth.com/players/" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_players"><div style="padding-top: 61px; font-size: 10px;">Player Ladder</div></div></a>
<a href="http://www.g-gaming.ge/forum/misc.php?do=cybareginv" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_referral"><div style="padding-top: 61px; font-size: 10px;">Refer A Friend</div></div></a>
<a href="http://www.heroesofnewerth.com/heroes.php" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_heroes"><div style="padding-top: 61px; font-size: 10px;">Heroes</div></div></a>
<a href="http://www.heroesofnewerth.com/items.php" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_items"><div style="padding-top: 61px; font-size: 10px;">Items</div></div></a>
<a href="http://www.g-gaming.ge/forum/forumdisplay.php?f=9" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_guides"><div style="padding-top: 61px; font-size: 10px;">Guides</div></div></a>
<a href="http://www.g-gaming.ge/forum/usercp.php" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_support"><div style="padding-top: 61px; font-size: 10px;">Account</div></div></a>
<a href="https://www.heroesofnewerth.com/purchase.php" style="float: left; display:block; height: 100%; color: white; text-decoration: none; cursor: pointer;"><div class="sh_v3_btn" id="sh_v3_shop"><div style="padding-top: 61px; font-size: 10px;">Buy Coins</div></div></a>
<img src="http://g-gaming.ge/forum/images/sh_v2_men2.png" style="width: 10px; height: 76px; float: left;">
<img src="http://g-gaming.ge/forum/images/sh_v2_mencenter.png" style="position: absolute; z-index: 999; top: 0; left: 483px; width: 46px; height: 32px;">

</div>
<div style="position: relative; width: 100%; height: 53px;">
<img src="http://www.heroesofnewerth.com/images/sh_v2_3.gif" width="483" height="53" style="float: left;">
<div class="submenclose_v2" style="float: left;" ><a href="http://www.g-gaming.ge"></a></div>
<div style="float: left; background: url(http://www.heroesofnewerth.com/images/sh_v2_4.gif); width: 481px; height: 53px; text-align: left;">
<div style="margin: 14px 0 0 255px;">
<a href="https://www.facebook.com/pages/Georgian-Gaming/263626656991460" target="_blank"><img src="http://www.heroesofnewerth.com/images/sm_facebook.gif" style="width: 24px; height: 24px; margin: 0 5px 0 0;" border="0"></a>

<a href="http://www.heroesofnewerth.com/partners.php"><img src="http://www.heroesofnewerth.com/images/sm_partners.gif" style="width: 110px; height: 24px; margin: 0 0 0 0;" border="0"></a>
</div>
</div>
</div></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 -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]


and the #hon_header



#hon_header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 177px;
background: url("http://g-gaming.ge/forum/images/header_repeat.gif");
background-repeat: repeat-x;
}

vikram1vicky
09-11-2011, 11:35 AM
Why are you using table for layout??? visit following link to know why should not we use tables for layout

http://www.hotdesign.com/seybold/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum