Nesting Fireworks HTML in Dreamweaver Layer?

[Shyid]

Hi, I?ve recently created a banner graphic, including popup menus, in Fireworks
for my website. You can see the banner acting as I intend it to on the
following page:

[url]http://www.theundergroundnation.com/test1.htm[/url]

Notice that the popup menus are positioned so that one side is flush with the
button that reveals them.

However this positioning is of issue on the following page, I have the banner
on a hidden layer (Layer 1) in Dreamweaver, upon mouse over of the table at
the top of the page (Layer 2) Layer 1 is revealed displaying the Fireworks
html. The Entire page is covered in an invisible layer (Layer 3). Upon Mouse
over of Layer 3, Layer 1 is again hidden. I should note that the positioning
problem of the popup menus occurs regardless of Layer 3?s existence. Layers 1
and 2 are inside a table (w 780 px) that is centered on the page for aesthetic
purpose.

[url]http://www.theundergroundnation.com/template.htm[/url]

I know the issue is because of the layers, fireworks sets the positioning
relative to the top left corner, and because I have the layers within a table
that is centered on the page, this is obviously throwing the numbers off.
Notice that if you change the width of your browser, the menus shift position.
The wider your browser the further to the left the menus appear.

I?ve heard rumors of nesting layers etc? Could I somehow nest the fireworks
html within the layer to fix this problem? Any help is appreciated thanks. I
also have access to Flash if that makes any difference.

To answer some questions in advance; I could ditch the show hide layers all
together and just leave the banner at the top of the page as I do in the
following page: [url]http://www.theundergroundnation.com/test1.htm[/url] . Without the
layers I can center the banner without any issue; however it is my intent to
only leave the banner visible on the main pages of the site due to its large
size. Seeing as most people still keep their monitor at 800x600 I want to use
the rollover effect to save headroom on the sub pages of the site, especially
for pages congaing photographs, I want the full photo to be totally visible
upon loading the page.

Anyhow, if you haven?t noticed I?m mildly OCD about my design. Any help
appreciated, thanks.

[Murray *ACE*]

Start by reading this page -

[url]http://www.great-web-sights.com/g_layerlaws.asp[/url]

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Shyid" <webforumsuser@macromedia.com> wrote in message
news:ectrpc$47g$1@forums.macromedia.com...

> Hi, I?ve recently created a banner graphic, including popup menus, in
> Fireworks
> for my website. You can see the banner acting as I intend it to on the
> following page:
>
> [url]http://www.theundergroundnation.com/test1.htm[/url]
>
> Notice that the popup menus are positioned so that one side is flush with
> the
> button that reveals them.
>
> However this positioning is of issue on the following page, I have the
> banner
> on a hidden layer (Layer 1) in Dreamweaver, upon mouse over of the table
> at
> the top of the page (Layer 2) Layer 1 is revealed displaying the Fireworks
> html. The Entire page is covered in an invisible layer (Layer 3). Upon
> Mouse
> over of Layer 3, Layer 1 is again hidden. I should note that the
> positioning
> problem of the popup menus occurs regardless of Layer 3?s existence.
> Layers 1
> and 2 are inside a table (w 780 px) that is centered on the page for
> aesthetic
> purpose.
>
> [url]http://www.theundergroundnation.com/template.htm[/url]
>
> I know the issue is because of the layers, fireworks sets the positioning
> relative to the top left corner, and because I have the layers within a
> table
> that is centered on the page, this is obviously throwing the numbers off.
> Notice that if you change the width of your browser, the menus shift
> position.
> The wider your browser the further to the left the menus appear.
>
> I?ve heard rumors of nesting layers etc? Could I somehow nest the
> fireworks
> html within the layer to fix this problem? Any help is appreciated thanks.
> I
> also have access to Flash if that makes any difference.
>
> To answer some questions in advance; I could ditch the show hide layers
> all
> together and just leave the banner at the top of the page as I do in the
> following page: [url]http://www.theundergroundnation.com/test1.htm[/url] . Without
> the
> layers I can center the banner without any issue; however it is my intent
> to
> only leave the banner visible on the main pages of the site due to its
> large
> size. Seeing as most people still keep their monitor at 800x600 I want to
> use
> the rollover effect to save headroom on the sub pages of the site,
> especially
> for pages congaing photographs, I want the full photo to be totally
> visible
> upon loading the page.
>
> Anyhow, if you haven?t noticed I?m mildly OCD about my design. Any help
> appreciated, thanks.
>
>

[jasan3114]

Hi,
I've just tinkered around with your code a little bit. Taken off the table
you were using for centering and put in a #wrapper to center the content. It
works. I am sure the more experienced people will say that the code needs major
overhaul, and I guess it does - I've just attempted to make your application
functional as you wanted with minimum changes. I've checked on my IE browser
and re-sized the window etc. The pop menu behaves the way it should. Layers
within tables are a no-no. So I worked with the wrapper. Here's the code, the
portion from where I made the modification. I've also removed the contents
between the <TABLE> and </TABLE> tags to reduce the size of your code. If you
want I can upload the page/code if this doesn't work.

img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</SCRIPT>
<style>
body { text-align:center;
}
#wrapper {
width:780px;
height:auto;
margin:0 auto;
padding: 0px;
}
</style>
<SCRIPT language=JavaScript1.2
src="Untitled Document_files/mm_menu.js"></SCRIPT>

<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY bgColor=#660000 topMargin=0

onload="MM_preloadImages('Images/Menu/Bio_f3.gif','Images/Menu/Bio_f2.gif','Imag
es/Menu/Bio_f4.gif','Images/Menu/BannerPathsFilled_r2_c4_f3.gif','Images/Menu/Ba
nnerPathsFilled_r2_c4_f2.gif','Images/Menu/BannerPathsFilled_r2_c4_f4.gif','Imag
es/Menu/BannerPathsFilled_r2_c6_f3.gif','Images/Menu/BannerPathsFilled_r2_c6_f2.
gif','Images/Menu/BannerPathsFilled_r2_c6_f4.gif','Images/Menu/BannerPathsFilled
_r2_c8_f3.gif','Images/Menu/BannerPathsFilled_r2_c8_f2.gif','Images/Menu/BannerP
athsFilled_r2_c8_f4.gif','Images/Menu/BannerPathsFilled_r3_c8_f2.gif','Images/Me
nu/BannerPathsFilled_r3_c8_f4.gif','Images/Menu/BannerPathsFilled_r3_c8_f3.gif',
'Images/Menu/Written_f3.gif','Images/Menu/Written_f2.gif','Images/Menu/Written_f
4.gif')">
<DIV id=Layer3 onMouseOver="MM_showHideLayers('Layer1','','hide') "
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px;
HEIGHT: 100%"></DIV>
<div id="wrapper">
<DIV id=Layer2 onMouseOver="MM_showHideLayers('Layer1','','show') "
style="Z-INDEX: 2; VISIBILITY: visible; WIDTH: 780px; TOP: 0px; HEIGHT:
0px">
<TABLE borderColor=#990000 cellSpacing=0 cellPadding=0 width="100%"
bgColor=#000000 border=3>
</TABLE></DIV>
<DIV align=left>
<TABLE borderColor=#990000 cellSpacing=0 cellPadding=6 width=780 align=center
bgColor=#000000 border=3>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#ffffff>In this binary universe exists one
people divided by one love, and one hate.<BR>One peace engulfed by one
war, one earth divided by this war.</FONT></P>
<P align=center><FONT color=#ffffff>Beneath such conflict, often
accepted
as 'facts of life', exists a revolution fueled by<BR>one unity,
transcending all ages, classes, borders and races. A movement driven by
one universal nation,<BR>one underground
nation.</FONT></P></TD></TR></TBODY></TABLE></DIV></div></BODY></HTML>

[Shyid]

Do i need a special plugin for wrappers? I'll admit, i know nothing about them.

But when i preview the page in dreamweaver, the Table that used to contain the
word navigation is replaced with the following code:

img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;nbArr[nbArr.length] =
img;} }}//-->

The code is calling for an image, but i can't tell which? I'm assuming that
the removal of the table means i need an image to replace the Navigation
"button". Is that what this is hinting at?

Please excuse my ignrance.

[jasan3114]

Hi,
I created and uploaded the page with your problem rectified. Please follow
the link
[url]http://digimax.org/test/ugnation.html[/url]
Save the page and you can compare it with the code earlier. I've taken out
the <table> tag enclosing the <layer> tag. Also you didn't have "layer1"
created, so I created that.
Also you might want to consider that in Fireforx, Netscape etc, if a viewer
increases the text size, it distorts the menu. The sub menu options start
spilling outside the box created for them. The main options "The Nation"
"Audio" etc don't get affected as they are images. You might want to consider
using images for the sub menu options as well.

Regarding "#wrapper" , it is a div tag. Layers are also div tags but with
positioning defined (absolute/relative etc ..). You would need to read CSS-P
for this. There are a lot of sites on the net offering very well laid out
tutorials. I am sure you mustbe already reading such things.
I am relatively inexperienced - I just kept tinkering with you code till I got
it working the way you want it to. In the process learnt something too.
Incase there are any more questions, I'll be glad to put in my two bits.
Incase someone else can give better suggestions, I'll be glad to learn too.
Hope this helps.

[jasan3114]

#wrapper is just a name. It could be called anything "container" or whatever
else. There are no special plugins required. Earlier the preferred way to make
web pages was Tables, not CSS-P is gaining prominence. div tags such as
#wrapper are CSS-P layout.

Please do check the page I uploaded for you. I spent a couple of hours on it
and I hope it wasn't a waste of time.

[url]http://digimax.org/test/ugnation.html[/url]

[jasan3114]

that was now CSS-P .... NOT not CSS-P

[Murray *ACE*]

> Layers are also div tags but with

> positioning defined (absolute/relative etc ..).

Only absolute positioning. Other positioning types (relative, fixed,
static) do not constitute layers.

> You would need to read CSS-P for this

There is no such thing as CSS-P. It's all just CSS.

These will help -

[url]http://www.projectseven.com/tutorials/css/qdmacfly/index.htm[/url]
[url]http://www.macromedia.com/devnet/mx/dreamweaver/css.html[/url]
[url]http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html[/url]
[url]http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html[/url]

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"jasan3114" <webforumsuser@macromedia.com> wrote in message
news:edqq9t$6dq$1@forums.macromedia.com...

> Hi,
> I created and uploaded the page with your problem rectified. Please
> follow
> the link
> [url]http://digimax.org/test/ugnation.html[/url]
> Save the page and you can compare it with the code earlier. I've taken
> out
> the <table> tag enclosing the <layer> tag. Also you didn't have "layer1"
> created, so I created that.
> Also you might want to consider that in Fireforx, Netscape etc, if a
> viewer
> increases the text size, it distorts the menu. The sub menu options start
> spilling outside the box created for them. The main options "The Nation"
> "Audio" etc don't get affected as they are images. You might want to
> consider
> using images for the sub menu options as well.
>
> Regarding "#wrapper" , it is a div tag. Layers are also div tags but with
> positioning defined (absolute/relative etc ..). You would need to read
> CSS-P
> for this. There are a lot of sites on the net offering very well laid out
> tutorials. I am sure you mustbe already reading such things.
> I am relatively inexperienced - I just kept tinkering with you code till I
> got
> it working the way you want it to. In the process learnt something too.
> Incase there are any more questions, I'll be glad to put in my two bits.
> Incase someone else can give better suggestions, I'll be glad to learn
> too.
> Hope this helps.
>
>

[Shyid]

Wow thanks a ton. There are a few more mishaps that ill need to work out but
thats more or less on the dot.

It's going to take me a minute to sift through the codes (I'm still learning)
but I'll get back to you all after i do.

[url]http://www.theundergroundnation.com[/url] appreciates your patience!