vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   Keeping Header Centered / Static (https://vborg.vbsupport.ru/showthread.php?t=255759)

qubed 12-23-2010 11:04 AM
Keeping Header Centered / Static
 
Hi Everyone -

I am a bit of a novice in regards to knowing how to do this, however, how do I go about having a static / centered header on my forum. The current size and width of my image is 420x184 and I am trying to center it and have it adjust to the width and stay centered no matter the width a user may have their browser sized to.

Is there a way to do this? My current code in my header is as follows and I do not know what I need to adjust if this is even the right place to do so:

HTML Code:
<a name="top"></a>

<div id="wrapper" style="width:$stylevar[outertablewidth];">

<!-- adding your own banner to template Ad Header Logo will cause the banner to display, but be sure to assign it the class "topBanner" so that it floats right and displays properly -->

<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]</if>

<!-- here we set up your Board's title as the main deading and then swap in the logo image with CSS -->

<h1 id="logo"><a href="$vboptions[forumhome].php$session[sessionurl_q]" title="$vboptions[bbtitle]">$vboptions[bbtitle]</a></h1>

<!-- nav buttons bar -->

<ul id="navi">
                <if condition="$show['member']">
                        <li><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></li>
                </if>
                <if condition="$show['registerbutton']">
                        <li><a href="register.php$session[sessionurl_q]" rel="nofollow" style="color:#FFFFFF;">$vbphrase[register]</a></li>
                </if>
                $template_hook[navbar_buttons_left]
                <li><a href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></li>
                <if condition="$show['communitylink'] AND $show['popups']">
                        <li><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <script type="text/javascript"> vbmenu_register("community", true); </script></li>
                <else />
                        <if condition="$vboptions['enablememberlist']">
                                <li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li>
                        </if>
                        <if condition="$show['quick_links_groups']">
                                <li><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></li>
                        </if>
                </if>
                <li><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></li>
                <if condition="$show['popups']">
                        <if condition="$show['searchbuttons']">
                                <if condition="$show['member']">
                                <li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li>
                                <else />
                                <li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
                                </if>
                                <li id="navbar_search"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search", true); </script></if></li>
                        </if>
                        <if condition="$show['member']">
                                <li id="usercptools"><a href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools", true); </script></li>
                        </if>
                <else />
                        <if condition="$show['searchbuttons']">
                                <li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li>
                                <if condition="$show['member']">
                                <li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li>
                                <else />
                                <li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
                                </if>
                        </if>
                        <li><a href="forumdisplay.php?$session[sessionurl]do=markread&amp;markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></li>
                        <if condition="$show['member']">
                                <li><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></li>
                        </if>
                </if>
                $template_hook[navbar_buttons_right]
                <if condition="$show['member']">
                        <li><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></li>
                </if>
</ul>
<div class="clear"></div>
<!-- / nav buttons bar -->

<div id="rounded-wrap">
<div id="rounded-top"><span></span></div>

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]
Thanks in advance for the assistance. Please let me know if additional clarity is required.

qubed

Lynne 12-23-2010 02:43 PM
If would be easier if we could see a link to the page with the banner.

Is your banner the stuff int eh <h1> tags? And do you have css set to text-align: center #logo? What css do you have written for #logo.

qubed 12-23-2010 06:56 PM
Thanks for the response - I am running a custom skin from forummonkeys.com

HTML Code:
The site is http://pilo.me
I believe the css for the logo is this, I pulled it from the "additional css" from the style manager

HTML Code:
div#wrapper {
        margin: auto;
        min-width:790px;
}

h1#logo, h1#logo a {
        width: 1360px;
        height: 175px;
        margin-top:7px;
}

h1#logo {
        margin:  0px;
        padding: 8px 0px 2px 0px;
        height: 197px;
}

img {
      border:0;
}

h1#logo a {
        display: block;
        text-indent: -5000px;
        background: url(images/genesis/misc/logo.jpg) no-repeat center;
}

.topBanner {
      float:center;
      margin-top:20px;
      border:2px solid #fff;
}

ul#navi {
        margin: 0px 0px 25px 0px;
        padding: 7px 0px 0px 0px;
        text-align: center;
        height: 28px;
        list-style-type: none;
        float:left;
}

ul#navi li {
        display: block;
        float:left;
        height:28px;
}

ul#navi li a:link, ul#navi li a:hover, ul#navi li a:visited {
        color: #CCFF00;
        font-size: 14px;
        font-family: "Trebuchet MS", helvetica, arial, verdana, sans-serif;
        text-decoration: none;
        display:block;
        padding: 3px 10px 3px 10px;
        height:22px;
        float:left;
}

ul#navi li a:hover {
        color: #c0c0c0;
        background-color:#535353;
}

div#rounded-wrap {
        background: #FFFFFF url(images/genesis/gradients/gradient_rounded.gif) repeat-x top left;
        border: 2px solid #FFFFFF;
        border-width: 0px 2px;
        padding: 5px 16px;

}

div#rounded-top {
        background: transparent url(images/genesis/misc/top-left.gif) no-repeat top left;
        position: relative;
        top: -5px;
        left: -18px;
}

div#rounded-top span, div#rounded-bottom span {
        display: block;
        height: 11px;
        position: relative;
        left: 36px;
}

div#rounded-top span {
        background: transparent url(images/genesis/misc/top-right.gif) no-repeat top right;
}

div#rounded-bottom {
        background: transparent url(images/genesis/misc/bottom-left.gif) no-repeat top left;
        position: relative;
        top: 5px;
        left: -18px;
}

div#rounded-bottom span {
        background: transparent url(images/genesis/misc/bottom-right.gif) no-repeat top right;
}

.nopad {
        padding: 0px;
}

div#footer-text {
        font-size: 10px;
        margin-top: 15px;
        text-align: center;
}

div#footer {
        padding: 15px 0px;
}

div#footer ul {
        list-style-type: none;
        float: right;
        display: inline;
        padding: 0px;
        margin: 0px;
}

div#footer ul li {
        display: inline;
        margin-right: 10px;
}

div#footer ul li a:link, div#footer ul li a:visited {
        font-weight: bold;
        text-decoration: none;
        color: #CCFF00;
        font-size: 12px;
}

div#footer ul li a:hover {
        font-weight: bold;
        text-decoration: none;
        color: #fff;
        font-size: 12px;
}

.altclass {
        border-top: 1px solid #d5d5d5;
}

#collapseobj_forumhome_legend .alt2 {
        color: #a31900;
}

div#navbsr {
        color: #111;
        font-size: 12px;
}

div#navbsr a:link, div#navbsr a:visited {
        color: #555;
        font-weight:bold;
        text-decoration: none;
        border-bottom: 1px dashed #555;
}

div#navbsr a:hover {
        color: #111;
        text-decoration: none;
        border-bottom: 1px dashed #f2ab1a;
}

div#navbsr .left {
        margin-right: 345px;
        padding: 15px 0px 0px 15px;
}

div#navbsr .left span.last {
        font-weight: bold;
}

div#navbsr .leftin {
        padding-top: 28px;
        margin-right: 275px;
}

div#navbsr .right {
        float: right;
        padding: 15px 5px 0px 0px;
        width: 275px;       
}

div#navbsr .rightout {
        padding: 5px 5px 0px 0px;
        width: 360px;
}

div#navbsr .rightout form {
        padding: 0px;
}

div#navbsr .rightout div {
        float: left;
        width: 142px;
        height: 23px;
        background: url(images/genesis/misc/input.gif) no-repeat top left;
        padding: 8px 0px 0px 8px;
        margin-left: 5px;
}

div#navbsr .rightout div input {
        border: 0px;
        padding: 0px;
        background: transparent;
        font-size: 12px;
        font-weight: bold;
        color: #111;
        vertical-align: middle;
}

div#navbsr .rightout label {
        display: none;
}

div#navbsr .rightout .submit {
        float: left;
        padding: 8px 0px 0px 5px;
}

div.clearit {
        clear: both;
        margin-top: 15px;
}

.clear {
        clear:both;
}


div.acat {
        background: #373637 url(images/genesis/gradients/gradient_tcat.gif) repeat-x top left;
        padding: 0px;
        margin: 0px 1px;
}

div.acat div.left {
        background: transparent url(images/genesis/misc/tcat_left.gif) no-repeat top left;
}

div.acat div.right {
        background: transparent url(images/genesis/misc/tcat_right.gif) no-repeat top right;
        padding: 8px 8px 8px 15px;
}

div.acat div.right .fright a {
        margin-right: 10px;
}

.fright {
        float: right;
}

.notop {
        border-top-width: 0px;
}

td.smallpage {
        font-size: 12px;
        font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

fieldset { border: 1px solid #d5d5d5; }

#cb_cookieuser_navbar {
        margin-top:9px;
}:

Lynne 12-23-2010 08:45 PM
You have the wdith set to 1360px. It *is* centered in that width. Remove that width.

qubed 12-24-2010 02:32 PM
Thanks for the response. In regards to the 1360px, if I do not have the width set to that, the logo will not appear centered whatsoever.

I have since changed the width to 355px (which is what the image width is) and it now sits flush on the left as it can be seen on my site currently this way.

Here is the change I made:

HTML Code:
div#wrapper {
        margin: auto;
        min-width:790px;
}

h1#logo, h1#logo a {
        width: 355px;
        height: 175px;
        margin-top:7px;
}

h1#logo {
        margin:  0px;
        padding: 8px 0px 2px 0px;
        height: 197px;
}

img {
      border:0;
}

h1#logo a {
        display: block;
        text-indent: -5000px;
        background: url(images/genesis/misc/logo.jpg) no-repeat center;
}

.topBanner {
      float:center;
      margin-top:20px;
      border:2px solid #fff;
}

ul#navi {
        margin: 0px 0px 25px 0px;
        padding: 7px 0px 0px 0px;
        text-align: center;
        height: 28px;
        list-style-type: none;
        float:left;
}

ul#navi li {
        display: block;
        float:left;
        height:28px;
}

ul#navi li a:link, ul#navi li a:hover, ul#navi li a:visited {
        color: #CCFF00;
        font-size: 14px;
        font-family: "Trebuchet MS", helvetica, arial, verdana, sans-serif;
        text-decoration: none;
        display:block;
        padding: 3px 10px 3px 10px;
        height:22px;
        float:left;
}

ul#navi li a:hover {
        color: #c0c0c0;
        background-color:#535353;
}

Lynne 12-24-2010 03:42 PM
What browser are you using? When I went to your site and used firebug to remove that width, everything looked just fine to me in firefox. You may want to set the left/right margins in h1#logo to auto instead of 0.

qubed 12-24-2010 09:15 PM
Lynne -

Thanks for that and for your patience.

That in fact looks like it did the trick. FWIW, I use chrome and firefox and on both it looks like that remedied it.

Again thank you and sticking it out with me.


All times are GMT. The time now is 07:14 AM.

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.01067 seconds
  • Memory Usage 1,807KB
  • 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
  • (4)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (7)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
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete