Jump to content
xisto Community
ctbrons

Centering Page Of Html At Various Display Widths Viewing Screen Shots No Matter Resolution

By ctbrons, in Programming

Recommended Posts

ctbrons    0

ctbrons
Posted

I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How do I make the page always appear in the middle?I have seen many sites set up that will adjust accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the website: http://www.faithcity.org/test.html.

Notice from jlhaslip:
Moving to the html Topic

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

Well, if you have a table it's easier. The main table, you could just use the align attribute and give it a value of "center". That would do it. But, if you're not a table lover, then maybe someone else can suggest a way.

Share this post

Link to post
Share on other sites

michaelper22    0

michaelper22
Posted

If the whole page is in a div tag, then add the following CSS style to it:

text-align: center;
This is assuming that the page has a preset width.
Or try this:
<div style="text-align: center;">PAGE CONTENT HERE</div>
That will center anything within the <div> tag.

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

The css you have used is this:

<!-- /* */body {margin: 0;padding: 0;position: top center;background: silver;font: 80% verdana, arial, sans-serif;}
In order to center the page regardless of the screen width, use auto for the left and right margins. And text-align:center for some of the Older browsers. Like this:
<!-- /* */body {margin: 0 auto;text-align:center; // for older browserspadding: 0;background: silver;font: 80% verdana, arial, sans-serif;}
And I have removed the (position top,center), also, in order to remove any potential conflicts.

Share this post

Link to post
Share on other sites

Dragonfly    0

Dragonfly
Posted

If you are using separate tables for each items, meaning no tables are inside other tables then all the tables should have align="center" tags in order for all the contents to go to the center in any resolutions.

Share this post

Link to post
Share on other sites

ctbrons    0

ctbrons
Posted

The css you have used is this:

<!-- /* */body {margin: 0;padding: 0;position: top center;background: silver;font: 80% verdana, arial, sans-serif;}
In order to center the page regardless of the screen width, use auto for the left and right margins. And text-align:center for some of the Older browsers. Like this:
<!-- /* */body {margin: 0 auto;text-align:center; // for older browserspadding: 0;background: silver;font: 80% verdana, arial, sans-serif;}
And I have removed the (position top,center), also, in order to remove any potential conflicts.
I have made some adjustments, but it is still not completely correcting the problem. When viewing in the 800x600 I have to scroll to the right, but I cannot figure out how to eliminate that, and keep the rest of the site looking accurate.

Share this post

Link to post
Share on other sites

WindAndWater    0

WindAndWater
Posted (edited)

Your problem's probably in the menu code

#menu {position: absolute;top: 5;left: 135;z-index: 100;[b]width: 100%;[/b]}
Many browsers won't use margin: auto correctly unless the width is fixed in pixels. I'm also not sure whether margin: 0px auto (what jlhaslip suggested) is valid css or not -- it could be, I have no clue. I tend to use either all the margins in the margin command, or use them individually. i.e. I'd have
margin: 0px auto auto auto;ormargin-top: 0px;margin-right: auto;margin-left: auto;
but that might just be a personal preference.

Edit: I think you can also get away with using css instead of javascript for your menus, using the :hover attribute.
Edited by WindAndWater (see edit history)

Share this post

Link to post
Share on other sites

Tyssen    0

Tyssen
Posted

I'm also not sure whether margin: 0px auto (what jlhaslip suggested) is valid css or not

It is. In CSS, top mirrors bottom and right mirrors left, so if top and bottom are the same and left and right are the same, you only need to specify two values. The only browser that doesn't quite cope with that is Mac IE5 where you often have to specify both margin-left: auto and margin-right: auto even though they're the same.

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

Here, catch ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">  <title>Test</title><script type="text/javascript"><!--window.onload=montre;function montre(id) {var d = document.getElementById(id);for (var i = 1; i<=10; i++) {if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}}if (d) {d.style.display='block';}}//--> </script>  <style type="text/css"><!-- body {margin: 0 auto;padding: 0;background: silver;font: 80% verdana, arial, sans-serif;}dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}#menu {position: absolute;top: 5;z-index: 100;}#menu dl {float: left;width: 8em;background: #7F7C75;margin: 0 1px;}#menu dt {cursor: pointer;text-align: center;font-weight: bold;background: #7F7C75;border: 1px solid gray;}#menu dd {border: 1px solid gray;}#menu li {text-align: top center;background: #7F7C75;}#menu li a, #menu dt a {color: #FEF2DC;text-decoration: none;display: block;height: 100%;border: 0 none;}#menu li a:hover, #menu dt a:hover {background: #000000;}#site {position: absolute;z-index: 1;top: 70px;left: 10px;color: #000;background-color: #ddd;padding: 5px;border: 1px solid gray; }a {text-decoration: none;color: #222;}-->  </style></head><body><div style="margin: 0px auto; text-align: center;" id="menu"><dl><dt onmouseover="java script:montre();"><a title="Home" href="http://forums.xisto.com/no_longer_exists/ onmouseover="java script:montre('smenu1');"><font color="#fef2dc">Programs</font></dt><dd style="display: none;" onmouseout="java script:montre('');" onmouseover="java script:montre('smenu1');" id="smenu1">    <ul>      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/ Men</a></li>      <li><a href="http://forums.xisto.com/no_longer_exists/ Women</a></li>      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/;    </ul>  </dd></dl><dl><dt onmouseover="java script:montre('smenu2');"><font color="#fef2dc">Facilities</font></dt><dd style="display: block;" onmouseout="java script:montre('');" onmouseover="java script:montre('smenu2');" id="smenu2">    <ul>      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/;    </ul>  </dd></dl><dl><dt onmouseover="java script:montre();"><a title="Staff" href="http://forums.xisto.com/no_longer_exists/ onmouseover="java script:montre('smenu3');"><font color="#fef2dc">Activities</font></dt><dd style="display: none;" onmouseout="java script:montre('');" onmouseover="java script:montre('smenu3');" id="smenu3">    <ul>      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/;      <li><a href="http://forums.xisto.com/no_longer_exists/;    </ul>  </dd></dl><dl><dt onmouseover="java script:montre();"><a title="History" href="http://forums.xisto.com/no_longer_exists/ onmouseover="java script:montre();"><a title="Contact" href="http://forums.xisto.com/no_longer_exists/ style="position: absolute; top: 0px; " src="test_files/greybar.jpg"><img style="position: absolute; top: 31px;" src="test_files/supportheader.jpg"><img style="position: absolute; top: 244px;" src="test_files/goldbar.jpg"><img style="position: absolute; top: 275px;" src="test_files/backgroundfade.jpg"><img style="position: absolute; top: 539px;" src="test_files/goldbar.jpg"></body></html>

There were some pixels in the menu and the images which were side-shifting them. Absolute positioning isn't relly recommended for a beginning site, but what the heck, go for it...Next you will have to work on the Menu drop-downs. They didn't work for me, but I have an old decrepit Browser and nothing fancy like that works in it. it would help if you could post the link where you got the javascript coding from and someone could help sort that out, too. or maybe have a look for a Cascading Style Sheet solution. They work in all Browsers even if the javascript is turned off.

Share this post

Link to post
Share on other sites

ctbrons    0

ctbrons
Posted

If you don't mind, after using a new form I am running into a few new problems:

1) I cannot get the font color to change.

2) I cannot figure how to get the menu to fit inside the gray bar.

3) I would like the page to fit in the center of the page no matter what resolution I am viewing.

Any suggestions?

I am using a new test site: http://www.faithcity.org/test2.html.

Share this post

Link to post
Share on other sites

Tyssen    0

Tyssen
Posted

You need to go back to the Suckerfish tutorial and look at it more closely. For starters, your second level <ul>s are outside the <li></li> that's meant to enclose them.

Share this post

Link to post
Share on other sites

brano    0

brano
Posted

I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How do I make the page always appear in the middle?I have seen many sites set up that will adjust accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the website: http://www.faithcity.org/test.html.

Notice from jlhaslip:
Moving to the html Topic


Try to add this script to head of your document:


<script language="JavaScript1.2">
<!--
window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>

Share this post

Link to post
Share on other sites

Tyssen    0

Tyssen
Posted

Window moving/resizing scripts are, in my opinion, one of the rudest and most annoying things that javascript can do. I've got my window set the way it is for a reason - cos I like it that way. I don't want the designer of a site I haven't even seen yet to change my window without even asking me. It's like me walking into someone else's house and moving their furniture around.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept