Help! How do I adjust my header image borders? [Archive]

View Full Version : Help! How do I adjust my header image borders?

fernandezp27

02-25-2011, 03:08 PM

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

Header code is:

<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&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 />


<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>    <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">  <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">  
<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>


</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;">


$spacer_open

$_phpinclude_output

headinclude code is:

<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>


$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>


<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">

</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&forumids=$foruminfo[forumid]" />
</if>
</if>

Code I inserted into "Additional CSS Definitions":

#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;
}

Lynne

02-25-2011, 04:24 PM

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:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
OR:
<table>
<tr>
<td colspan=2></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
NOT (which you have done):
<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.

fernandezp27

02-25-2011, 06:32 PM

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

<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 1298666152 at 1298666152 ---------------

tried this as well, nothing changed.

<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 1298666254 at 1298666254 ---------------

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

THis 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 1298666610 at 1298666610 ---------------

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.

Lynne

02-25-2011, 07:21 PM

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.

fernandezp27

02-25-2011, 07:57 PM

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.

<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 1298671376 at 1298671376 ---------------

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.

<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>

Lynne

02-25-2011, 08:04 PM

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:
<table><tr>
<td><img><img><img></td>
</tr></table>or
<table><tr>
<td><img></td><td><img></td><td><img></td>
</tr></table>

fernandezp27

02-25-2011, 08:05 PM

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.

#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 1298671782 at 1298671782 ---------------

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 1298672055 at 1298672055 ---------------

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

<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>

Lynne

02-25-2011, 08:17 PM

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?

fernandezp27

02-25-2011, 08:21 PM

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

--------------- Added 1298673218 at 1298673218 ---------------

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

#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 1298673318 at 1298673318 ---------------

just removed it completely and still no change.

--------------- Added 1298673455 at 1298673455 ---------------

My new code looks like this:

<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

Lynne

02-25-2011, 09:20 PM

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.

fernandezp27

02-25-2011, 10:35 PM

ok, thanks. I will try that.