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 :D 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;

[netpants]

Great News ! It worked . Thanks for figuring this out for me folks. I just have one more issue though. I need the navigation menu buttons centered, and the search box moved back to the left as it was before. Once that is done I think I could probably manage to get the user information in the top right straightened out.

[YankForum]

which browser are you using ? chrome has it by default but if u r using Mozilla try installing this plugin : firebug
then u r a pro designer with this tool

[netpants]

Oh yea I have firebug and it is quite useful, and I can get the layout semi correct in firebug. I guess the problem I am having is finding the correct things to edit inside of VB. I know I have to set a width on navbar, and margin left and right set to auto. This will center the top bar. Same thing with the links that show up under the navbar. But when searching in templates I cannot really find the correct css sheet to edit.

[Lynne]

Grab the class on the right side of firebug that you edited and then just do a Search in Templates for it and you will find it and see the stylevars.

[Angle4cor]

Does anyobody here know how to made that navbar fixed?

I used the code for fluid header and it works but now I cant set the size for the navbar. I checked that firebug but it didnt help me.

Any help will be greatly appreciate.