The Arcive of Official vBulletin Modifications Site.

qubed · #1 12-23-2010, 11:04 AM

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 · #2 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 · #3 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 · #4 12-23-2010, 08:45 PM

You have the wdith set to 1360px. It *is* centered in that width. Remove that width.

qubed · #5 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 · #6 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 · #7 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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04014 seconds Memory Usage 2,258KB Queries Executed 13 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (4)bbcode_html (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (7)post_thanks_box (7)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (7)post_thanks_postbit_info (7)postbit (7)postbit_onlinestatus (7)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!