Images on index page to sit behind flyout menu

rikpotts · October 9, 2009

Hi,

I have an annoying issue on my index page which after many hours of messing about (I even broke the menu entirely for a time!) I cannot fix.

Its best if you just look.... its too hard to explain.

Scroll from Air/Nutrient Control to Essentials

www.hydro-organicsuk.co.uk

Here is my english/index.php

Im assuming this is where the problem will be?

Many Thanks for any help!

<?php

/*

$Id: index.php,v 1.1 2003/06/11 17:38:00 hpdl Exp $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Copyright © 2003 osCommerce

Released under the GNU General Public License

*/

define('TEXT_MAIN', '

<div style="position:relative; overflow:hidden; left:0px; top:0px width:488px; height:430px;">

<html>

<body>

<div id="image2" style="position:relative; overflow:hidden; width:488px; height:176px; z-index:0"><img src="images/roundrect322421247.gif" alt="" title="" border=0 width=488 height=176></div>

<div id="image1" style="position:relative; overflow:hidden; left:0px; top:0px; width:243px; height:287px; z-index:0"><img src="images/roundrect319702377.gif" alt="" title="" border=0 width=243 height=252></div>

<div id="image3" style="position:relative; overflow:hidden; left:243px; top:-287px; width:245px; height:200px; z-index:0"><img src="images/roundrect322706377.gif" alt="" title="" border=0 width=245 height=175></div>

<div id="flash1" style="position:relative; left:5px; top:-480px; width:234px; height:60px; z-index:0">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

WIDTH="234"

HEIGHT="60"

id="biocanna_1b"

ALIGN="">

<PARAM NAME=movie VALUE="images/biocanna_2b.swf">

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#FFFFFF>

<PARAM NAME=menu VALUE=false>

<EMBED src="images/biocanna_2b.swf" quality=high bgcolor=#FFFFFF WIDTH="234" HEIGHT="60" NAME="biocanna_1b" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

</object>

</noscript>

</div>

<div id="text1" style="position:relative; overflow:hidden; left:7px; top:-715px; width:240px; height:176px; z-index:0">

<div>

<div font face="Comic Sans MS"> <B>Welcome to Hydro-Organics UK!!</B></font></div>

<div align=center><font face="Comic Sans MS"><B><BR></B></font></div>

<div><font face="Comic Sans MS">We provide any budding organic or hydro grower the tools to design, build and maintain an indoor garden. We supply the highest quality equipment availible on the market... from </font><font face="Comic Sans MS"><B>hydroponic kits, lighting units</B></font><font face="Comic Sans MS"> and </font><font face="Comic Sans MS"><B>ventilation systems</B></font><font face="Comic Sans MS"> to </font><font face="Comic Sans MS"><B>nutrients, organic growing media</B></font><font face="Comic Sans MS"> and </font><font face="Comic Sans MS"><B>pest control.</B></font></div>

</div></div>

<div id="image4" style="position:relative; overflow:hidden; left:245px; top:-890px; width:240px; height:160px; z-index:0"><img src="images/paste1.jpg" alt="" title="" border=0 width=240 height=160></div>

<div id="text2" style="position:relative; overflow:hidden; left:7px; top:-810px; width:233px; height:207px; z-index:0">

<div>

<div><font face="Comic Sans MS"><B>Hydro-Organics UK</B></font><font face="Comic Sans MS"> openly promotes the </font><font face="Comic Sans MS"><B>BioCanna</B></font><font face="Comic Sans MS"> range. </font><font face="Comic Sans MS"><B>BioCanna</B></font><font face="Comic Sans MS"> is revolutionary in that it allows for a 100% </font><font face="Comic Sans MS"><B>Organic</B></font><font face="Comic Sans MS"> crop to be grown in a controlled manner for the first time. Each product in the </font><font face="Comic Sans MS"><B>BioCanna</B></font><font face="Comic Sans MS"> range has been legally tested and certified to be worthy of the "</font><font face="Comic Sans MS"><B>Organic</B></font><font face="Comic Sans MS">" description. </font><font face="Comic Sans MS"><B>BioCanna</B></font><font face="Comic Sans MS"> is the ideal route to take for medicinal crops and is in keeping with the recent awarness of the benefits of organic produce.</font></div>

</div></div>

<div id="text3" style="position:relative; overflow:hidden; left:255px; top:-1080px; width:230px; height:184px; z-index:0">

<div>

<div><font face="Comic Sans MS">At </font><font face="Comic Sans MS"><B>Hydro-Organics UK</B></font><font face="Comic Sans MS"> we feel there is no room for compromise when it comes to quality of equipment used and strongly believe an indoor garden will only give back as much as you put in. For this reason we only supply the best equipment from the most sought after manufacturuers, including</font><font face="Comic Sans MS"><B> Canna, GroDan, BioBizz, BioCanna, VitaLink.....</B></font><font face="Comic Sans MS"> </font></div>

</div></div>

</body>

</html>

</div>

<br>

<div id="flash2" style="position:relative; left:16px; top:0px; width:260px; height:60px; z-index:0">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

WIDTH="460"

HEIGHT="60"

id="biocanna_3a"

ALIGN="">

<PARAM NAME=movie VALUE="http://www.biocanna.info/banners/en/biocanna_3a.swf">'>http://www.biocanna.info/banners/en/biocanna_3a.swf">

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#FFFFFF>

<PARAM NAME=menu VALUE=false>

<EMBED src="http://www.biocanna.info/banners/en/biocanna_3a.swf" quality=high bgcolor=#FFFFFF WIDTH="460" HEIGHT="60" NAME="biocanna_1a" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

</object>

</noscript>

</div>

');

define('TABLE_HEADING_NEW_PRODUCTS', 'New Products For %s');

define('TABLE_HEADING_UPCOMING_PRODUCTS', 'Upcoming Products');

define('TABLE_HEADING_DATE_EXPECTED', 'Date Expected');

if ( ($category_depth == 'products') || (isset($HTTP_GET_VARS['manufacturers_id'])) ) {

define('HEADING_TITLE', '');

define('TABLE_HEADING_IMAGE', '');

define('TABLE_HEADING_MODEL', 'Model');

define('TABLE_HEADING_PRODUCTS', 'Product Name');

define('TABLE_HEADING_MANUFACTURER', 'Manufacturer');

define('TABLE_HEADING_QUANTITY', 'Quantity');

define('TABLE_HEADING_PRICE', 'Price');

define('TABLE_HEADING_WEIGHT', 'Weight');

define('TABLE_HEADING_BUY_NOW', 'Buy Now');

define('TEXT_NO_PRODUCTS', 'There are no products to list in this category.');

define('TEXT_NO_PRODUCTS2', 'There is no product available from this manufacturer.');

define('TEXT_NUMBER_OF_PRODUCTS', 'Number of Products: ');

define('TEXT_SHOW', '<b>Show:</b>');

define('TEXT_BUY', 'Buy 1 \'');

define('TEXT_NOW', '\' now');

define('TEXT_ALL_CATEGORIES', 'All Categories');

define('TEXT_ALL_MANUFACTURERS', 'All Manufacturers');

} elseif ($category_depth == 'top') {

define('HEADING_TITLE', '');

} elseif ($category_depth == 'nested') {

define('HEADING_TITLE', 'Categories');

}

// BOF Wolfen featured sets

define('TABLE_HEADING_PRICE', 'Price');

define('TABLE_HEADING_BUY_NOW', 'Buy Now');

define('TEXT_NO_FEATURED_PRODUCTS', 'There are no featured products');

define('TEXT_MORE_INFO', '......');

// EOF Wolfen featured sets

?>

multimixer · October 9, 2009

I can not understand what the issue is. It's maybe hard to explain, but try. I could not see anything visiting your page. From the code you posted I see that you coded a template into the language file

rikpotts · October 9, 2009

Sorry, I thought it wuld be obvious.

When you hover the mouse over the categories on the left the flyout menu sits behind the flash image but sits on top of the brown and yellow boxes, text and the .jpg of soil.

Bascially the flash images sit on top of everything including my flyout menu.

Many Thanks

multimixer · October 9, 2009

Well, in both safari and firefox the menu is on top off all, so I don't see a problem. On what browser do you look? Maybe it's an IE specific thing?

There are some IE specific CSS hacks available in various css forums. By the way, why do you have the div properties in the code and not in your css?

PS. I just checked with opera, and yes, flash is on top of everything. I guess it's a css matter, but the only thing I can tell you is to look in css forums.

Maybe somebody else know more

PS2. one idea: maybe to set a higher z index for the menu?

rikpotts · October 9, 2009

I use Firefox. Ive tried it in IE too.

I remember a while back trying it on opera, chrome and safari too. Ive always had the same out come.

I ve tried the z-value.

Thanks for the suggestions!

♥ecartz · October 9, 2009

I've seen this mentioned in passing previously as a flash issue. Some Javascript libraries handle this by hiding the flash when the menu is opened. As such, switching to a different fly-out menu script might solve your problem.

I'm not sure that it can be fixed in CSS, as I don't believe that flash is aware of CSS and the browser cedes that control to the flash plugin. A quick Google suggests adding

<param name="wmode" value="transparent">

would solve it for IE. To solve it for Firefox, you might have to replace

<EMBED src="images/biocanna_2b.swf" quality=high bgcolor=#FFFFFF WIDTH="234" HEIGHT="60" NAME="biocanna_1b" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

with something like

<object width="234" heigh="60" id="biocanna_1b" align="">
<param name="movie" value="images/biocanna_2b.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

The relevant Google term is Flash Satay technique.

Note: it's possible that wmode transparent will have other side effects that would be undesirable. If so, then you may be stuck with hiding the flash when the menu is open.

Images on index page to sit behind flyout menu

Recommended Posts

rikpotts

multimixer

rikpotts

multimixer

rikpotts

♥ecartz

Archived

Browse

Activity