Solved

Vertically and Horizontally center absolute positioned CSS layout

Posted on 2004-03-22
13
637 Views
Last Modified: 2011-09-20
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
Comment
Question by:Quarfelburg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
13 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 10652959
is this what we are supposed to see??

Sorry, that URL does not exist
on this server.
0
 
LVL 18

Expert Comment

by:bruno
ID: 10652976
i'm guessing not and don't see anything on your server similar...
0
 

Author Comment

by:Quarfelburg
ID: 10653073
hold on - youre being redirected to .com - will dupe file structure
0
Independent Software Vendors: 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!

 

Author Comment

by:Quarfelburg
ID: 10653089
should work now.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 150 total points
ID: 10653231
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
 

Author Comment

by:Quarfelburg
ID: 10653317
Works. Thanks for all your help sean - this way of coding layouts beats tables hands down.

Hayden
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10653353
Yeah?

Then what are all those tables doing in your code :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10653364
BTW - very nice furniture...
0
 

Author Comment

by:Quarfelburg
ID: 10653400
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10653433
Divide the width/height by 2.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10653442
>>I was going to ask if it was possible

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

:-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10653531
You may want to have a peek here, as an example:

http://css.maxdesign.com.au/listamatic/horizontal09.htm
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question