Header Width 100% Body Width Fixed

[netpants]

Ok, So I have been all over these forums and google looking for a solution, and while there have been many soltuions that have worked for many none of them worked for me. I have changed the header to match the header of a new site design we are working on, but the header needs to be the width of the browser not a fixed width. Here is the code for my header files.

headinclude (i added a line to the bottom of this to include the style sheet for my header, is that the problem?)

<meta http-equiv="Content-Type" content="text/html; charset={vb:stylevar charset}" />
<meta id="e_vb_meta_bburl" name="vb_meta_bburl" content="{vb:raw vboptions.bburl}" />
<base href="{vb:raw basepath}" /><!--[if IE]></base><![endif]-->
<meta name="generator" content="vBulletin {vb:raw vboptions.templateversion}" />

<vb:if condition="$show['threadinfo']">

<vb:elseif condition="$show['foruminfo']" />
		<meta name="keywords" content="{vb:raw foruminfo.title_clean}, {vb:raw vboptions.keywords}" />
		<meta name="description" content="<vb:if condition="$pagenumber > 1">{vb:rawphrase page_x, {vb:raw pagenumber}}-</vb:if>{vb:raw foruminfo.description_clean}" />
<vb:else />
		<meta name="keywords" content="{vb:raw vboptions.keywords}" />
		<meta name="description" content="{vb:raw vboptions.description}" />
</vb:if>

<vb:if condition="$show['fb_opengraph']">
	{vb:raw facebook_opengraph}
</vb:if>

<script type="text/javascript" src="{vb:stylevar yuipath}/yuiloader-dom-event/yuiloader-dom-event.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript" src="{vb:stylevar yuipath}/connection/connection-min.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
<!--
	var SESSIONURL = "{vb:raw session.sessionurl_js}";
	var SECURITYTOKEN = "{vb:raw bbuserinfo.securitytoken}";
	var IMGDIR_MISC = "{vb:stylevar imgdir_misc}";
	var IMGDIR_BUTTON = "{vb:stylevar imgdir_button}";
	var vb_disable_ajax = parseInt("{vb:raw vboptions.disable_ajax}", 10);
	var SIMPLEVERSION = "{vb:raw vboptions.simpleversion}";
	var BBURL = "{vb:raw vboptions.bburl}";
	var LOGGEDIN = {vb:raw bbuserinfo.userid} > 0 ? true : false;
	var THIS_SCRIPT = "{vb:raw this_script}";
        var RELPATH = "{vb:raw relpath}";
        var PATHS = {forum : "{vb:raw vboptions.vbforum_url}"}
// -->
</script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/vbulletin-core.js?v={vb:raw vboptions.simpleversion}"></script>
{vb:raw template_hook.headinclude_javascript}

<vb:if condition="$vboptions['externalrss']">
	<link rel="alternate" type="application/rss+xml" title="{vb:raw vboptions.bbtitle} {vb:rawphrase rss_feed}" href="{vb:raw vboptions.bburl}/external.php?type=RSS2" />
	<vb:if condition="$show['foruminfo'] OR $show['threadinfo']">
		<link rel="alternate" type="application/rss+xml" title="{vb:raw vboptions.bbtitle} - {vb:raw foruminfo.title_clean} - {vb:rawphrase rss_feed}" href="{vb:raw vboptions.bburl}/external.php?type=RSS2&amp;forumids={vb:raw foruminfo.forumid}" />
	</vb:if>
</vb:if>

<vb:if condition="$vboptions['storecssasfile']">
	{vb:cssfile main-rollup.css}
        {vb:raw template_hook.custom_css_links}
<vb:else />
	{vb:cssfile bbcode.css,editor.css,popupmenu.css,reset-fonts.css,vbulletin.css,vbulletin-chrome.css,vbulletin-formcontrols.css{vb:raw template_hook.custom_css_list}}
</vb:if>
	<!--[if lt IE 8]>
	{vb:cssfile popupmenu-ie.css,vbulletin-ie.css,vbulletin-chrome-ie.css,vbulletin-formcontrols-ie.css,editor-ie.css}
	<![endif]-->
{vb:raw template_hook.headinclude_css}
<link rel="stylesheet" type="text/css" href="http://www.freefrag.com/anewsiteC/styleforum.css">

header

<div id="headertop">
<table class="center" width="960" height="82" border="0">
<tr>
<td width="60%"><img src="http://www.freefrag.com/anewsiteC/images/logo.png" alt="Free Frag Network Logo"></td>
<td align="left" valign="middle" width="40%">


<div id="toplinks" class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
					</ul>
				</li>
				</vb:if>
				<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
            {vb:raw template_hook.header_userinfo}
			<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
		<vb:else />
			<ul class="nouser">
			<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
			</vb:if>
				<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
				<li>
			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
			<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
				<fieldset id="logindetails" class="logindetails">
					<div>
						<div>
					<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
					<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
					<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
					<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
						</div>
					</div>
				</fieldset>
				<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
				</div>

				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="login" />
				<input type="hidden" name="vb_login_md5password" />
				<input type="hidden" name="vb_login_md5password_utf" />
			</form>
			<script type="text/javascript">
			YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
			YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
			vB_XHTML_Ready.subscribe(function()
			{
			//
				YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
				YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
				YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
				YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
			});
			
			function navbar_username_focus(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
				{
				//
					textbox.value='';
					textbox.style.color='{vb:stylevar toplinks_form_input.color}';
				}
			}

			function navbar_username_blur(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '')
				{
				//
					textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
					textbox.style.color='{vb:stylevar toplinks_form_input_defaultValue.color}';
				}
			}
			
			function navbar_password_hint(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
				YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
				YAHOO.util.Dom.get('navbar_password').focus();
			}

			function navbar_password(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				if (textbox.value == '')
				{
					YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
					YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
				}
			}
			</script>
				</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
		</vb:if>
	</div>

  </td></tr>
</table>
</div>
<div id="headerbottom">
<table class="center" width="960" height="43" border="0">
<tr>
<td align="left" valign="bottom" witdh="75%">

<!--<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>-->
<ul id="jsddm">
    <li><a href="#">Home</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Server Perks</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Server Related</a>
	<ul>
            <li><a href="#">Server Rules</a></li>
            <li><a href="#">Protest a Ban</a></li>
            <li><a href="#">Server Status</a></li>
            <li><a href="#">Ban List</a></li>
            <li><a href="#">Admin List</a></li>
        </ul>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Help</a></li>
	<li><a href="#">Unread Posts</a>
	<ul>
            <li><a href="#">New Posts</a></li>
            <li><a href="#">New Group Messages</a></li>
            <li><a href="#">New Events</a></li>
            <li><a href="#">New Articles</a></li>
            <li><a href="#">New Blog Entries</a></li>
        </ul>
	</ul>
</td>
<td align="right" valign="bottom" width="25%">Social Networks</td>
</tr>
</table>

</div>

Help would be appreciated.

Things I have tried.
- Stylevar doc_width right:0 left:0 and .body_wrapper added margin-left: 75% margin-right:75%;

[Lynne]

Can we get a link to the actual style and an image of what you want it to look like.

[netpants]

Sure,

The site: removed
- notice the header is the full width of the browser but the body is fixed. This is what I am trying to do in vB as well.

Here is the style sheet for my header.

 .login a:link { 
text-decoration: none;
color: #000000;
}

.login a:hover{ 
text-decoration: underline;
color: #9E3C00;
}

.login a:visited{ 
text-decoration: underline;
color: #000000;
}
 
a.news:link {
text-decoration: none;
color: #CC4700;
}
a.news:visited {
text-decoration: none;
color: #CC4700;
}
a.news:active {
text-decoration: none;
}
a.news:hover {
text-decoration: underline; 
color: red;
}

#headertop {
position: relative;
height: 83px;
width: 100%;
background-color: #242424;
vertical-align:text-bottom;
background-image:url(images/header_top.png);
}

#headerbottom {
position: relative;
height: 42px;
width: 100%;
color: #B03C00;
font-weight: bold;
background-color: #121212;
background-image:url(images/header_bottom.png);
}


#jsddm
{	margin: 0;
	padding: 0;
	}
	
	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial;
		font-weight: bold;
		
		}

	#jsddm li a
	{	display: block;
		
		padding: 10px 12px;
		text-decoration: none;
		
		width: auto;
		color: #000000;
		white-space: nowrap;
		z-index: 1;
		}
		

	#jsddm li a:hover
	{	background: #B03C00;
	z-index: 1;
	}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			
			z-index: 1;
			}
		
		#jsddm li ul li
		{	float: none;
			display: inline;
			z-index: 1;
			}
		
		#jsddm li ul li a
		{	width: auto;
			background: #9F1B1B;
			z-index: 1;
			}
		
		#jsddm li ul li a:hover
		{	background: #7F1616;
		z-index: 1;
		}

And the forum that I am trying to fix is here: removed

[Lynne]

You need to set the margin for your body to 0:
body {margin: 0;}
(I think that is the stylevar doc_margin)

Then you need to set a margin for .body_wrapper
.body_wrapper {margin: 0 50px;}

Those are the basics and then style as needed.

[netpants]

I get this when doing that url removed . and modifying the body wrapper just makes the bottom part of the page get wider smaller, etc. I guess is there a way to get the header outside of the body wrapper so its not confined to the width set in the forum.

[YankForum]

you need to define "above_body" and "body_wrapper" seperately but rite now this doesn't work for you because earlier in your CSS you have defined this :

body {
margin: 0px 35px 0px 35px;
....
}

remove that and add fixed width to body_wrapper just like:

.body_wrapper {
width:900px; //or any other value
//and center it
}

and you should be done , but if header is not 100% then edit this above-body and define width:100%

[netpants]

Ok this is what I did in vbulletin.css, and the changes it made are little to none.

body {
	width: 100%;
	min-width:{vb:stylevar doc_minWidth};
	max-width:{vb:stylevar doc_maxWidth};
	font-size:{vb:stylevar font.fontSize}px;
	color:{vb:stylevar body_color};
	line-height:{vb:stylevar line_height};
}

.body_wrapper {
	padding: {vb:stylevar body_padding};
	background: {vb:stylevar body_background};
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius};
        width:960px;
        margin-left: 50%;
        margin-right: 50%;
        
}

[Lynne]

Regarding body.... you said you wanted this at 100%, so don't give it a min or max width. Set the width to 100%.

Regarding .body_wrapper:

        margin-left: 50%;
         margin-right: 50%;

What are you hoping to accomplish by making each margin 50% wide? That kinda uses up the whole page. (50% left and 50% right leaves nothing in the middle if added up.) If you have a fixed width, then the left and right margin need to be set to auto, not any number.

[netpants]

We are getting closer but now I need to get the body center. removed url

This is my css now.

body {
	margin: 0;
        width: 100%;
	font-size:{vb:stylevar font.fontSize}px;
	color:{vb:stylevar body_color};
	line-height:{vb:stylevar line_height};
}

body a {
	color:{vb:stylevar link_color};
	text-decoration:{vb:stylevar link_textDecoration};
}
body a:hover,
body a:hover .time,
body a:hover .shade,
body a:hover .understate {
	color:{vb:stylevar linkhover_color};
	text-decoration:{vb:stylevar linkhover_textDecoration};
}

body a.understate,
body a .understate {
	color:inherit;
	text-decoration:none;
	*clear:expression(style.color = parentNode.currentStyle.color, style.clear = "none", 0);
}

.body_wrapper {
	padding: {vb:stylevar body_padding};
	background: {vb:stylevar body_background};
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius};
        width:960px;
        margin-left: auto;
        margin-right: auto;
}

You never really understand how massive VB is until you start trying to customize things. Geeze.

[Lynne]

Your other CSS is overriding your custom stuff above. Make this change:

        margin-left: auto !important;
         margin-right: auto !important;