Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    centering header in vbulletin

    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

    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 />&nbsp;</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;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •