Hi,

I am using dreamweaver MX and I'm trying to compile a newsletter. I'd like to have 2 layers, one with a graphic and the second with the text and links. This will need to be compatible with all browsers and I planned on using a fixed font so that it will not change due to a users settings. What I'd like to know is, how can I lock two layers together? So that when the browser or email is shrunk/moved, the two layers will stay together and move together? Thanks for any help you can give.

A layer is in fact an absolute positioned DIV element, meaning that it has a fixed X/Y coordinate in relation to the document. Thus layers will not move when the window is resized.

It sometimes seams that they do move when resizing the window, eg. in a centered page or a fluid design, but that's misleading. In a centered page it is the rest of the page content that's moving (towards the center).

Layers always keep their predefined X/Y coordinate, unless they are moved using JavaScript.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/

okay, how do I define the X/Y coordinates? So that I can define both layers to the same coordinates at least?

Specify the 'left' and 'top' properties for the layer.
You can do that by selecting the layer in the Layer Panel and then entering a number of pixels (eg. 50px) in the corresponding entry fields in the Properties panel.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/


Edited by - MarjaR on 06 Mar 2003 11:06:14

Hi, ok well I tried that, and it was fine testing it in i.e. however, when I sent it in an email, it was off. The bottom layer was at the left side and the top layer in its original place. They were set to the exact same coordinates. Any suggestions? please help!

I would have to see your code.
Can you upload your page somewhere and post the URL here?

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/

Hi Marja,

Well the other letter had to go out, so I'm preparing a new one. Since I'm trying to plan which way to do this I just made a test page.

Its here: www.augustdawn.com/april/april.htm

see, it seems aligned in i.e. but as soon as I send it thru Mozilla, its off.

Thanks for your help!

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Its here: www.augustdawn.com/april/april.htm

see, it seems aligned in i.e. but as soon as I send it thru Mozilla, its off.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
I've checked the page in IE6, NS6.2, NS7 and Mozilla 1 and it was fine in all these browsers. And I've looked at the code and can't see anything wrong with it.

So what exactly do you mean with "it's off"?

One note however:
I see you've declared heights (600px) for your layers, but that can get you in trouble in some browsers (and maybe in mail?)
Some browsers will ignore the height and just collapse the layer to fit its content, while other browsers really choke on a height declaration.
So you might try what happens if you remove the height properties.

Hope this helps.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/

Marja, I hope you don't mind, but I emailed you the newsletter I tested that showed up 'off' for me. This is the exact same one you viewed, only sent thru Mozilla to outlook.

btw, should I use an * for the height properties or just delete them all together?

Edited by - augustdawn on 12 Mar 2003 23:02:01

The source of that message show the following:

<pre id=code><font face=courier size=2 id=code>
&lt;DIV id=Layer1
DEFANGED_STYLE="position: absolute; width: 600px; height: 600px; z-index: 1; left: 200px; top: 20px;"&gt;&lt;IMG
height=600 src="cid<img src=../images/dmxzone/forum/icon_smile_tongue.gif border=0 align=middle> "
width=600&gt;&lt;/DIV&gt;
</font id=code></pre id=code>

Note the word 'DEFANGED_STYLE' instead of 'style'. No wonder that DIV is misaligned: it doesn't have a proper style assigned to it once it's sent through mail.
But I don't know how it got this way. Maybe something in the sending process causes this.

Are you sure you're sending the message as type HTML?

Try giving the image in the layer an absolute URL to your page (eg. www.mysite.com/images/myImage.gif). Maybe that will help.

And yes, you should just delete the height properties. <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/


Edited by - MarjaR on 12 Mar 2003 23:11:33

Yeah, it's in HTML. I see what you're pointing out and the weird thing is that when I put it in mozilla's mailer it has the style changes. This is one of many things that seems to change in the process of mailing thru mozilla.
Maybe I can find some answers from the people at Mozilla. Thanks alot for your help!

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Yeah, it's in HTML. I see what you're pointing out and the weird thing is that when I put it in mozilla's mailer it has the style changes. This is one of many things that seems to change in the process of mailing thru mozilla.
Maybe I can find some answers from the people at Mozilla. Thanks alot for your help!
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
You're very welcome.

Please post back here with the answer to this issue if you solve it.
We can all learn from that.

PS. Maybe you can try to mislead Mozilla's mailer by putting an empty DIV in the page before the real ones.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/


Edited by - MarjaR on 12 Mar 2003 23:51:09

I'll try that. Also, if anyone knows of another mail client that's comparable, that we might use as an alternative, I'd appreciate the reccomendation.

so i use a ventered page! and the position of the layer in fact doesn't chage bur because it is centered the other normal html objects on the website (tables and stuff) change is there no way to let te layers change with this?



Edited by - reinoudvs on 19 Mar 2003 15:24:44

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
so i use a ventered page! and the position of the layer in fact doesn't chage bur because it is centered the other normal html objects on the website (tables and stuff) change is there no way to let te layers change with this?
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Go to www.projectseven.com and download the free SnapLayers extension. It will allow you 'snap' your layer to something in the centered page (eg. an image), and your layer will then move with that image.

Apply SnapLayers twice to the the &lt;body&gt; tag: once for the onLoad event, and once for the onResize event.


--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/