Dreamweaver to use layers in the center page

Last Update:2017-02-28 Source: Internet

Author: User

Tags relative dreamweaver

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the center of the page to use the layer, the biggest problem is the positioning of the layer, when the display resolution changes, the layer relative to the other center element will change position. This article describes how layers are not misaligned with other centered elements.

Absolute positioning and relative positioning of layers

The absolute positioning code for the layer:

The relative positioning code for the layer:

In the center page, insert the relative positioning layer code, and the position of the layer is centered on the page. But it becomes not mobile, not easy to use.

Inserts the absolute positioning code, and when left and top contain positive and negative values, the layer cannot be centered. When the left and top properties are cleared, the layer can be centered and there is no misalignment between the other centered elements on the page.

The difference between the painting layer and the inserting layer

Use the paint layer:

In a centered page, use the code that paints the layer:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>div</title>
<body>
<div id= "Layer1" style= "Position:absolute; left:40px; top:30px; width:265px; height:75px; Z-index:1 "></div>
<div align= "center" ></div>
</body>

To use the Insert layer:

In a centered page, use the code for the Insert layer:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>div2</title>
<body>
<div align= "center" >
<div id= "Layer1" style= "Position:absolute; width:200px; height:115px; Z-index:1 "></div>
</div>
</body>

Because the code generated using the "paint layer" is not in the center of the code, the insertion layer must be used in the center page to make the layer less misaligned than the other elements.

In the center page, two methods are commonly used, and the implementation layer has no misalignment with other centered elements.

Using the Insert Layer

1. In a centered page, place the insertion point in the document, and place the insertion point in the table in the instance.

2. Select the "Insert"/"Layer" menu.

3. A layer was inserted into the document. instance, a layer is inserted in the table. In IE browser test, change the resolution, the content of the layer relative to other center elements will not occur dislocation phenomenon.

View the properties of this layer in the property panel, which clears the values of left and top.

This method is often used to make pop-up menus.

Using nesting layers

A nesting layer is a layer whose code is contained in another layer.

Before using the nesting layer, you must make some parameter settings on the layer. Select the edit/Parameter selection menu, and in the Parameter selection dialog box, select Netscape 4 compatibility: fixed size when inserting layers, so that the nesting layer can be compatible with Netscape 4 browsers. and select nesting: If nesting is used in layers.

Open the Layer panel, and do not select prevent overlapping.

Nesting layer:

In a centered page, insert a table, in the table, insert a layer, this layer relative to the table, does not occur dislocation. In this layer, you use the Insert/layer command to insert a child layer (nesting layer), regardless of how the child is moved in the page, its position is not misplaced relative to the other centered elements.

In an insertion layer, you can insert multiple nesting layers and then move the nesting layer to where you want it, so that you can use the layer as you like in the center page.

Conclusion: Center the page, make the pop-up menu, use the Insert/layer command, use the layer layout and the layer to place the content, use the nesting layer.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More