Add your company details to our Business Directory, for FREE!


Graphic Design Forums: UK forums for graphic designers » Website Design Forums: » Website Coding & Programming Forum: » Fixed image while page scrolls - how?

Reply
Old 09-12-2009, 05:54 PM   #1
Junior Member
 
Join Date: Sep 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Fixed image while page scrolls - how?

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. Bryan
brycol is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-15-2009, 09:55 AM   #2
Senior Member
 
DougBarned's Avatar
 
Join Date: Jun 2009
Location: London / U.K.
Posts: 181
Thanks: 6
Thanked 12 Times in 12 Posts
Default

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:

Code:
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
__________________
design-is.co.uk - freelance projects
dougbarned.co.uk - personal site & blog - twitter
feralinteractive.com - designer day job - twitter - facebook
DougBarned is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-15-2009, 09:22 PM   #3
Senior Member
 
JMCDesigner's Avatar
 
Join Date: Aug 2009
Posts: 222
Thanks: 11
Thanked 12 Times in 12 Posts
Default

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)
JMCDesigner is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



Flyer Printing | Print Reseller Scheme | Graphic Design | Logo Designer | Web Design UK | Graphic Design UK | Letterhead Printing
Business Card Printing | UK Business Forum | Logo Designer | NCR Pads | NCR Books | Receipt Books | Drinks Coasters | A6 Flyers | A5 Leaflets
Web Design & Development | vBulletin Skins | Small Business Websites | Leaflets | Leaflet Printing | Web Design Liverpool | Invoice Books


DISCLAIMER: All posts on this forum express the views and opinions of the author only, not the owners, staff or advertisers, hence we will not be held liable.


Powered by vBulletin®
© Copyright Jelsoft Enterprises Ltd
SEO by vBSEO 3.2.0 RC5 ©2008, Crawlability, Inc.