?
Solved

Vertically and Horizontally center absolute positioned CSS layout

Posted on 2004-03-22
13
Medium Priority
?
641 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 600 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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).
Suggested Courses
Course of the Month9 days, 11 hours left to enroll

762 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