The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
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&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&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&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] qubed |
#2
|
||||
|
||||
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. |
#3
|
|||
|
|||
Thanks for the response - I am running a custom skin from forummonkeys.com
HTML Code:
The site is http://pilo.me 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; }: |
#4
|
||||
|
||||
You have the wdith set to 1360px. It *is* centered in that width. Remove that width.
|
#5
|
|||
|
|||
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; } |
#6
|
||||
|
||||
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.
|
#7
|
|||
|
|||
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. |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|