Solved

Vertically and Horizontally center absolute positioned CSS layout

Posted on 2004-03-22
13
631 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
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!

 

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
 

Author Comment

by:Quarfelburg
ID: 10653534
0

Featured Post

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!

Question has a verified solution.

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

Suggested Solutions

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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

738 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