Flash header installed OK but appears slightly offset from

**I have spent a great deal of time searching and reading this forum and have learned a great deal. My thanks to all who have posted so generously to help a novice like myself.

I have a new install of Zen Cart version 1.3.8a. My host is hostgator and mySQL client/server version is 5.1.30. PhpMyAdmin 2.11.9.4. I'm working in FF and using Dreamweaver 8 to modify the php.script. I don't know the software, however, and did this work in my host file manager, which I recognize is a clunky way to go.

I installed the Mother Earth Template following instructions found in these forums. I added a flash header in includes/templates/mother_earth/images/flash/Country_Store_Header.swf.

I added a folder to upload the swfobject file as follows: includes/templates/mother_earth/jscript/swfobject.js

Lastly I followed the tutorials regarding flash headers and after much trial and error (for my skills are few :() I modified the includes/templates/mother_earth/common/tpl_header.php script to read as follows:**

<?php /** * Common Template - tpl_header.php * * this file can be copied to /templates/your_template_dir/pagename<br /> * example: to override the privacy page<br /> * make a directory /templates/my_template/privacy<br /> * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br /> * to override the global settings and turn off the footer un-comment the following line:<br /> * <br /> * $flag_disable_header = true;<br /> * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $ */ ?> <?php // Display all header alerts via messageStack: if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) { echo htmlspecialchars(urldecode($_GET['error_message'])); } if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) { echo htmlspecialchars($_GET['info_message']); } else { } ?> <!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="headerWrapper"> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul class="back"></ul> </div> <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?> <object data="includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf" type="application/x-shockwave-flash" width="100%" height="140" align="absmiddle"> <param name="movie" value="includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf" /> <param name="quality" value="high" /> <param name="BGCOLOR" value="#000000" /> <param name="menu" value="false" /> <embed src="includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf" width="100%" height="140" align="absmiddle" quality="high" bgcolor="#000000" menu="false"></embed> </object> </div> <br class="clearBoth" /> </div> <!--eof-navigation display--> <!--bof-branding display--> <div id="logoWrapper"> <script type="text/javascript" src="../html backups/includes/templates/mother_earth/jscript/swfobject.js"></script> <div id="flashcontent"> <center> </center> </div> <script type="text/javascript"> var so = new SWFObject("includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf", "Country_Store_HEADER", "760", "140", "7", "#000000"); so.write("flashcontent"); </script> <!-- <div id="logo"><?php // echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div> --> <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?> <div id="taglineWrapper"> <?php if (HEADER_SALES_TEXT != '') { ?> <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div> <?php } ?> <?php if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) { if ($banner->RecordCount() > 0) { ?> <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div> <?php } } ?> </div> <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?> </div> <br class="clearBoth" /> <!--eof-branding display--> <!--eof-header logo and navigation display--> <!--bof-optional categories tabs navigation display--> <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?> <!--eof-optional categories tabs navigation display--> </div> <?php } ?>

**The problem that I now have is that my flash header is slightly offset from where it should be and I cannot seem to figure out why. Any suggestions would be greatly appreciated!

Thanks!

Esquire

BTW: here is the link to my zencart install so you can see what I see: http://doorwaybuck.com/thecountrystore/**

I am going to post several items that I see and there may be more, but these are not size aligned at all and the logoWrapper is contained within the headerWrapper - -then see your swf

#logoWrapper {
    background-color: transparent;
    height:200px;
	}
	
#headerWrapper {
	height: 150px;
	background-image: url(../img/header.jpg);
    background-repeat: no-repeat;
}

SWFObject("includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf", "Country_Store_HEADER", "760", "140",

your image is 140 high, make the logowrapper the same. The header wrapper needs to be a bit larger in height for the navbar and you can adjust to what works or start at 200 and work down

As you are not using the "Tagline" you might comment the following out(as it is an override file you can just cut/delete it)

<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>

Ah, thank you for that. It seems obvious when you point it out but I was having trouble seeing the forest for the trees. I'll make some changes and report back.

Again,*** thank you***.

**OK. I cut out the bit that wasn't needed (thanks for that). And I changed the stylesheet as you suggested but I still have the flash header overlapping the orange bar at the base of the flasheader, and showing a little gray strip at the top.

Here is the modification I made to the the stylesheet:**

#logoWrapper {
background-color: transparent;
height:140px;
}

#headerWrapper {
height: 160px;
background-image: url(../img/header.jpg);
background-repeat: no-repeat;

I'd be grateful for any other suggestions, even if it's just to point me to a tutorial I've not yet seen.

Try applying your header.jpg to the logoWrapper instead of the headerWrapper.

The logo/flash and the orange bar are both contained within the headerWrapper

I simply removed the .jpg header and that seemed to help. Ideally I would like to raise the flash header above the orange bar and I see that I must widen the .swf slightly.

I will play around with the stylesheet. If I widen the flash header, then I can possibly simply give the orange bar more height, which will remove some of the crowding up there. It's not as good as figuring out reason I have an overlap, but it will probably work, since this is intended to be a very simple store.

Here's the link one more time for a visual aid : http://doorwaybuck.com/thecountrystore/

Looking at your source you seem to have split your flash with part in navMainSearch and another in logoWrapper???
Why?
You also have your div "navCatTabsWrapper" positioned absolute 140px from the top And maybe other conflicting settings

**Two other issues puzzle me. Although my flash header opens in dreamweaver with no black border line at the bottom, it installs with one, which cuts a line through the leaf.

and two, My flash header is 760 wide, as is the remaining image behind it. Yet it diplays on my laptop as narrower than the rest of the template.

Any idea why this is?

Here is the tpl_header.php as it currently stands.**

<?php /** * Common Template - tpl_header.php * * this file can be copied to /templates/your_template_dir/pagename<br /> * example: to override the privacy page<br /> * make a directory /templates/my_template/privacy<br /> * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br /> * to override the global settings and turn off the footer un-comment the following line:<br /> * <br /> * $flag_disable_header = true;<br /> * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $ */ ?> <?php // Display all header alerts via messageStack: if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) { echo htmlspecialchars(urldecode($_GET['error_message'])); } if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) { echo htmlspecialchars($_GET['info_message']); } else { } ?> <!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="headerWrapper"> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul class="back"></ul> </div> <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?> <object data="includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf" type="application/x-shockwave-flash" width="100%" height="140"> <param name="movie" value="includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf" /> <param name="quality" value="high" /> <param name="BGCOLOR" value="#000000" /> <param name="menu" value="false" /> <embed src="includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf" width="100%" height="140" quality="high" bgcolor="#000000" menu="false"></embed> </object> </div> <br class="clearBoth" /> </div> <!--eof-navigation display--> <!--bof-branding display--> <div id="logoWrapper"> <script type="text/javascript" src="../html backups/includes/templates/mother_earth/jscript/swfobject.js"></script> <div id="flashcontent"> <center> </center> </div> <script type="text/javascript"> var so = new SWFObject("includes/templates/mother_earth/images/flash/Country_Store_HEADER.swf", "Country_Store_HEADER", "760", "140", "7", "#000000"); so.write("flashcontent"); </script> <!-- <div id="logo"><?php // echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div> --> <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?> <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?> </div> <br class="clearBoth" /> <!--eof-branding display--> <!--eof-header logo and navigation display--> <!--bof-optional categories tabs navigation display--> <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?> <!--eof-optional categories tabs navigation display--> </div> <?php } ?>