PDA

View Full Version : centered page


asacchi011
12-20-2005, 04:31 PM
Please help, how can i make a page to be in a center of viewer, no mather what is the resolution???
Thanks
A.Sacchi

Creative Insanity
12-20-2005, 05:25 PM
This question as come up alot and as yet no one has given an anwser that works. Centered window is easy.. but index page on load centered I will have to look into as many want to know this.

cpjfoto
12-21-2005, 04:45 AM
I have put the page in a table form and then centered it. Worked for me

dreamlynx
12-21-2005, 05:29 AM
correct put the page in a tab.le and center it

gmcrone
12-21-2005, 09:28 PM
OK, one more time....

One of the most asked questions in our forums is "how do I center my content?"

By "centering" we mean keeping all the content centered in the browser viewing area
even at different resolutions and even if a user re-sizes the page.

By using a CSS "wrapper" this is very easy to accomplish.

There are basically 2 methods - a "liquid" or "fluid" method and a "rigid" method.

The "liquid" method adjusts the content width on the fly by having the content width be always a certain
percentage of the entire viewport width.

This a accomplished by using the following code:

THE HTML:
<div class="wrapper"> all page content goes here </div>

THE CSS
<div.wrapper {
margin-left : 10%;
margin-right : 10%;
}

This makes the width of the div.wrapper always 80% of the viewport width, whatever it may be.


However more designers prefer the "rigid" method which sets the content to a specific pixel width.

"Rigid" in this case means setting the "wrapper" to a specific width that will fit most common broswer resolutions
without causing a horizontal scrollbar to appear.

It used to be the most common screen resolution was 640px wide.
Today however it is much more common to have a 800px or 1024px width.
It is not however a good idea to set this width wider like 800px because even with a browser maximized window there are
still pixels being used for the vertical scroll bar.
To account for this you should use a width of no more than 770px.

How about the user that has his resolution set at 1024px?
If the user maximizes their window that leaves appx 230px of horizontal window space left over. It has to go somewhere.
The cleanest solution is to split this blank space in half and put it equally on either side of the wrapper.
However we can't use ordinary margins to do this.
Percentage sized margins won't work with a pixel-sized wrapper.
CSS to the rescue....
CSS has a property called "auto" for margins. If the values for the side margins are set to "auto"
the resulting side margins become equal and automatically fill the remaining horizontal space, giving us one centered box
and equal margins on either side. Just what we want.

This works great in most modern browsers, BUT all versions of Internet Explorer/Win previous to version 6 do not support "auto"
margins. Even IE6/Win will fail if the browser is not in "standards" mode based on the doctype of the web page.

So how do we get around this?

Well IE has a bug in it that lets us make a CSS hack to fix this problem.

The CSS property "text-align" can have values of left, right, center, justify, and inherit.
This property is normally applied to a block level element such as a paragraph.
This causes all the inline content within that element to be aligned with the value assigned to it.

However IE/Win browsers incorrectly apply this property to ALL the elements in the "text-align" box
and not just the inline content as it is supposed to.
Do you see what this means - IE/Win fails to support "auto" margins, BUT, it does incorrectly center boxes when they are nested
inside another box that has "{text-align : center;}.

So how do we use this to get our centered wrapper. We set the body to text-align : center, and then use the wrapper to
reset our text to align left.

THE HTML:

<body>
<div class="wrapper"> all content goes here </div>
</body>

THE CSS:

body {
text-align : center ;
}

div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

Now we have a web page with all the content centered in the broswer window with even margins on both sides.

Almost finished. There is one other minor problem that has to be addressed.
Gecko-based browsers (Firefox, Netscape, Mozilla) have a problem when using auto side margins.
They interpret it very literally. What happens is, if the user narrows the page to less than that of the wrapper width,
these browsers will let the content flow off the left and right sides evenly. This means that a horizontal scroll bar
will appear and let you scroll right to get that content, but the content sent to the left disappears and cannot be retrieved..

There is a way to fix this problem.
The easiest method is to set a minimum width on the body element that is the same width as our wrapper.

So our final markup looks like this:

THE HTML

<body>
<div class="wrapper"> all content goes here </div>
</body>

THE CSS

body {
text-align : center ;
min-width : 770px ;
}

div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}


There is also a method of using a border around your wrapper so you don't need the min-width property, but it introduces
another IE/Win bug and hack. For now just stick with the above it will work on all browsers under any operating system.


Mike Crone (gmcrone)

Creative Insanity
12-22-2005, 12:10 AM
Great stuff MC.. this should be on the front page in the tuts I recon.

But one question mc.. what about centering a small window? Would you just add top and bottom commands for the wrapper?

davidj
12-22-2005, 03:19 PM
OK, one more time....

one more time eh Mike..

do you honestly believe that?

Creative Insanity
12-22-2005, 04:13 PM
Well if it was added to the front end it would be the last time cause then could point people to the front page when the question gets asked again

domedia
12-22-2005, 05:49 PM
yeah the center questions seems to come up alot..
Mike, want me to wrap this up for the homepage article, or do you want to to any edits on it before that? :)

gmcrone
12-22-2005, 09:06 PM
Domedia,

Just set it up as is. Only edit if you think it needs it.

(now maybe it will be "one last time" LOL)

As to centering top to bottom, this is not as easy as it seems.
There is no "reliable" method to doing this "yet".

You can play around with margin top bottom 50%
or if you know your exact pixel height (less than 640 for the least common denominator) you can calculate what percentages to use to get it centered FOR EACH RESOLUTION, but not for all. You would need a jscript to read the users resolution and then to load the appropiate style sheet for that resolution.

Mike...

Creative Insanity
12-22-2005, 10:19 PM
Yeah.. ta MC.. that is what I thought would be the case.
Ta for replying.

hearter
08-20-2007, 04:24 AM
i dont know what i do wrong its not working with me so please can you tell me whats wrong in this cod
<style type="text/css">
<!--
body {
text-align : center;
min-width : 770px;
background-image: url(images/bg%20teplate.jpg);
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
#apDiv1 {
position:absolute;
left:93px;
top:206px;
width:640px;
height:271px;
z-index:1;
background-image: url(pics/18_228thyairexdia.jpg);
}
-->
</style>
<div id="apDiv1"></div>

edbr
08-20-2007, 04:58 AM
what are you trying to do?

davidj
08-20-2007, 05:57 AM
you should remove the space in your image name

bg%20teplate.jpg

this %20 denotes a space so remove it and replace it with an underscore

domedia
08-20-2007, 01:15 PM
heater, welcome to the forums!
This thread was 2 years old, look at the dates of threads before replying to them.
You don't use apdiv with a centered design, they're mutually exclusive.

gmcrone
08-21-2007, 04:07 AM
What may work for you is this:
div.wrapper {
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
}

Mike...



div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
#apDiv1 {
position:absolute;
left:93px;
top:206px;
width:640px;
height:271px;
z-index:1;
background-image: url(pics/18_228thyairexdia.jpg);
}

hearter
08-24-2007, 03:04 AM
thank you i have seen the dates but thought somone will see it any way and reply ,,and it works thank you guys so much

gmcrone
08-24-2007, 04:33 AM
Just so everyone understands this.

You can have absolutely positioned elements on a centered page AS LONG AS they are nested inside a relatively positioned element.

Mike..

domedia
08-24-2007, 02:26 PM
Thank for the reminder Mike, we seem to forget this.

kittyprrrs
08-26-2007, 03:29 PM
Ok, i hate to keep rehashing this one...over and over..but here it goes. As you all probably already know, the site i am doing is already in tables nested inside table. The problem I think is that the layers get mashed up when viewed in other "resolutions" i believe. in this case, if I read correctly, *per mike?* .... I would need to create a jscript for each and every resolution so that the div.wrapper (my first using this so bear with me...where does it go? it's part of the tables portion right? if so, which table to apply this to or is it for all tables?) fits to the appropriate screen res?

neonfluxx
08-26-2007, 05:07 PM
The problem is: Tables are not absolute positioning and the Layers (divs) are. If the tables are centered inside another table that thats the problem. What you should do if you really want to use tables is center them inside a div. Than that will fix it. I will pre pare a VTM with link for you today. I will upload link later today.

kittyprrrs
08-26-2007, 06:30 PM
omg neonfluxx! I've been sitting here trying to figure out why it only shows up like this on his end and I almost pretty much gave up! Now that you explained why the silly thing looks the way it does, it makes sense! So, from what I am reading, if I had made my background a layer and inserted all the tables inside the layer containing the background then i would not have had this big mess (am I correct?). Would I still need to create a jscript for res's (ie) 800, 1024, widescreen....etc so that it will auto"stretch" or "fit" each screen size? If so *another weakness of mine* what would the jscript be or should i look into dynamic's site for a code?

seriously aeonfluxx...i think i finally see what my problem was. i think i was totally afraid of using too many layers *as i was told many years ago that ie4-6 did not like layers*....now that i know layers are all good to go...i can layer like "onion boy"...yay!

I can't wait to see the link...thank you so very much for clearing this up for me...truly!

neonfluxx
08-26-2007, 07:22 PM
Uploading now: It is in Quicktime Format so you will need to download from the th link and play on your desktop.

I have zipped it as well.

http://www.meowtowne.com/centering.zip

give it about 30 minutes and it should be done uploading.

Hope this helps.

kittyprrrs
08-26-2007, 08:20 PM
I just realized I called you aeonfluxx! oy! i tell you!

Thank you so much for this file! I can not believe you are a "new member!"...hahahahaha! I think you should be promoted just for doing this special "feature" film!

Seriously...i can't thank you enough!

neonfluxx
08-26-2007, 08:40 PM
No Problem at all. Maybe i can do some of these for the forum.

kittyprrrs
08-26-2007, 11:46 PM
neonflux....so, I hear you but I don't see what you are doing (which you have SO got to teach me how to do this!....tutorials like this ROCK!).

YES! Do some for the FORUMS!!!!!!! Actually, I think I have seen another one of your tutorials on another site...perhaps flash...which is another nightmare for me altogether...for another time of course...

kittyprrrs
08-27-2007, 03:02 PM
yep...i've converted the file but again...i hear you but I don't see you....hahahaha....you sound like a professor! hahahahahaha! I'm all scared!.....ok...so don't center with tables...I wish I could see what you are doing....would it be a bother for you to try again? i have the latest version of Qtime....and i use showtime too....

neonfluxx
08-28-2007, 02:47 AM
what exactly would you like

what is the email for you skype account. I will add you to my list and you can explain in detail what you need.