6 Replies - 2092 Views - Last Post: 16 December 2006 - 06:57 PM

#1 bazookatooth   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 25-October 06

css -- using absolute positioning AND aligning in center of page

Posted 12 December 2006 - 10:31 AM

Ok... take a look -> HERE


I have created the entire layout using absolute positioning. I am now happy with the design... however, I would like for it to load in the center of a viewer's browser window. Seeing that I've already used absolute positioning to layout EVERYTHING on the page, I don't know how to go about this..

Someone help please?

Is This A Good Question/Topic? 0
  • +

Replies To: css -- using absolute positioning AND aligning in center of page

#2 bazookatooth   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 25-October 06

Re: css -- using absolute positioning AND aligning in center of page

Posted 12 December 2006 - 06:41 PM

what, no "RTFM!" or anything?
Was This Post Helpful? 0
  • +
  • -

#3 bazookatooth   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 25-October 06

Re: css -- using absolute positioning AND aligning in center of page

Posted 13 December 2006 - 08:32 PM

this can't possibly be THAT hard.
Was This Post Helpful? 0
  • +
  • -

#4 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 99
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: css -- using absolute positioning AND aligning in center of page

Posted 13 December 2006 - 08:35 PM

someone will answer if they know it.
stop boosting your thread.
Was This Post Helpful? 0
  • +
  • -

#5 bazookatooth   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 25-October 06

Re: css -- using absolute positioning AND aligning in center of page

Posted 13 December 2006 - 11:26 PM

View Postcapty99, on 13 Dec, 2006 - 08:35 PM, said:

someone will answer if they know it.
stop boosting your thread.



ok.. i'll just let you do it for me, genius. thanks.
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: css -- using absolute positioning AND aligning in center of page

Posted 16 December 2006 - 05:53 AM

You can absolutely position elements relative to a container element instead of the viewport by surrounding all of the absolutely positioned content with a relatively positioned element. Example:

div#container { position: relative; margin: 0 auto; }

With that, you can set dimensions on and center the container element and all of your absolutely positioned content inside of it will be absolutely positioned relative to the div#container element (instead of the viewport).

Note that you DO need to set the dimensions since they will effectively be zero by zero because absolutely positioned content is removed from the normal document flow and the container element will thus not take into account all of the elements it “contains” to define its dimensions dynamically. This means that you need to explicitly specify exactly how wide and tall your container element should be for it to be drawn at all. If you have trouble seeing its boundaries, assign it a noticeable background color.

Note also that in order for this technique to work, you’re probably going to need to fix some errors in your code since it’s invalid. Most critically, you need a document type declaration; you seem to be using XHTML, but the declaration indicating that the document is in fact XHTML is missing. As a result, your document is being rendered in backward‐compatibility (or quirks) mode. In quirks mode, the browser intentionally renders the page incorrectly in an attempt to display poorly coded legacy documents as originally intended.

I briefly experimented with your code using Firefox’s Web Developer Extension and couldn’t get the technique I described to work, so I assume that your invalid code will need to be fixed first. Make sure that you validate the document after you’ve added a doctype declaration so that you can see all of the errors that need fixing. Additionally, if you still don’t comprehend how the technique works, try looking up “making the absolute relative” in a Web search.

This post has been edited by Arbitrator: 16 December 2006 - 05:54 AM

Was This Post Helpful? 0
  • +
  • -

#7 bazookatooth   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 25-October 06

Re: css -- using absolute positioning AND aligning in center of page

Posted 16 December 2006 - 06:57 PM

Thanks, man... I really appreciate it. I'll post again after i figure out what's wrong and get it working.


View PostArbitrator, on 16 Dec, 2006 - 05:53 AM, said:

You can absolutely position elements relative to a container element instead of the viewport by surrounding all of the absolutely positioned content with a relatively positioned element. Example:

div#container { position: relative; margin: 0 auto; }

With that, you can set dimensions on and center the container element and all of your absolutely positioned content inside of it will be absolutely positioned relative to the div#container element (instead of the viewport).

Note that you DO need to set the dimensions since they will effectively be zero by zero because absolutely positioned content is removed from the normal document flow and the container element will thus not take into account all of the elements it “contains” to define its dimensions dynamically...............

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1