Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Align CSS inthe center of screen

Status
Not open for further replies.
Sort by date Sort by votes
Start with adding a doctype to the page.

Then, make sure the page validates properly.

Then, attempt to center the content on the page.



-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
On a personal note....

I often vacation in Hilton Head. Last year, it rained several days and we couldn't find anything to do. We eventually ended up at a couple museums in Savannah, Georgia. I'm pretty excited about having a place to go when it rains. [smile]

I would encourage you to target your search engine keywords for 'Hilton Head rain indoors'.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
Thanks for the reply.
I had a look at the W3c site but I am a little confused on which doc type to choose.
If I am just using HTML should I choose: HTML 4.01 doc type or should I go with the XHTML 1.0?
Any tips would be great! thanks
D
 
Upvote 0 Downvote
I've usually use this...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

Place that at the top of the HTML file. You may find that certain things will 'break', but usually it isn't too hard to fix either.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
What's the deal with this: IMages/BGMain1.jpg. It's a 960 x 850 image of solid blue.... That's a lot of unnecessary load time for users with a slow connection. If you want your page centered, you're going to have to wrap every <div> between "Logo" and "footer" in a wrapper div, and then center it. You can also apply a background color to the wrapper div to be the same color as the BGMain1.jpg - that way you aren't wasting bandwidth by loading a blank image.

So, I won't post all the content of each div from your page here, but here's the main idea:
Code: 
<style type="text/css">

div#wrapper {
   /* this sets the blue background color */
   background-color:#97d4ff;
   /* this dictates the total width of the content */
   width:960px;
   /* this tells the page to put an equal amount of margin on both sides, essentially "centering" the content */
   margin:0px auto;
}

</style>

<div id="wrapper">
   <div id="Logo"></div>
   <div id="TRGrapihc1"></div>
   <div id="LeftNavMenu"></div>
   <div id="ANewsBG"></div>
   <div id="mainContent" align="center"></div>
   <div id="indexFooter"></div>
   <div id="Packetstar"></div>
   <div id="star"></div>
   <div id="footer">
</div>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
kaht,

I'd be curious to know your thoughts on the width of the page. Currently it is set to approximately 950 pixels (for the content). This seems a little wide to me, but I wonder what you (and others) think about it.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom
 
Upvote 0 Downvote
Firstly Thanks to both of you!
As you have probably realized I am still learning and I really appreciate all the help!

Kaht: the center worked well and I agree with the replacing of the images and I had tried to do this before but had some issues.
The issues I am having now are all the <div> tags were set to position: absolute and that does not work well with the new #wrapper <div> I will manually edit them to work- I suppose I should change them to be ":reletive" so that it will stay centered on all monitors.
I am also having issue with a few of the pages not working well with Firefox!!
In the Future I will start testing in FF right from the beginning so I can keep on top of the issues!

Thanks again for your help
 
Upvote 0 Downvote
About 3 years ago, on my company's main login screen I set up a javascript function grab each user's screen resolution. When they logged in, it dropped their resolution into a table. Here's the totals before it was disabled:


[tt]width height total
------ ------ -----------
1024 768 457932
1152 864 155014
1280 1024 86596
1280 960 23502
1400 1050 6941
1280 768 4937
1600 1200 3479
1600 1024 1304
1920 1440 1053
1600 900 990
1280 720 620
1920 1200 564
1792 1344 559
1920 1080 194
1360 768 118
1856 1392 84
800 600 79
1280 800 64
1088 612 15
1680 1050 13[/tt]


As you can see, about 99.99% of our users are logging in with a resolution of at least 1024x768 or higher. For this reason, I coded with that in mind when I started redesigning everything. I made all the pages fit nicely in a 1024x768 screen, and used the method I described above to center the pages for resolutions higher than that.

I've found that setting a width of 995px for the content area of the page fits nicely on almost all browsers in a 1024x768 resolution (taking window borders and scrollbars into consideration).

When I told my wife to photoshop up a layout for our website to sell the puppies, I told her to make it fit in 800x600 since we would have a wider audience. However, if I were to do it again I would probably opt to make it fit in 1024x768 instead. There's just not nearly as many ppl using 800x600 as there used to be since monitors are getting so much bigger. Optimally, you should probably try to make your page scale to fit all ranges of resolutions, but I admit that I am just as guilty of designing my pages "in a box". For me, it gets reliable results when designing - but it has the drawback of forcing a horizontal scrollbar on people that use smaller resolutions or have their bookmark pane open in their browser.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
926
PeDa
PeDa
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top