How to fix a static object using .css

**steve.ledger** · 11 June 2010, 07:15 AM

Required: Web Designer 6
Download File: static-object-with-css.web (104.5 KB)
► Demo

How to fix a static object using .css

==============================
Create a placeholder and name it <head>
In the code area add:

<style style="text/css">
#fixed{
position:fixed;
}
</style>

Create the graphic to be fixed and name it: fixed
Also add the name: NoPageClipping to the same graphic
==============================

.

**zaphodeist** · 11 June 2010, 07:30 AM

Thanks Steve

One problem though, why is it displacing like this .... ?

**steve.ledger** · 11 June 2010, 07:36 AM

No problem at all John. It's exactly where it is supposed to be

The static object is supposed to be fixed (stuck) top left of the browser window always. No matter how wide the browser window or the scrolling of the general page content.

**zaphodeist** · 11 June 2010, 07:44 AM

Ah, gotcha! Thanks. Thought it was something I'd done

**steve.ledger** · 11 June 2010, 07:47 AM

Maybe this makes more sense John ?

► http://talkgraphics.magix.net/public...signer/static/

**zaphodeist** · 11 June 2010, 07:59 AM

Yeah, I get the idea now ... just not very awake yet. Thinking on it, object could be very useful for me as a floating 'home' - or wherever - link on long pages of text instead of getting user to scroll back up or down or using space on the page itself. Thanks

**Boy** · 11 June 2010, 12:36 PM

Thanks very much, Steve, very useful!

**Sebastian** · 11 June 2010, 05:00 PM

Hi,
keep in mind, that the fixed position is depend of the position of the graphic on your page. If you place the graphic at x=200px and y=200px on Sledgers example, the fixed graphic will be placed at 198px from left and 161px from top of the browser window (viewport). You can place the graphic somewhere on your page and override this position if you place the following code in your <head> placeholder:

This place the fixed graphic at 200px from left and 200px from top.

Sebastian

**avidivx** · 21 June 2010, 02:02 AM

Xara Xtreme can do ???

sample please

**steve.ledger** · 21 June 2010, 02:14 AM

Sorry, no.
WD6 and above

EDIT: Actually you can use this if you have the WD5 tweakset installed in Xtreme 5. You need the nopageclipping tweak.

Thread: How to fix a static object using .css

Thread Tools

Display

How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Re: How to fix a static object using .css

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions