Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 653
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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