Solved

Vertically and Horizontally center absolute positioned CSS layout

Posted on 2004-03-22
13
583 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
  • 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

707 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now