PDA

Click to See Complete Forum and Search --> : center content in 1024X768??

Moomancow
05-21-2003, 10:24 PM
Here's one for all you HTML wizards...(then again, it might be really easy and simple, shows how much I know!)...

How can I center my content, so that when a person with a screen resolution of 1024 X 768 views a web site, it is centered on their screen, with equal amounts of blank space on the left and right side of the content?? It would be designed so it is centered in a screen of 800 X 600 resolution also, but you wouldn't be able to tell it was centered, because the content would take up this entire screen resolution.

Currently, I only know how to design a page left aligned, and when viewed through a 800 X 600 it looks great : it takes up all the screens real estate. However, when viewed through a 1024 X 768 screen resolution, my design left aligns the content and leaves alot of blank space on the right hand side of the screen. I think this looks bad.

Any ideas on how to center my content? It better not be so simple as to just encapsulate all my content in a <center> and </center> tag.

Thanks for any help in advance!
khalidali63
05-21-2003, 11:21 PM
take a look at this link,the contents are centerd on any resolution you may see it.(provided the browser supports CSS1)

http://68.145.35.86/skills/javascripts/UltimateFormValidator.html
AdamGundry
05-22-2003, 03:14 AM
Khalid, that link is down for me, but I presume this is the CSS you meant:

body { text-align: center; }

Adam
Moomancow
05-22-2003, 06:31 AM
How can I implement CSS to center my content?? Any great tutorials you guys would know of?
DaveSW
05-22-2003, 06:35 AM
http://www.w3schools.com/css/default.asp

(w3 schools to save the day LOL)
DaveSW
05-22-2003, 06:37 AM
And if you want to use that code quickly just use

<style type="text/css">
body { text-align: center; }
</style>


in the head of your page

dave
AdamGundry
05-22-2003, 06:37 AM
Yes, check out the W3Schools tutorial.

You can either apply this CSS in the tag, head or an external stylesheet.

In the body tag: <body style="text-align: center">

In the head:
<style type="text/css">
body { text-align: center; }
</style>

In an external stylesheet (text file called something.css):
body { text-align: center; }
then link using this:
<link rel="stylesheet" type="text/css" href="something.css">

Adam