Snippet code placement in dreamweaver page

SnippetMaster Support Forums
Return to main website

September 13, 2011, 12:26:07 AM
* Show unread posts since last visit.
* Show new replies to your posts.

Welcome, Guest. Please login or register.
Did you miss your activation email?
September 13, 2011, 12:26:07 AM

I'm having trouble placing the snippet code within dreamweaver code. Unless I stay within 2 </div> tags the layout gets scrambled after edit. Is it possible to make a continuous area of a dreamweaver page editable by just placing the begin and end snippet code once on the page? I don't know where exactly to put it. Do you have any materials pertaining to the proper placement of the snippet code?

Here's a copy of the code that I'm having problems with. I'm trying to make the two images and text editable:

<body>
<div id="Layer1" style="position: absolute; left: 82px; top: 31px; width: 700px; height: 30px; z-index: 2; vertical-align: middle"><img src="HpImages/top.gif" width="700" height="40" /></div>
<div id="Layer2" style="position: absolute; left: 655px; top: 167px; width: 140px; height: 200px; z-index: 3"><img src="HpImages/Rascal.jpg" width="145" height="218" /></div>
<div class="style1" id="Layer4">
<div align="justify" class="style2">
<div align="justify" class="style6">It’s like it all came together and I am in love. With the pastels, I am able to achieve the light that seemed to elude me with oils.</div>
</div>
</div>
<div id="Layer9"><img src="HpImages/riverbend.jpg" width="163" height="222" /></div>

Usually, the reason page content will "get scrambled" is because the Snippet Tags are invalidly nested within div tags.. (ie: The starting snippet tag is located above a different number of div tags then the ending snippet tag, etc...)

From what I can see here, your Ending Snippet Tag needs to be on the other side of that last </div> you pasted. (Otherwise, you are placing the snippet tag "inside" the div tag that you are opening with th Opening Snippet Tag.)

I hope that makes sense.

Let me know.

I made the change you suggested but the page is still scrambled after editing. Here's a copy of the code after the change.

<body>
<div id="Layer1" style="position: absolute; left: 82px; top: 31px; width: 700px; height: 30px; z-index: 2; vertical-align: middle"><img src="HpImages/top.gif" width="700" height="40" /></div>
<div id="Layer2" style="position: absolute; left: 655px; top: 167px; width: 140px; height: 200px; z-index: 3"><img src="HpImages/Rascal.jpg" width="145" height="218" align="absmiddle" /></div>
<div class="style1" id="Layer4">
<div align="justify" class="style2">
<div align="justify" class="style6">It’s like it all came together and I am in love. With the pastels, I am able to achieve the light that seemed to elude me with oils.</div>
</div>
</div>
<div id="Layer9"><img src="HpImages/riverbend.jpg" width="163" height="222" align="absmiddle" /></div>

This is the problem here:

<div id="Layer2" style="position: absolute; left: 655px; top: 167px; width: 140px; height: 200px; z-index: 3"><img src="HpImages/Rascal.jpg" width="145" height="218" align="absmiddle" /></div>

Your opening Snippet Tag is "inside" a DIV, and so when the editable code is loaded into the editor, it starts with this:

<img src="HpImages/Rascal.jpg" width="145" height="218" align="absmiddle" /></div>

(Notice the ending </div> tag.)

So the editor does not know what to do with this "leftover" closing div tag, and since it tries to produce compliant code.. it automatically creates an opening div tag to match the close one it found. This is then messing up your code when it's all added back to your page.

The solution is to adjust how you want your editable regions to be located. You might need to have two editable areas in this situation. Or you could move the editable region "up" one div level....

I hope that makes sense. basically, whatever code you have specied as "editable" inside the Snippet Tag region must be valid code.

Let me know. Smile

Thank you, that worked. I appreciated your quick feedback. Doug