• 0
Sign in to follow this  
Followers 0

Absolute positioning for all elements on a site?

Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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)?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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)?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0