Topic awaiting preservation: Noob question I know: Centering on page $Pages that link to <a href="https://ozoneasylum.com/backlink?for=23246" title="Pages that link to Topic awaiting preservation: Noob question I know: Centering on page" rel="nofollow" >Topic awaiting preservation: Noob question I know: Centering on page\$

Author	Thread
Arnitald Bipolar (III) Inmate From: Germany Insane since: Apr 2004	posted 09-09-2004 20:33 I'd like to center my content (everything, tables, divs, all body childs) in the vertical and horizontal center of the page. How can I do it since BODY doesn't have an align attribute? Can I stretch some DIV or TABLE to the whole page? I'll appreciate every answer.
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 09-09-2004 20:58 basic 3column design with spans Just used to show the idea. basic 3column design with divs This is actually usefull. Both are scalable and and tested within IE and FF. ------------------------------ Support Justice for Pat Richard
Iron Wallaby Paranoid (IV) Inmate From: USA Insane since: May 2004	posted 09-09-2004 21:15 If you want EVERYTHING centered... not 3 columns, there is really only one way to do it. (Centering horizontally is easy... vertically, not so much.) code: <style> #maindiv { position: absolute; left: 50%; top: 50%; width: 640px; height: 480px; margin: -240px 0px 0px -320px; } </style> ... <div id="maindiv"> ... content ... </div> The margins are made to be exactly -1/2 of the height and width, respectively. This requires a known width and height, of course. "Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke "Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling (Edited by Iron Wallaby on 09-09-2004 21:17)
Arnitald Bipolar (III) Inmate From: Germany Insane since: Apr 2004	posted 09-10-2004 14:41 Ok I won't need a style sheet for this simple page (portal page). Thanks!
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 09-10-2004 22:50 You don't ??? Do you still uses pages without stylesheets?? Changing font tags in twenty different places, looking for that one h2 tag with that different color.... If so good luck to you and here are some headache pills i don't need anymore ------------------------------ Support Justice for Pat Richard
Iron Wallaby Paranoid (IV) Inmate From: USA Insane since: May 2004	posted 09-11-2004 02:08 It's also wise to separate content/structure and appearance. "Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke "Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 09-11-2004 14:13 of coruse, you could always do that 'half the width and height in the margins' trick with percentages...so say your div is 50% wide, you'd make your left and right margins 25%
Iron Wallaby Paranoid (IV) Inmate From: USA Insane since: May 2004	posted 09-11-2004 15:49 I find that doesn't work so well, since then you have to build a COMPLETELY fluid interface. If you want to do so, go for it. But it's tough to make it look good and scale well. "Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke "Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 09-11-2004 15:56 When building an interface it can look good, it can scale well and it can work in all browsers perfectly. Pick two
Iron Wallaby Paranoid (IV) Inmate From: USA Insane since: May 2004	posted 09-11-2004 16:52 Not everyone is capable of doing such things, however. "Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke "Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling
Hebedee Paranoid (IV) Inmate From: Maryland, USA Insane since: Jan 2001	posted 09-12-2004 03:51 http://www.simplebits.com/notebook/2004/09/08/centering.html
jive Paranoid (IV) Inmate From: Greenville, SC, USA Insane since: Jan 2002	posted 09-12-2004 04:22 ok here we go. <html> <head> <title>centering</title> <style> body { text-align: center; /for IE 5.0 browsers/ } .container { margin: auto; /for standard compliant browsers/ text-align: left; /* to left align your content/ width: 500px; /or whatever you want it to be/ border: 2px solid #00000 /just so you can see the box is centered*/ } </style> </head> <body> <div class="container"> all your stuff goes here. </div> </body> </html> of course Hebedee's link explains this perfectly. Great CSS links: http://www.sitepoint.com/forums/showthread.php?t=143801 (Sitepoint CSS forums) http://www.pmob.co.uk/temp/3colfixedtest_4.htm (centered two and three column layout demos) http://www.csszengarden.com (same page like 200 styles) http://www.alistapart.com (great articles) http://www.mezzoblue.com (David Shea) good luck.
Pugzly Paranoid (IV) Inmate From: 127.0.0.1 Insane since: Apr 2000	posted 09-12-2004 23:45 A perfect example of Iron Wallaby's first solution can be seen at my home page. http://www.runningwolf.com/ - I've been using that method for years and it holds up well.

Topic awaiting preservation: Noob question I know: Centering on page\$

Author

Thread

Arnitald
Bipolar (III) Inmate

From: Germany
Insane since: Apr 2004

posted 09-09-2004 20:33

I'd like to center my content (everything, tables, divs, all body childs) in the vertical and horizontal center of the page. How can I do it since BODY doesn't have an align attribute? Can I stretch some DIV or TABLE to the whole page?
I'll appreciate every answer.

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 09-09-2004 20:58

basic 3column design with spans Just used to show the idea.
basic 3column design with divs This is actually usefull.
Both are scalable and and tested within IE and FF.

------------------------------
Support Justice for Pat Richard

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted 09-09-2004 21:15

If you want EVERYTHING centered... not 3 columns, there is really only one way to do it. (Centering horizontally is easy... vertically, not so much.)

code:

<style>

   #maindiv {

      position: absolute;

      left: 50%;

      top: 50%;

      width: 640px;

      height: 480px;

      margin: -240px 0px 0px -320px;

   }

</style>



...



<div id="maindiv">

   ... content ...

</div>

The margins are made to be exactly -1/2 of the height and width, respectively. This requires a known width and height, of course.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

(Edited by Iron Wallaby on 09-09-2004 21:17)

Arnitald
Bipolar (III) Inmate

From: Germany
Insane since: Apr 2004

posted 09-10-2004 14:41

Ok I won't need a style sheet for this simple page (portal page). Thanks!

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 09-10-2004 22:50

You don't ???
Do you still uses pages without stylesheets?? Changing font tags in twenty different places, looking for that one h2 tag with that different color....
If so good luck to you and here are some headache pills i don't need anymore

------------------------------
Support Justice for Pat Richard

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted 09-11-2004 02:08

It's also wise to separate content/structure and appearance.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 09-11-2004 14:13

of coruse, you could always do that 'half the width and height in the margins' trick with percentages...so say your div is 50% wide, you'd make your left and right margins 25%

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted 09-11-2004 15:49

I find that doesn't work so well, since then you have to build a COMPLETELY fluid interface.

If you want to do so, go for it. But it's tough to make it look good and scale well.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 09-11-2004 15:56

When building an interface it can look good, it can scale well and it can work in all browsers perfectly.

Pick two

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

posted 09-11-2004 16:52

Not everyone is capable of doing such things, however.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Hebedee
Paranoid (IV) Inmate

From: Maryland, USA
Insane since: Jan 2001

posted 09-12-2004 03:51

http://www.simplebits.com/notebook/2004/09/08/centering.html

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

posted 09-12-2004 04:22

ok here we go.

<html>
<head>
<title>centering</title>

<style>
body {

text-align: center; /*for IE 5.0 browsers*/

}

.container {
margin: auto; /*for standard compliant browsers*/
text-align: left; /* to left align your content*/
width: 500px; /*or whatever you want it to be*/
border: 2px solid #00000 /*just so you can see the box is centered*/
}

</style>

</head>

<body>

<div class="container">

all your stuff goes here.

</div>

</body>

</html>

of course Hebedee's link explains this perfectly. Great CSS links:
http://www.sitepoint.com/forums/showthread.php?t=143801 (Sitepoint CSS forums)
http://www.pmob.co.uk/temp/3colfixedtest_4.htm (centered two and three column layout demos)
http://www.csszengarden.com (same page like 200 styles)
http://www.alistapart.com (great articles)
http://www.mezzoblue.com (David Shea)

good luck.

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted 09-12-2004 23:45

A perfect example of Iron Wallaby's first solution can be seen at my home page. http://www.runningwolf.com/ - I've been using that method for years and it holds up well.