AP div tag

The difference between a div tag and an AP div tag is that an AP div tag gives an absolute positioning on the page.
The advantage is that, whatever the size of the monitor of the visitor of your site, the AP div tags stand on the position where you have placed.
The disadvantage of an AP div tag is when you want it centered on the page, this is virtually impossible. So just use an AP div tag when you’re sure about the position.

To add an AP div tag to your page, click the “Draw AP Div” button in the toolbar.
Click and drag on the place in your document where you’d like to have.
You can always change the dimensions in the properties window or by clicking and dragging the blocks on the edge of the AP div tag.
To change position, click and drag the icon in the upper left corner of the AP div tag, or use the headings “L” and “T” in the properties window.

To insert an image in an AP div tag, place the cursor in the div tag and click “Insert” in the menu bar. Select “Image” in the drop-down menu and navigate to the image on your hard disk. Select it and click OK.
If your image is already in your site folder, you can click and drag it to the AP Div tag.
To add text, place the cursor in the AP Div tag and start typing.

When working with different AP Div tags in your document, these all have one Z value.
This can be seen in the AP Elements panel.
The Z-value determines the position of the AP Div tag in depth.
Compare it with layers in Photoshop. As a matter of fact, these are also called layers in the earlier versions of Dreamweaver.

To change this value, we change the position (ie depth) of the AP Div tag.
A second way to change the depth of an AP div tag is by clicking and dragging in the AP Elements panel to the position you want.

 

Absolute to relative

Centering an AP div tag on our pages is impossible.
What we can do is to place an absolute div tag relative to a centered div tag.

For this we need two things.
The first, an absolute div tag (<div id=”absolutely”></div>) in our source code within the centered div tag (<div id=”container”></div>) .Then double click the absolute div tag in the CSS Styles panel.

This opens the “CSS rule Definition” dialog.
Choose the category “Positioning” and in the “Type:” select the option “relative”.
To complete the section on “Placement” you need a little arithmetic if you wish to get the absolute div in the middle of the page.
This is because the absolute div tag is no longer positioned on the page, but in the “container” div.
Click the OK button when you’re done. Do not worry, if it later becomes apparent that the position did not go as per your wishes, you can always change the absolute div tag, or rather the relative div tag, by double clicking in the panel. ..

As you can see in the image below, the “position” in the “Properties for # absolute” panel has now changed to “relative”.

View this page in your browser window now, you will see that the AP div tag, which has been changed in a relative div tag will now be displayed centered.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats