vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   Header Width 100% Body Width Fixed (https://vborg.vbsupport.ru/showthread.php?t=262084)

netpants 04-16-2011 02:52 AM
Header Width 100% Body Width Fixed
 
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?)
Code:
<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
Code:
<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 04-16-2011 02:57 AM
Can we get a link to the actual style and an image of what you want it to look like.

netpants 04-16-2011 03:05 AM
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.

Code:
.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 04-16-2011 05:08 PM
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 04-16-2011 05:24 PM
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 04-16-2011 06:19 PM
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 :
Code:
body {
margin: 0px 35px 0px 35px;
....
}
remove that and add fixed width to body_wrapper just like:

Code:
.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 04-16-2011 07:18 PM
Ok this is what I did in vbulletin.css, and the changes it made are little to none.

Code:
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 04-16-2011 08:07 PM
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:
HTML Code:
        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 04-16-2011 08:21 PM
We are getting closer :D but now I need to get the body center. removed url

This is my css now.

Code:
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 04-16-2011 08:46 PM
Your other CSS is overriding your custom stuff above. Make this change:
HTML Code:
        margin-left: auto !important;
        margin-right: auto !important;


All times are GMT. The time now is 11:17 AM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01229 seconds
  • Memory Usage 1,857KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (7)bbcode_code_printable
  • (2)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete