How to Position a Picture With Absolute in Frontpage 2003

All web pages are built using a collection of Hypertext Markup Language (HTML) elements known as tags. By default, web browsers load these tags in the order in which they appear, starting from the first line of code and working downward. This behavior is often referred to as the "normal flow." Through the use of Cascading Style Sheets (CSS) code and its absolute positioning properties, you can pull items out of the normal flow and place them anywhere on the page, regardless of where the HTML tags are located. Once you understand the proper syntax, absolutely positioning a picture using Microsoft FrontPage 2003 becomes a quick task.

Instructions

1. Open Microsoft FrontPage 2003.

2. Look to the bottom-left corner of the program window and click the "Design" button.

3. Click "File" in the top menu bar and select "Open." Locate the web page in the resulting file window and open it by double-clicking its icon.

4. Single-click the image you want to absolutely position. If you have not yet added the image to the page, first click "Insert" in the top menu bar, select "Picture" and then click "From File." Locate the image in the resulting file window and add it to the page by double-clicking its icon.

5. Look to the bottom-left corner of the program window and click the "Code" button. FrontPage switches to its "Code View" mode, highlighting the HTML tag that controls the content and appearance of the image you selected previously. The tag will resemble the following:

   <img src="file_name.jpg" width="400" height="250">

6. Click just before the ">" character at the end of the tag and press the space bar once.

7. Insert a CSS style declaration in the space you just created, so that the tag resembles the following:

   <img src="file_name.jpg" width="400" height="250" style="position:absolute; left:100px; top:50px">

   This example places your image 100 pixels from the left edge of the browser window and 50 pixels from the top edge of the window. To position the image relative to the right edge of the window, use the "right:" parameter instead of "left:" To position it relative to the bottom of the window, use the "bottom:" parameter instead of "top:"

8. Click "File" in the top menu bar and select "Save" to confirm the changes.

References

• W3 Schools: CSS Position Property
• W3 Schools: CSS How To
• Custom Guide: Microsoft FrontPage 2003 Quick Reference Card