www. Expression-Web-Tutorial .com

Call 1.866.363.5633

 

view cart


A Place For Beginners

Has Your Layout Ever Gone Ba-Zerk?

Many times, regardless of which Expression Web Version I've used, my Layout would go completely Ba-Zerk any time I try to add a Layer.  I've heard of other people having the same problem when they try to add a div to an existing layout, or try to resize an image or iframe...etc.

Well, anytime your Layout or entire Page Flies apart in Design View, usually due to adding some type of element, like a <div> tag or Layer, etc.

Watch the Screen Capture Below

I want to show you exactly what I mean.  The following brief screen capture has no sound, but you can see what happens to my layout when I add a Layer.....  Just over 40 seconds.

video WATCH SCREEN CAPTURE (note:  there is no sound, just watch closely)

 

Notice the Actions I took to fix the Screwed Up Layout

1.  When your layout flies apart, Un-Do the last action. 

  • Click Edit -->  Choose Undo
  • or...  Look for the blue arrow curved toward the left in the formatting toolbar, click on the arrow to open the drop down menu, and choose the last action to un-do.

Sometimes, Edit-- Undo is not quite enough to fix the layout.....

2.  Next, you might  have to Refresh the Web Page to force the Layout to go back to it's normal appearance.

  • 1.  Save your page.
  • 2.  Click View --->  Choose Refresh

**note:  once you click refresh, you can no longer Un-Do any more actions.  So be sure to undo prior to refreshing.

 

Next, How Do We Get Around this Glitch??

Check back shortly for the answer....

Instead of starting over, just un-do the last action as I did in the screencast.  You may have to refresh your page as well. (also shown in the screencast)

Then what?

Well, if you want to add a layer without your entire Layout flying apart, click on split view and type the following piece of code anywhere you would like, but between the <body> and </body>.

<div id="Layer1" style="position:absolute"></div>

Since it's a layer, it does not matter where it occurs in the code.  It is not a part of the Normal Flow, rather, it is removed from the Normal Flow of the Page, thus it doesn't matter where you put in the code.

You will simply click and drag it to where you want to postion it.  But Please!!!  Set the Position Property of your Container to "Relative".

If you do not set the container to relative, then the Layer will not be positioned where you think you positioned it!!

Summary

Basically, in any situation that causes your layout to go BaZerk, the answer is to make the modification in the Code View of your Page.  This is pretty much the only way around this type of issue.

When working with Forms, you will notice things fly around in Design View.  Don't panic, just keep working.  Preview the form in a browser before making any changes.  If it looks correct in the browser, then do not make changes.  Just keep working on  your form until finished.