Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 657
  • Last Modified:

Vertically and Horizontally center absolute positioned CSS layout

Hi all, I just converted my table based layout to CSS and am loving the results.  The only thing I can't figure out is how to horizontally and vertically center the layout (so that it is in the middle of the page).  

Here is the layout:
http://www.greenteadesign.ca/newsite/newlayout.html

Any help would be greatly appreciated,
Hayden

(P.S. If you could tell me if anything is not looking right on any browser/platform or have any suggestions that would be great too.  Compare to table based layout at http://www.greenteadesign.ca/newsite/product.html )
0
Quarfelburg
Asked:
Quarfelburg
  • 6
  • 5
  • 2
1 Solution
 
brunoCommented:
is this what we are supposed to see??

Sorry, that URL does not exist
on this server.
0
 
brunoCommented:
i'm guessing not and don't see anything on your server similar...
0
 
QuarfelburgAuthor Commented:
hold on - youre being redirected to .com - will dupe file structure
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
QuarfelburgAuthor Commented:
should work now.
0
 
seanpowellCommented:
A very cursory scan shows that this may do it for you:

#content    
      {
      position: absolute;
      left: 50%;
      margin-left: -375px;
      top: 50%;
      margin-top: -211px;
      width: 750px;
      height: 422px;
      }

And then enclose the entire page in a div called content.

Note - if there are elements on the page that are positioned absolutely to the viewport, as opposed to a parent container, you may have problems :-)
0
 
QuarfelburgAuthor Commented:
Works. Thanks for all your help sean - this way of coding layouts beats tables hands down.

Hayden
0
 
seanpowellCommented:
Yeah?

Then what are all those tables doing in your code :-)
0
 
seanpowellCommented:
BTW - very nice furniture...
0
 
QuarfelburgAuthor Commented:
Thanks, as for the tables - I was going to ask if it was possible to use a list with display block (for thouse css mouseover effects).  Was playing around for awhile then just switched to using tables.

I'm curious - where did you get those numbers for the negative margins?
0
 
seanpowellCommented:
Divide the width/height by 2.
0
 
seanpowellCommented:
>>I was going to ask if it was possible

NEW QUESTION ALERT!!!
NEW QUESTION ALERT!!!

:-)
0
 
seanpowellCommented:
You may want to have a peek here, as an example:

http://css.maxdesign.com.au/listamatic/horizontal09.htm
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now