vb.org Archive - Help! How do I adjust my header image borders?

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)

- - Help! How do I adjust my header image borders? (https://vborg.vbsupport.ru/showthread.php?t=259439)

Help! How do I adjust my header image borders?

My 3 header images are being swallowed by the body. My site is www.travelchronicles.org.

Header code is:

HTML Code:

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td>



<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

     <td><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>



        <td><div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"></a></div></td>



        <td><div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></a></div></td>

  </tr>

</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td style="width: 24px;"><img src="$stylevar[imgdir_misc]/login_left.gif" alt=""></td>

    <td style="background-image:url($stylevar[imgdir_misc]/login_bg.gif);"><table width="100%" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td class="whitelinks" style="background-image:url($stylevar[imgdir_misc]/login_bg.gif); width: 215px;">

                

                <if condition="$show['member']">

                <div class="smallfont" align="center"><a href="search.php?$session[sessionurl]do=getnew"><strong>View New Posts</strong></a> | <a href="forumdisplay.php?$session[sessionurl]do=markread&amp;markreadhash=$bbuserinfo[securitytoken]" rel="nofollow"><strong>Mark Forums Read</strong></a></div>

                <else />

                <div class="smallfont" align="center"><a href="register.php">No Account? <strong>Register Now!</strong></a></div>                </if>

                

                </td>

        <td style="width: 46px;"><img src="$stylevar[imgdir_misc]/login_divider.gif" alt=""></td>

        <td style="background-image:url($stylevar[imgdir_misc]/login_bg.gif);" class="whitelinks">

                

                

                

                <if condition="$show['member']">

        

                <div align="right" class="smallfont">

                        <strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><br />

                        You Last Visited: $pmbox[lastvisitdate] $pmbox[lastvisittime]

                        <if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if>

                        <if condition="$show['pmwarning']"><br /><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></if>

                </div>

                

        <else />

                        



                <!-- login form -->

                <form action="login.php?do=login" method="post" onSubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">

                <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>

                <table align="center" cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">

                <tr>

                        <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="20" accesskey="u" tabindex="101" value="$vbphrase[username]" onFocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>

                        <td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="20" tabindex="102" /></td>

                        <td class="smallfont" colspan="3">&nbsp;&nbsp;<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>

                        <td colspan="2"><div align="center">&nbsp;&nbsp;

                  <input type="submit" class="button" value="Log In Now!" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />

                  </div></td>

                </tr>



                </table>

                <input type="hidden" name="s" value="$session[sessionhash]" />

                <input type="hidden" name="do" value="login" />                

                <input type="hidden" name="vb_login_md5password" />

                <input type="hidden" name="vb_login_md5password_utf" />

                </form>

                <!-- / login form -->

                        

        </if>

                

                

                

                

                </td>

      </tr>

    </table></td>

    <td style="width: 24px;"><img src="$stylevar[imgdir_misc]/login_right.gif" alt=""></td>

  </tr>

</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td style="width: 22px;"><img src="$stylevar[imgdir_misc]/links_left.gif" alt=""></td>

    <td style="background-image:url($stylevar[imgdir_misc]/links_bg.gif);"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr id="menu">

        <td><div align="center"><a href="index.php">Home</a></div></td>

        <td><div align="center"><a href="usercp.php">User CP </a></div></td>

        <td><div align="center"><a href="register.php">Register</a></div></td>

        <td><div align="center"><a href="memberlist.php">Members List </a></div></td>

        <td><div align="center"><a href="calendar.php">Calendar</a></div></td>

        <td><div align="center"><a href="faq.php">FAQ</a></div></td>

        <td><div align="center"><a href="search.php$session[sessionurl_q]">Search</a></div></td>

      </tr>

    </table></td>

    <td style="width: 22px;"><img src="$stylevar[imgdir_misc]/links_right.gif" alt=""></td>

  </tr>

</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td valign="top" style="background-image:url($stylevar[imgdir_misc]/sidebar_shadow_left.gif); background-repeat: repeat-x; padding-left: 6px; background-color:#FFFFFF;">

        

        <div style="padding-top: 25px; padding-left: 10px;">













<!-- content table -->

$spacer_open



$_phpinclude_output

headinclude code is:

HTML Code:

<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />

<meta name="generator" content="vBulletin $vboptions[templateversion]" />

<if condition="$show['threadinfo']">

<meta name="keywords" content="<if condition="$threadinfo['taglist']">$threadinfo[taglist], </if>$threadinfo[prefix_plain_html] $threadinfo[title], $vboptions[keywords]" />

<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$threadinfo[prefix_plain_html] $threadinfo[title] $foruminfo[title_clean]" />

<else /><if condition="$show['foruminfo']">

<meta name="keywords" content="$foruminfo[title_clean], $vboptions[keywords]" />

<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$foruminfo[description_clean]" />

<else />

<meta name="keywords" content="$vboptions[keywords]" />

<meta name="description" content="$vboptions[description]" />

</if></if>



<!-- CSS Stylesheet -->

$style[css]

<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">

<style type="text/css" id="vbulletin_opera8fix_css">

ul, ol { padding-$stylevar[left]:20px; }

</style>

</if>

<if condition="$show['editor_css']">

$editor_css

</if>

<!-- / CSS Stylesheet -->



<script type="text/javascript" src="$stylevar[yuipath]/yahoo-dom-event/yahoo-dom-event.js?v=$vboptions[simpleversion]"></script>

<script type="text/javascript" src="$stylevar[yuipath]/connection/connection-min.js?v=$vboptions[simpleversion]"></script>

<script type="text/javascript">

<!--

var SESSIONURL = "$session[sessionurl_js]";

var SECURITYTOKEN = "$bbuserinfo[securitytoken]";

var IMGDIR_MISC = "$stylevar[imgdir_misc]";

var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);

// -->

</script>

<script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>

<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>



<if condition="$vboptions['externalrss']">

        <link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />

        <if condition="$show['foruminfo'] OR $show['threadinfo']">

                <link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed" href="external.php?type=RSS2&amp;forumids=$foruminfo[forumid]" />

        </if>

</if>

Code I inserted into "Additional CSS Definitions":

HTML Code:

#menu a {

display: block;

padding-top: 14px;

padding-bottom: 15px;

font-family: arial;

font-size: 11px;

color: #2e85e4;

font-weight: bold;

text-decoration: none;

background: url("skyblue/misc/links_bg.gif") 0 0;

}

#menu a:hover {

color: #FFFFFF;

font-weight: bold;

text-decoration: none;

background: url("skyblue/misc/links_bg2.gif") 0 0;

}





.whitelinks {

color: #ffffff;

}

.whitelinks a {

color: #ffffff;

text-decoration: none;

}

.whitelinks a:hover {

color: #ffffff;

text-decoration: underline;

}

#headerleft

    {

        margin: 5px 10px 10px;

        padding: 8px 10px 12px 10px;

        height: 200px;

        width: 200px; 

    } 

#header

    {

        margin: 5px 10px 10px;

        padding: 8px 10px 12px 10px;

        height: 200px;

        width: 200px;

    }

#headerright

    {

        width: 355px;

        height: 175px;

        margin-top:7px;

    }

You have a few things to fix, but the main thing is regarding tables.. every row in a table must have the same number of columns. It must be:

HTML Code:

<table>

<tr>

  <td></td>

  <td></td>

</tr>

<tr>

  <td></td>

  <td></td>

</tr>

</table>

OR:

HTML Code:

<table>

<tr>

  <td colspan=2></td>

</tr>

<tr>

  <td></td>

  <td></td>

 </tr>

</table>

NOT (which you have done):

HTML Code:

<table>

<tr>

  <td></td>

</tr>

<tr>

  <td></td>

  <td></td>

 </tr>

</table>

Something you may want to try... Create a Category forum (Act as Forum> NO) and put your two existing forums in there (set their parent to be the new category forum). That may fix part of the issue.

You need to get the forum/category/table issue fixed in order to see what is going on with the header.

I changed it to match but, it grouped the 3 images vertical and cut them in half.

HTML Code:

<table> 

<tr>

     <td><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>

</tr>

<tr>     

   <td><div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"></a></div></td>

</tr>

<tr>

        <td><div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></a></div></td>

  </tr>

</table>

--------------- Added [DATE]1298666152[/DATE] at [TIME]1298666152[/TIME] ---------------

tried this as well, nothing changed.

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

     <td><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>

</tr>

</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>     

   <td><div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"></a></div></td>

</tr>

</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

        <td><div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></a></div></td>

  </tr>

</table>

--------------- Added [DATE]1298666254[/DATE] at [TIME]1298666254[/TIME] ---------------

Do I need to also modify my Code I inserted into "Additional CSS Definitions"?

THis code:

HTML Code:

#headerleft

    {

        margin: 5px 10px 10px;

        padding: 8px 10px 12px 10px;

        height: 200px;

        width: 200px; 

    } 

#header

    {

        margin: 5px 10px 10px;

        padding: 8px 10px 12px 10px;

        height: 200px;

        width: 200px;

    }

#headerright

    {

        width: 355px;

        height: 175px;

        margin-top:7px;

    }

--------------- Added [DATE]1298666610[/DATE] at [TIME]1298666610[/TIME] ---------------

I also created a Category forum (Act as Forum> NO) and put my two existing forums in there (set parent to be the new category forum) as you instructed but, did not see any change.

You have each image in it's own table, that is why they are under each other. You need to put them one after another or each in a <td> tag in a row.

The rest of your style looks fine now.

That's what I have, right? I have each in a <td></td> tag in a <tr></tr> row within the same table <table width="100%" border="0" cellspacing="0" cellpadding="0"></table>, not in separate tables.

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

     <td><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>

</tr>

<tr>     

   <td><div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"></a></div></td>

</tr>

<tr>

        <td><div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></a></div></td>

  </tr>

</table>

--------------- Added [DATE]1298671376[/DATE] at [TIME]1298671376[/TIME] ---------------

I took out the <tr>'s in the middle and it lined them up side by side, still partially hidden by the forum with alot of space at the top.

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>     

   <td><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>

   <td><div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"></a></div></td>

   <td><div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></a></div></td>

  </tr>

</table>

You do not want them each in their own <tr>. <tr> is a row. You've put them each in their own row. You want:

HTML Code:

<table><tr>

<td><img><img><img></td>

</tr></table>

HTML Code:

<table><tr>

<td><img></td><td><img></td><td><img></td>

</tr></table>

It seems like more of a margin, padding, height, and width issue now. Do I need to modify that aspect and if so, do i have it correctly added in the extra css definitions. It seems like that code is not being accessed.

HTML Code:

#headerleft

    {

        margin: 5px 10px 10px;

        padding: 8px 10px 12px 10px;

        height: 200px;

        width: 200px; 

    } 

#header

    {

        margin: 5px 10px 10px;

        padding: 8px 10px 12px 10px;

        height: 200px;

        width: 200px;

    }

#headerright

    {

        width: 355px;

        height: 175px;

        margin-top:7px;

    }

--------------- Added [DATE]1298671782[/DATE] at [TIME]1298671782[/TIME] ---------------

By image, do you mean div to div such as:

><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div>

If so, how do I include the "align="? to position all 3 correctly with the same tr?

--------------- Added [DATE]1298672055[/DATE] at [TIME]1298672055[/TIME] ---------------

Theres' alot of guts surrounding my images. Where does all that go? Do I remove and just use image like this?

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>     

   <td><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></td>

  </tr>

</table>

Your left image is 610 x 472 in size. You are putting it into a div that you are saying is 200 x 200 in size. Does that make sense to you?

Where is that in the code. I don't see it.

--------------- Added [DATE]1298673218[/DATE] at [TIME]1298673218[/TIME] ---------------

Oh I see it now in the additional code. I removed it. It now looks like this:

HTML Code:

#headerleft

    {

        padding: 5px; !important

     } 

#header

    {

        padding: 5px; !important

    }

#headerright

    {

        padding: 5px; !important

    }

The thing is, doesn't matter what I modify here, doesn't seem to take effect.

--------------- Added [DATE]1298673318[/DATE] at [TIME]1298673318[/TIME] ---------------

just removed it completely and still no change.

--------------- Added [DATE]1298673455[/DATE] at [TIME]1298673455[/TIME] ---------------

My new code looks like this:

HTML Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>     

   <td><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></td>

  </tr>

</table>

Looks better but how do I close it in a little? www.travelchronicles.org

And now you have an image that is 610px wide then one that is 504px wide, then another that is 610px wide. The only way you will see them side-by-side is if you have your browser window about 1700px wide. That isn't very realistic. I'd suggest reducing the width of those images as much as possible.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (17)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
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02317 seconds Memory Usage 1,883KB 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 (17)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
Messages: