Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Project Seven dot com

Layout Designer 2 by PVII - Screen

The interface is designed to allow you to easily combine many alignment events in a single behavior session. You can add or delete as many events as you like, you can even change the order of the alignment events. Simply select an alignment method and Layout Designer will automatically place the layer(s) in the correct position on the page- relative to another layer. The Layout Designer automatically realigns your layers when the browser window is resized, so there's no need to apply separate resize events... and the Netscape Resize Fix should not be used.

Download the Layout Designer 2 by PVII extension

Note:Opera 5x+ does not support the onresize event, so the built-in resize handling will not work. Use our Opera Resize Fix extension to handle this.

PVII Layout Designer2 is an extension suite and contains two behaviors:

  1. PVII Layout Designer2 - Layer (aligns layers to other layers)
  2. PVII Layout Designer2 - Screen (aligns layers relative to the browser window's dimensions)

Overview

PVII Layout Designer2 - Screen is designed to automatically position one or more layers relative to the browser window dimensions. Layers can be aligned:

  • Left edge of the window
  • Right edge of the window
  • Bottom edge of the window
  • Vertically Centered in the window
  • Horizontally Centered in the window
  • Horizontally and Vertically Centered in the window

Positioning can be further controlled by defining a Margin Amount for each layer as well as a Minimum Left position for right-aligned layers to prevent content overlap.

The Layout Designer behaviors are designed to be applied to the <body> tag, onLoad event. This allows the script to set up the positioning when the page first loads so that all of the layers are in the intended locations. You can also apply the Layout Designer events to other event triggers on your page to allow for user interaction. For example, an entire page layout can be changed with one Layout Designer event.

Note: To access the <body> tag to apply this behavior, click the <body> tag at the bottom left of the Dreamweaver window (the status bar), then open the Behavior panel and confirm that it reads: Behaviors - <body> Actions.

Creating a Layout Designer 2 - Screen behavior

  1. Select (click) an element to act as the behavior trigger (usually the <body> tag).
  2. Click the plus sign (+) on the Behaviors Panel.
  3. Choose Studio VII - CSS - PVII Layout Designer2 -Screen to open the interface.
  4. Select a Layer Id.
  5. Select an Align Method.
  6. Enter your desired options.
  7. Click OK to apply the revised behavior.

If you want to add more alignment events, Click the Add button and repeat the above steps. If you want to Delete an alignment event, select the line you wish to delete and then click the Delete Item button.

You can change the order of the events by using the Up or Down buttons.

Modifying an existing PVII Layout Designer2 -Screen behavior

  1. Select the element that contains an existing PVII Layout Designer2 behavior.
  2. Double-click the Layout Designer2 behavior in the Behavior Panel to open the user interface.
  3. Select the line you wish to modify and select or enter your changes.
  4. Optionally add, delete or change the order as desired.
  5. Click OK to apply the revised behavior.

The Interface:

The PVII Layout Designer 2 - Screen interface allows easy and intuitive event setup and editing.

User Interface

Alignment Events

This listing shows all defined alignment events. Each alignment event shows the layer name (id) that you are aligning followed by the alignment method, the margin, and the Min Left position. You can add lines (as many as you please), delete lines, and move positions up or down. To edit an alignment event, click on its line, select a Layer Id, Align Method, and set the margin or Min Left properties if applicable.

Layer (Div) Id:

All of the absolutely positioned layers (with valid IDs) on your page will be listed here. By default, the first layer in this list is always selected when you create a new line (alignment event). Select a layer from this listing. The Alignment Events box will immediately update to reflect your selection.

Alignment Method

Select an alignment method:

Left Window Edge

The layer will be positioned relative to the browser window's left edge. This is really equivalent to setting the Left Pos of the layer, but is included it here to allow you to incorporate all of your layer positioning into one event.

Center Horizontally

The layer will be centered horizontally. When this method is selected, the Margin box serves as a Group Amount entry. This allows you to center a layer by more than its own width. For example, if you want two side-by-side layers centered on the page you would center the first layer and enter the width of the second layer in the Group Amount box. This will place the layer as if its width were the combined width of both. If you then align the second layer to the right edge of the first layer (using Layout Designer -Layer) the two layers are centered, based on their combined width (as if they were a single entity).

Note: To center a group of three layers, center the first (leftmost) and use the combined width of the second and third as your "Group Amount". Then use Layout Designer- Layer to align the second layer to the first, and the third to the second.

Right Window Edge

The layer will be positioned relative to the browser's right edge. The Margin amount will always be applied to the right edge of the layer, defining the distance between the right edge of the layer and the browser window edge. The Min Left box can be used to define the minimum left position for this layer to avoid any overlap with other page content when the browser window width is reduced.

Center Vertically

The layer will be positioned in the vertical center of the browser window, based on its rendered height and the browser window height. When this method is selected, the Margin box serves as a Group Amount entry. This allows you to center a layer by more than its own height. For example, if you want two stacked layers centered on the page you would center the first layer- then enter the second layer's height in the Group Amount box. This will place the layer as if its height were the combined height of both layers. If you then align the second layer to the bottom edge of the first layer (using Layout Designer -Layer) the two layers are centered, based on their combined height (as if they were a single entity).

Center in Window

This method will center the layer in the absolute middle of the browser window, both horizontally and vertically. When this method is selected, the Margin box serves as the Horizontal Margin Amount and applies equally to both the left and right sides of the layer. The Min Left box assigns a Vertical Margin to both the top and bottom of the layer. Use these margin Amounts when you want to center a layer but also need space at the top and bottom for other layers to be positioned (using LayoutDesigner -Layer).

Bottom Window Edge

The bottom of the layer will be positioned relative to the bottom edge of the browser window. The Margin amount will always be applied to the bottom edge of the layer, defining the distance between the bottom edge of the layer and the bottom window edge

Margin

This value is used to control the distance between the browser window edge and the layer edge. If the Left method is selected, the margin is the distance between the left browser window edge and the left edge of the layer. If the Right method is selected, it is the distance between the right edge of the layer and the right browser window edge. When the Centered Horizontally or the Centered Vertically method is selected, the Margin box is used to enter a Group Amount (see the Center methods). When the Centered in Window method is selected, the Margin is the distance between the left and right layer edges to the left and right window edges.

Min Left

This box is only active when the Right alignment method is selected. There are times when the width of the browser window may be so narrow that the layer will overlap other content on the page. This allows you to enter the layer's absolute minimum left position. The layer will never be positioned further to the left than this position… no matter how narrow the browser window becomes. When the Centered in Window method is selected, this box is used to enter the Vertical Margin amount.

Add Button

Click this button to add a new event line. You can add as many events as you like. Whenever you create a new line, the default selections will be supplied automatically. Be sure to make selections and choose option for each new line you add.

Delete Button

Select the line you wish to delete and click the Delete button to remove it. You can delete as many lines as you like, although the behavior will insist on keeping at least one line. If you try to delete the last line, the behavior will restore this line to the preset defaults.

Up Button

Select an Alignment Event and click the Up button to move it upward in the list. Each click will move an event up one line at a time.

Down Button

Select an Alignment Event and click the Down button to move it downward in the list. Each click will move an event down one line at a time.

Layout Designer2: Layer | Screen | back to main listing