News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Spacing Issues With Images

Started by tuko, October 03, 2008, 04:43:20 AM

Previous topic - Next topic

tuko

On our clubs test site (SMF2 B4) TEST SITE I placed 2 rotator.php with images from club events and members vehicles.

I want to place these images on both sided of the "User Info" box.  But when I place the rotator.php's where I want them, I'm running into spacing issues.  :o

1) They are not evenly spaced with each other and the page runs over on the right side.

2) When I add the left rotator.php, the banner image moves from the center placement to the left again. I'm assuming that the banner is moving because of the lack of proper spacing of the image below it.  ???

Below is the index.template

<?php
// Version: 2.0 Beta 4; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context$settings$options$txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0 Beta 4';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = false;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = false;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = false;

}

// The main sub template above the content.
function template_html_above()
{
global $context$settings$options$scripturl$txt$modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="'
$context['page_title_html_safe'], '" />
<meta name="keywords" content="'
$context['meta_keywords'], '" />
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/script.js?b4"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_default_theme_url = "'
$settings['default_theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";'$context['show_pm_popup'] ? '
if (confirm("' 
$txt['show_personal_messages'] . '"))
window.open("' 
$scripturl '?action=pm");' '''
// ]]></script>
<title>'
$context['page_title_html_safe'], '</title>';

// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />'
;

// The ?b4 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?b4" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/css/print.css?b4" media="print" />';

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/css/fonts-compat.css" />';
echo 
<link rel="icon" href="http://www.maritimerovers.org/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.maritimerovers.org"/favicon.ico" type="image/x-icon" />'
;
// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="'
$scripturl'?action=help" />
<link rel="search" href="' 
$scripturl '?action=search" />
<link rel="contents" href="'
$scripturl'" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name_html_safe'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
$options['collapse_header'] = !empty($_COOKIE['upshrink']);

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// Create the main header object.
var mainHeader = new smfToggle("upshrink", '
, empty($options['collapse_header']) ? 'false' 'true'');
mainHeader.useCookie('
$context['user']['is_guest'] ? 0');
mainHeader.setOptions("collapse_header", "'
$context['session_id'], '");
mainHeader.addToggleImage("upshrink", "/upshrink.gif", "/upshrink2.gif");
mainHeader.addTogglePanel("upshrinkHeader");
mainHeader.addTogglePanel("upshrinkHeader2");
// ]]></script>'
;

echo '
</head>
<body>'
;
}

function 
template_body_above()
{
global $context$settings$options$scripturl$txt$modSettings;

// Because of the way width/padding are calculated, we have to tell Internet Explorer 4 and 5 that the content should be 100% wide. (or else it will assume about 108%!)
echo '
<div id="headerarea" style="padding: 12px 30px 4px 30px;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">';

// The logo and the three info boxes.
echo '
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="position: relative;">
<tr>
<td colspan="2" valign="middle" style="padding: 5px; white-space: nowrap;">'
;

// This part is the logo and forum name.  You should be able to change this to whatever you want...

echo '
<div align="center"><img src="'
$settings['header_logo_url'], '" alt="'$context['forum_name'], '" border="0" /></div>';

echo '
</td>
</tr>
<tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' ' style="display: none;"''>
<td valign="bottom" style="padding: 5px; white-space: nowrap;">
            <img src="http://www.tukojack.com/random2/rotator.php">
</td>
<td valign="middle">
<div class="headertitles" style="margin-right: 5px; position: middle;"><img src="'
$settings['images_url'], '/blank.gif" height="12" alt="" /></div>
<div class="headerbodies" style="position: relative; margin-right: 5px; background-image: url('
$settings['images_url'], '/box_bg.gif);">
<img src="'
$settings['lang_images_url'], '/userinfo.gif" style="position: absolute; left: '$context['browser']['is_ie5'] || $context['browser']['is_ie4'] ? '0' '-1px''; top: -16px; clear: both;" alt="" />
<table width="99%" cellpadding="0" cellspacing="5" border="0"><tr>'
;

if (!empty($context['user']['avatar']))
echo '<td valign="middle">'$context['user']['avatar']['image'], '</td>';

echo '<td valign="top" class="smalltext" style="width: 100%; font-family: verdana, arial, sans-serif;">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
'
$txt['hello_member'], ' <b>'$context['user']['name'], '</b>';

// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo ', '$txt['msg_alert_you_have'], ' <a href="'$scripturl'?action=pm">'$context['user']['messages'], ' '$context['user']['messages'] != $txt['msg_alert_messages'] : $txt['message_lowercase'], '</a>'$txt['newmessages4'], ' '$context['user']['unread_messages'], ' '$context['user']['unread_messages'] == $txt['newmessages0'] : $txt['newmessages1'];
echo '.<br />';

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<b>'
$txt['maintain_mode_on'], '</b><br />';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
'
$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=admin;area=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '<br />';

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
'
$txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}

echo '
<a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a><br />
<a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />
'
$context['current_time'], '<br />';
if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
echo '
<a href="'
$scripturl'?action=moderate;area=reports">'sprintf($txt['mod_reports_waiting'], $context['open_mod_reports']), '</a>';
}
// Otherwise they're a guest - so politely ask them to register or login.
else
{
echo '
'
sprintf($txt['welcome_guest'], $txt['guest_title']), '<br />
'
$context['current_time'], '<br />

<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/sha1.js"></script>

<form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<div style="text-align: right;">
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
$txt['one_hour'], '</option>
<option value="1440">'
$txt['one_day'], '</option>
<option value="10080">'
$txt['one_week'], '</option>
<option value="43200">'
$txt['one_month'], '</option>
<option value="-1" selected="selected">'
$txt['forever'], '</option>
</select>
<input type="submit" value="'
$txt['login'], '" /><br />
'
$txt['quick_login_dec'], '
<input type="hidden" name="hash_passwrd" value="" />
</div>
</form>'
;
}

echo '
</td></tr></table>
</div>
  <td valign="bottom" style="padding: 5px; white-space: nowrap;">
<img src="http://www.tukojack.com/random/rotator.php">
</td>
</td>
<td style="width: 262px; '
, !$context['right_to_left'] ? 'padding-left' 'padding-right'': 6px;" valign="middle">';

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<div class="headertitles" style="width: 260px;"><img src="'
$settings['images_url'], '/blank.gif" height="12" alt="" /></div>
<div class="headerbodies" style="width: 260px; position: relative; background-image: url('
$settings['images_url'], '/box_bg.gif); margin-bottom: 8px;">
<img src="'
$settings['lang_images_url'], '/newsbox.gif" style="position: absolute; left: -1px; top: -16px;" alt="" />
<div style="height: 50px; overflow: auto; padding: 5px;" class="smalltext">'
$context['random_news_line'], '</div>
</div>'
;



echo '
</td>
</tr>
</table>

<a href="javascript:void(0);" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="'
$settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin: 2px 2ex 2px 0;" border="0" /></a>';

// Show the menu here, according to the menu sub template.
echo '<center>'template_menu(), '</center>';

echo '
</div>'
;

// The main content should go here.  A table is used because IE 6 just can't handle a div.
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td id="bodyarea" style="padding: 1ex 20px 2ex 20px;">'
;
}

function 
template_body_below()
{
global $context$settings$options$scripturl$txt;

echo '</td>
</tr></table>'
;

// Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
<table cellspacing="0" cellpadding="3" border="0" width="100%">
<tr>
<td valign="middle" align="center" style="white-space: nowrap;">
'
theme_copyright(), '
</td>
</tr>
</table>'
;

// Show the load time?
if ($context['show_load_time'])
echo '
<span class="smalltext">'
$txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</span>';

echo '
</div>'
;

// This is an interesting bug in Internet Explorer AND Safari.  Rather annoying, it makes overflows just not tall enough.
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
{
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
}'
;
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
}'
;
else
{
echo '
add_load_event(smf_codeFix);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}
}'
;
}

echo '
// ]]></script>'
;
}

}
function 
template_html_below()
{
global $context$settings$options$scripturl$txt$modSettings;

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</body>
</html>'
;
}

// Show a linktree.  This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context$settings$options;

// Folder style or inline?  Inline has a smaller font.
echo '<span class="nav"'$settings['linktree_inline'] ? ' style="font-size: smaller;"' '''>';

// Each tree item has a URL and name.  Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show the | | |-[] Folders.
if (!$settings['linktree_inline'])
{
if ($link_num 0)
echo str_repeat('<img src="' $settings['images_url'] . '/icons/linktree_main.gif" alt="| " border="0" />'$link_num 1), '<img src="' $settings['images_url'] . '/icons/linktree_side.gif" alt="|-" border="0" />';
echo '<img src="' $settings['images_url'] . '/icons/folder_open.gif" alt="+" border="0" />&nbsp; ';
}

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo $settings['linktree_inline'] ? ' &nbsp;|&nbsp; ' '<br />';
}

echo '</span>';
}

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context$settings$options$scripturl$txt;

// We aren't showing all the buttons in this theme.
$hide_buttons = array('pm''mlist');

foreach ($context['menu_buttons'] as $act => $button)
if (in_array($act$hide_buttons))
continue;
else
echo '
<a href="'
$button['href'], '">'$settings['use_image_buttons'] ? '<img src="' $settings['lang_images_url'] . '/' $act '.gif" alt="' $button['title'] . '" border="0" />' $button['title'], '</a>', !empty($button['is_last']) ? '' $context['menu_separator'];
}

// Generate a strip of buttons, out of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
global $settings$buttons$context$txt$scripturl;

if (empty($button_strip))
return '';

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' $value['url'] . '" ' . (isset($value['custom']) ? $value['custom'] : '') . '>' . ($settings['use_image_buttons'] ? '<img src="' $settings['images_url'] . '/' . ($value['lang'] ? $context['user']['language'] . '/' '') . $value['image'] . '" alt="' $txt[$value['text']] . '" border="0" />' $txt[$value['text']]) . '</a>';

$button_strip[$key] = $buttons[$key];
}

echo '
<td '
$custom_td'>'implode($context['menu_separator'], $button_strip) , '</td>';
}

?>


All help and suggestions are appreciated.

Cheers,
Todd.

Oldiesmann

For the one on the left:

  <td valign="bottom" style="padding: 5px; white-space: nowrap;">
<img src="http://www.tukojack.com/random/rotator.php" align="center">
</td>


The one on the right is being added right before a </td>, so you need to move the </td> above the code for the rotator on the right.
Michael Eshom
Christian Metal Fans

tuko

Oldiesmann,
I did as you said and removed the extra /td, but it did not make any difference.

I'm wondering if I posted in the wrong section ?? Should I have posted in the graphics section?


Todd.

Rumbaar

I looked at your forum and read your description, but I can't 100% tell what you are wanting and what you issue is.  Can you screenshot it and indicate what is wrong and what to achieve?
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

tuko

Rumbaar,
Attached are two screenshots, the first being how I would like the page to look like when the user info box is visible but the second is how it looks when I do show the user info box. How can I show the two images in the positions that they are in all the same time showing the user info box?

Thanks in advance.

Todd.

Rumbaar

Ah you need to remove those two cells from that section of the user info.  At the moment you have three cells linked to the user box.  So when it disappears the third empty one shrinks and you get it display how it does.  Which technically still isn't in the middle.

If you want them to display side by side like all the time I'd move it to just under the forum banner.  Please attach you themes index.template.php file via the attachment option and I'll see what I can do.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

tuko

Rumbaar,
thanks for explaining that to me, I really was/am stumped with this considering the limited knowledge I do have with coding.  Attached you will find the themes index.template file.

Many thanks for the advice and help.

Todd.

Rumbaar

Okay I've tweaked it from your original code, it should be how you want it.  It will also allow for a text forum name now as well like the original code.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

tuko

OUTSTANDING Rumbaar!

Works perfectly!

My sincere thank you.

Cheers,
Todd.

Advertisement: