Solved

Vertically and Horizontally center absolute positioned CSS layout

Posted on 2004-03-22
13
604 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular JS Route 3 68
Alignment is not working correctly. 8 38
manage footer size 4 51
CSS: Making responsive table look nicer 7 24
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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

808 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