The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
#1
02-25-2011, 03:08 PM
|
|||
|
|||
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&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> <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> <!-- / 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&forumids=$foruminfo[forumid]" /> </if> </if> 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;
}
|
|
#2
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:
HTML Code:
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> HTML Code:
<table> <tr> <td colspan=2></td> </tr> <tr> <td></td> <td></td> </tr> </table> HTML Code:
<table> <tr> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> You need to get the forum/category/table issue fixed in order to see what is going on with the header.
|
|
#3
02-25-2011, 06:32 PM
|
|||
|
|||
|
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> 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> 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;
}
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.
|
|
#4
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.
|
|
#5
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.
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> 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>
|
|
#6
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:
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>
|
|
#7
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.
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;
}
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>
|
|
#9
02-25-2011, 08:21 PM
|
|||
|
|||
|
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
}
--------------- 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>
|
|
#10
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.
|
 |
«
Previous Thread
|
Next Thread
»
Linear Mode
|
|
All times are GMT. The time now is 06:46 AM.