Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Centering Page Of Html At Various Display Widths, Viewing Screen Shots No Matter Resolution
ctbrons
post Apr 10 2006, 09:32 PM
Post #1


Newbie
*

Group: Members
Posts: 9
Joined: 10-April 06
Member No.: 21,629
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: www.faithcity.org/test.html.
Notice from jlhaslip:
Moving to the html Topic

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Apr 10 2006, 09:38 PM
Post #2


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,916
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
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.

(list)

Go to the top of the page
 
+Quote Post
michaelper22
post Apr 10 2006, 10:07 PM
Post #3


-=Hybrid Bus=-
*********

Group: Members
Posts: 744
Joined: 2-November 05
From: My hybrid bus (in NYC), a computer
Member No.: 13,709
Spam Patrol
If the whole page is in a div tag, then add the following CSS style to it:
CODE
text-align: center;

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

That will center anything within the <div> tag.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Apr 10 2006, 10:13 PM
Post #4


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,077
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
The css you have used is this:
CODE

<!-- /* */
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:
CODE

<!-- /* */
body {
margin: 0 auto;
text-align:center; // for older browsers
padding: 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.

(list)

Go to the top of the page
 
+Quote Post
Dragonfly
post Apr 11 2006, 05:50 AM
Post #5


Privileged Member
*********

Group: Members
Posts: 702
Joined: 17-February 05
Member No.: 3,817
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.


(list)

Go to the top of the page
 
+Quote Post
ctbrons
post Apr 11 2006, 09:11 PM
Post #6


Newbie
*

Group: Members
Posts: 9
Joined: 10-April 06
Member No.: 21,629
QUOTE(jlhaslip @ Apr 10 2006, 05:13 PM) *

The css you have used is this:
CODE

<!-- /* */
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:
CODE

<!-- /* */
body {
margin: 0 auto;
text-align:center; // for older browsers
padding: 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.

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Apr 11 2006, 10:00 PM
Post #7



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
Remove the width: 100% from #menu.

(list)

Go to the top of the page
 
+Quote Post
WindAndWater
post Apr 11 2006, 10:14 PM
Post #8


Advanced Member
*******

Group: Members
Posts: 106
Joined: 1-April 06
Member No.: 21,148
Your problem's probably in the menu code
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
CODE
margin: 0px auto auto auto;
or
margin-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.

This post has been edited by WindAndWater: Apr 11 2006, 10:18 PM

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Apr 11 2006, 11:28 PM
Post #9



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
QUOTE(WindAndWater @ Apr 12 2006, 08:14 AM) *

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.