How to Keep Images From Moving in Dreamweaver
By configuring your image with CSS in Adobe Dreamweaver CS5.5, you can keep the image from moving on your Web page. This behavior is made possible through "Fixed Positioning," a style that is defined by creating a CSS class for the image in question. Once you have established the positioning of your image as fixed, that image will remain in the same position on your page, even if a visitor scrolls further up or down the page.
Other People Are Reading
Instructions
-
-
1
Launch Adobe Dreamweaver CS5.5.
-
2
Click "File" at the top of the window, click "Open," and then double-click the Web page containing the image that you want to prevent from moving.
-
-
3
Click the "Design" tab at the top of the window.
-
4
Scroll to the image that you want to keep from moving.
-
5
Right-click the image, click "CSS Styles," and then click "New." If you have a CSS style already attached to the image, you can also click that style instead of creating a new style.
-
6
Type a name for the CSS style into the field under "Selector Name," and then click "OK."
-
7
Click "Positioning" from the column at the left side of the window.
-
8
Click the drop-down menu to the right of "Position," and then click "Fixed."
-
9
Enter values into the "Top," "Right," "Bottom" and "Left" fields in the "Placement" section, click "Apply," and then click "OK." You do not need to enter values for all four positions. For example, if you wanted to place an image in the top left corner of the window, you could enter "1" and "1" as the values for "Top" and "Left."
-
10
Right-click the image again, click "CSS Styles," and then click the style you just created to apply it to your image.
-
11
Click "File" at the top of the window, and then click "Save."
-
1
Tips & Warnings
To achieve this image behavior in Internet Explorer 7 and 8, you must verify that you have set a "!DOCTYPE" value for your page. This information is found at the top of the page in "Code" view in Dreamweaver.
