Tweet
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:
this is how it looks when you zoom out/widescreen monitor
and the #hon_header
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:
this is how it looks when you zoom out/widescreen monitor
Code:
<!-- 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 /> </if> </td> </tr> </table> <!-- /logo --> <!-- content table --> $spacer_open $_phpinclude_output $ad_location[ad_header_end]
and the #hon_header
Code:
#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;
}
Comment