Absolute positioning for all elements on a site?

[zed00 0]

1. I'm using PageLines Framework 2.2.4 Dev Edition. 2. Customer wants a very fixed, brochure-like layout: no header, sb1 on left, sb2 on right, single footer. 3. I want to establish an absolutely-positioned (0,0) bkgd image which has precise graphical elements, shaded areas, color-offset areas, etc. This bkgd will be used for every page of the site. (Or I might use a slightly modified bkgd image for some pages, but you get the point.) 4. I therefore need to absolutely fix the position of sb1, content, sb2, footer, etc., and all widgets contained therein, so as to ensure that they all overlay the bkgd image precisely, regardless of browser, browser dimensions, scrolling left/right or up/down, etc. 5. I've had some success at this but most elements still float and/or shift either left/right or up/down in the browser. I've tried various Custom CSS Code to position selected elements, but this strikes me as too granular an approach and it isn't working properly in every case. 6. So, is there an easier way for me to, e.g., force all elements to sit within the exact dimensions I specify in the PageLines Layout Dimension Editor? (Horizontally at least, if not vertically.) Thanks.

[Rob 547]

Item 3.... Use Dashboard > PageLines > Site Options > Color Control to set your background. Setting the vertical to 0 brings it flush top. Item 4. ... Use Dashboard > PageLines > Site Options > Layout Editor and select [b]Static with Pixel Width[/b] which ensures that any positioning is static and non-responsive. Anything you set below is fixed. Item 5 is resolved via Item 4's solution. Item's 6... same thing. Vertical positioning can be done with CSS by adding padding-top or padding-bottom and margin-top or margin-bottom to your custom CSS code.

[zed00 0]

Thanks, R, but I did try the things you suggest when I first started the project and the sidebars and main body content still float to the right when I stretch the browser window to a dimension wider than my specific Layout Dimension width, as though they cannot be fixed to the same (0,0) registration as the bkgd image (both flush top and flush left). I don't just need fixed width, I need fixed (0,0) registration for every element also (or, I should say, fixed positioning for each element relative to that starting registration point, with no float or shift of any kind as the browser is re-sized). Is this possible globally in CSS or only one-inspected-element-at-a-time (which I've tried to do but with limited success)?

[catrina 103]

I don't think it's possible to do it globally in CSS but if you were to do it successfully with one element at a time, it'll take awhile. To better understand what you're trying to do, is there a website online that shows a good example (elements relative to a fixed registration point)?

[zed00 0]

Seems like this kind of absolutely fixed layout is rare these days, but I'll see if I can find something. (I suppose I could try using some fixed-dim tables everywhere!)

[Rob 547]

In this age of responsiveness... fixed anything is stone knives and bear skins.

[beardedavenger 158]

Yeah, this is gonna require some major CSS foo (like, some serious css foo), and that's something that you may find our Pro's useful for. Personally, if it were me, I'd look into making my own plugin or something. Aligning elements with a bg image is just not a good approach at all IMO. http://pagelines.com/pros Nick

[zed00 0]

I humbly subjugate myself to the aforeposted chastisements. :-)

[zed00 0]

I found a simple way to get exactly what I was looking for, by positioning the bkgd image to top/left and also adding the following custom CSS, which keeps all subsequently-defined relative sections and elements in static horizontal position (for an effect not unlike, say http://nytimes.com): /* Establish absolute width and position for site */ #site { position:absolute; width:1200px; top:0px; left:0px; } The above, combined with the fixed-width layout specification, does the trick.