Fixed image while page scrolls - how?

[brycol]

I'm using Dreamweaver and want to have a picture on the left of my page which will stay in position while the page scrolls to show the text on the right hand side of the page. This will be common on a number of different pages. I designed the web page using tables but I'm getting nowhere. I tried to use CSS with a div tag in Dreamweaver but cannot see how to get the locating position set. From a CSS tutorial I can see code to perhaps do the job but cannot see how to generate this code in Dreamweaver other than by writing it in Notepad and then cutting and pasting it into Dreamweaver which seems very inefficient. To date I have not been successful using that technique either.

Any help or tips would be much appreciated. :icon_confused: Bryan

 

[DougBarned]

Righty, yes - CSS layout is the way to go, then wrap the image you want in a div, or assign a class or ID to it. I'd probably use an class. You will wan to to use the position:fixed; property. (Have a look here if you need to support IE6)

Without knowing the specifics, I can't give you exact code, but reading these pages might help:

BrainJar.com: CSS Positioning
Keeping an element static on the page

Basically for all modern browsers, you can fix the position by using something like:

img.fixed 
     {
     position:fixed; 
     top:0; 
     left:0;
     }

This will keep it at the top left whilst scrolling.

As to how to do this in dreamweaver, I only use the code view, so can't help I'm afraid. I'm sure there must be an easy way though - which version of dreamweaver are you using? I'll have a look around...

/Doug

 

[JMCDesigner]

You can use dreamweaver to make css stylesheets when you open a new file, just open as stylesheet. It will give you codehints but you will mostly have to write it yourself(like in html code view)