Jump to content
Sign in to follow this  
JuxiZoza

Center 800px Page Using CSS

Recommended Posts

This is a contribution that I thought I would submit. Comments would be appreciated.

 

Download here

 

<-- Begin Contribution -->

 

Disclaimer: I make no claim to the CSS trick that this contribution uses to position the page on the screen. I have only adapted a "tableless" CSS solution to sizing and centering a page to osCommerce.

 

This contribution uses CSS, NOT a table, to

  • set the width of the page for 800px screen
  • and center the page on the screen

This should

  • work with a broad range of browsers, and
    be compatible with future web standards,
    eliminate problems with using tables to center a page, like...
    • conflicts with other contributions,
      poor page loading performance,
      having to amend all the files WIKI proposes.

Files effected and included, if you want to see changes in place.

catalog\stylesheet.css ? ? ? ?(7 lines of code)
catalog\include\header.php ? ?(1 line ?of code)
catalog\include\footer.php ? ?(1 line ?of code)

 

However ALL changes are in this txt file.

 

====================================

file = catalog\stylesheet.css

line = any place, I put at top of listing (line 12) so I knew where to find it

DIV.centerpage {
?width: 770px;
?position: absolute;
?left: 50%;
?top: 0;
?margin-left: -385px;
}

====================================

file = catalog\include\header.php

line = 55, insert one (1) new line

<div class= "centerpage" >

just before lines,

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr class="header">

 

====================================

file = catalog\include\footer.php

line = 60, insert one (1) new last line in file

</div>

====================================

Edited by Johnson

Share this post


Link to post
Share on other sites

Nice and simple. Simple solutions are usually the best ones.


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites

JuxiZoza,

 

good idea of course to use a div and some CSS to center pages, use it myself too.

But:

DIV.centerpage {
 width: 770px;
 position: absolute;
 left: 50%;
 top: 0;
 margin-left: -385px;
}

This is a trick to center an absolute positioned element. Why use a trick if there are standard CSS ways to center the pages?

 

standarized stylesheet example:

body {
text-align: center; 
}

div#pageWrapper {
width: 770px;
margin 0 auto;
}

(the above sets top and bottom margin to 0px, change it if you like)

or:

body {
text-align: center; 
}

div#pageWrapper {
width: 770px;
margin-left: auto;
margin-right: auto;
}

 

(the body {text-align: center; } is only needed for the famous IE center bug)

 

Also notice assuming it's only used once on each page, so using an "id" i.s.o. a class:

 

change:

<div class= "centerpage" >

to:

<div id= "pageWrapper" >

 

 

Oops I forgot: the official way to center a block element using CSS is making the left and right margin equal (setting left and right margin to auto effectively makes the margins equal, and thus centers the div too)

Edited by paulm2003

Share this post


Link to post
Share on other sites
Why use a trick if there are standard CSS ways to center the pages?

Thanks for your input and I profess that I don?t know enough about the subject to debate the points you made.

 

I went in search of a ?tableless? solution to centering a 800px page, because I didn?t want the problems associated with using tables to center a page. Wasn?t to be found on this site. And, I can?t tell you how many message threads I looked at on webmaster and CSS forums or ?tips & tricks? sites I visited before I found something that was close to what I wanted. I found some code bits, but, mostly concepts. I even ?borrowed? something that Pharkie said in a PM and something my son said, too. Not being a programmer, I kludged together something to work within osCommerce.

 

The very thing that you thought could be improved on is the latest ?cool? bit of code making the rounds in some developer forums. Using ?position: absolute;? with ?left: 50%;? and then setting ?margin-left: -385px;? to move the page a ? screen to the left AND NOT using ?text-align: center;?. Its a deprecated html element and apparently support in CSS is inconsistent between browsers. Remember these guys don?t want problems with their sites and this code will always work. The <DIV> thing? you can argue that one, I guess. Some block element needs to be defined and it seems to work for me and only added one line of code to two files. Figured if anyone had a problem with my suggestion, they wouldn?t have to do much to fix it. ?Physician do no harm.?

 

If any other ?pros? are reading this thread, please jump in any time. I?d like to learn more about this.

Share this post


Link to post
Share on other sites

Hi Juxi,

 

maybe I my statement about the trick was a bit to "hard". I think it is a good method to center the pages, you posted. The trick is that you need the negative 50% margin of page width because centering is relative. But if you want an element positionend absolute and centered it is the best (only?) way to do it I suppose.

 

 

NOT using ?text-align: center;?.  Its a deprecated html element
That's why I never use it in HTML. It is the way text is centered using CSS, so it is being used in the stylesheet only. As I said it is only there because most IE versions have a centering bug (even IE6, in quirks mode), and need text-align center to center block elements.

 

apparently support in CSS is inconsistent between browsers.
If you find any major (let's say over 0.5% users) browser that does not work with the method I posted I wil eat my hat :D

 

The <DIV> thing? you can argue that one, I guess.
Sorry should have left that out, your div's thing is great, what i said about it distracts from the subject and isn't that important. Edited by paulm2003

Share this post


Link to post
Share on other sites
maybe I my statement about the trick was a bit to "hard".

Not at all. I'm trying to learn this stuff and your comments contributed to this ?grasshopper?s? journey.

 

Following your post, I continued my journey and paged through the developer?s forum. An on-topic message, that escaped my previous searches, popped out at me. In that message, this question was asked?

the first is: How can I center all the pages in one time and make them 800 pixels wide (and not editing them manually like: first editing account.php and then edit_account.php). Is there a template file somewhere hidden??

To which they received this reply?

Look in the Contributions area. Link in the Gray bar at the top of this page. Note: sometimes it is easier to search the Contributions forum than the Contributions area. The basic idea is to put a div at the beginning of the header and close it at the end of the footer, then specify width and centering in the CSS.

I wish I had read that message. It would have saved me some time and effort. I already knew I wanted to use CSS, I suspected (from examining Linda McGrath?s code in ?Center Shop? contribution and Pharkie reinforced) that starting the code in header.php and completing it in footer.php was needed to wrap the entire page, but I didn?t know that <DIV> was the element that I could use. That took additional research, mainly in WDG and W3C docs.

 

That reply also illustrates how a perfectly good answer from one knowledgeable person to another knowledgeable person contains all the information needed to proceed. But, for a newbie??? Can you say, ?blank stare?.

 

Based on AlanR?s and your positive comments I think I?ll contribute it. A little snippet of code doesn?t measure up to a contribution, but that is where a newbie (like me) would go to find a solution to their 800px problem. So, that?s where I?ll put it.

 

Because the code is so simple, maybe Harald Ponce de Leon and the development team will consider throwing it in as a switchable feature in Admin.

 

But, I think I need to change the introduction to something like? ?There ain?t an original thought in this entire contribution. My only defense for submitting it is that you people are filling up the forum with requests for a 800px solution. So, stop already! It?s simple, it works, use at your own risk.? :lol:

 

Thanks for your help, the journey continues.

Share this post


Link to post
Share on other sites

This is the beauty of a place like this. I don't have the time to hang around on developers forums looking for neat tricks. But I sure like them when I find them.

 

If you find any more post 'em!


Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux

Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

Share this post


Link to post
Share on other sites
:D

 

The great thing with solutions like this, that it does not really matter how the CSS is done in the example/contribution. Once the div is placed and has an id or class assigned, anyone can simply edit the stylesheet to change if and how it's centered. No need to edit any HTML/PHP anymore for that.

 

By the way there is another way to center an absolute positioned element (forgot it for a moment), by setting the div to "left: 15px;" and "right: 15px;" for example, nice for a fluid centered content area, but not for a whole page in most cases (also needs a hack for mac IE5.x, works fine in other browsers).

 

Paul

Edited by paulm2003

Share this post


Link to post
Share on other sites
The great thing... Once the div is placed and has an id or class assigned, anyone can simply edit the stylesheet to change if and how it's centered. No need to edit any HTML/PHP anymore for that.

Good point, that I failed to mention.

fluid... content

Let me guess, you visit/subscribe to Sitepoint. They're big on that.

 

Thanks again for your input, both here and in PM.

 

The journey continues...

Share this post


Link to post
Share on other sites

That was one of my resources. :)

 

And I thought it would be the answer to my quest. Until I came across? http://www.webmasterworld.com/forum21/3228.htm

So, I decided not to jump on the ?text-align: center;? bandwagon.

 

In hind sight, the only thing I retained from that FAQ was that <div> could be used to wrap a whole page and that the name should be something like "div.main".

 

And, the "trick"

width: 770px; position: absolute; left: 50%; margin-left: -385px;
that this contribution uses is not found on that page. For the life of me I can't re-find it to point you to it. I think it was in a forum message somewhere.

 

If I come across the source again, I?ll post.

Share this post


Link to post
Share on other sites
http://www.webmasterworld.com/forum21/3228.htm

So, I decided not to jump on the ?text-align: center;? bandwagon.

The only thing I get to see there is this:

status: Either we require login from users from your ISP because of abuse, or the thread is marked members only. Please login and then back up to view.
:(

 

A board where you can not read any posts without registering :rolleyes:

Share this post


Link to post
Share on other sites
http://www.webmasterworld.com/forum21/3228.htm

So, I decided not to jump on the ?text-align: center;? bandwagon.

The only thing I get to see there is this:

status: Either we require login from users from your ISP because of abuse, or the thread is marked members only. Please login and then back up to view.
:(

 

A board where you can not read any posts without registering :rolleyes:

hoi Paul

 

i'm sure you know the word dutch, as in double dutch, going dutch etc. :)

 

i noted this method down one time

 

so how do we go there without having to look at that nasty message?

 

under the assumption that you really need what's there ;)

 

step_1

let's search for this stuff in google:

webmasterworld and forum21/3228

step_2

in moz: open link in new tab :D

 

step_3: save in bookmarks

 

step_4: navigate only via links on the site and/or use the searchbox.

 

<nl>tevreden nou?</nl>


"If you're working on something new, then you are necessarily an amateur."

Share this post


Link to post
Share on other sites
The only thing I get to see there is this:
status: Either we require login from users from your ISP because of abuse, or the thread is marked members only. Please login and then back up to view.

Sorry about that. Actually I can't follow the link I supplied either. The site has changed its link policy to encourage people to subscribe.

 

You can find the link I supplied;

http://www.webmasterworld.com/forum21/3228.htm

by going to www.webmasterworld.com doing a search using Fluid centering with DIV's

 

After reviewing my IE history I found that I also read a good thread at

http://www.webmasterworld.com/forum21/2350.htm

find it by searching for Exact Center of Page

 

AND, drumroll please, the actual citation is

http://www.webmasterworld.com/forum21/5870.htm

search for Centering a entire site

 

By the time I got there... the heater/footer thingie, using <div>, not using a table and not using using align:center had all been settled. tedster's message was the missing piece needed and the one that I, belatedly, cite for the "trick" used.

 

If berkedam can give the title of the message he cited, I would like to read that one, too.

 

There you have it... most, but not all, of the journey I took to write those 9 simple lines of code.

 

The journey continues...

Share this post


Link to post
Share on other sites

Using a modified version of berkedam's tip...

 

Google Advanced Search...

domain search only = webmasterworld.com

then enter forum21/3228, forum21/2350, forum21/5870 as seperate searches.

 

Using his/this method I was able to read all the citations.

Share this post


Link to post
Share on other sites

Hi

 

This contribution works well for me. I was wondering if any experts out there know how I can change the colour of the margins as well.

 

I thought I might be able to add another CSS like so:

DIV.background {
BACKGROUND: #FFEBAE;
}

and then add <div class= "background" > before the <div class= "centerpage" > from this contribution, and then a closing </div> at the end.

 

This doesn't seem to work - anyone know a simple way?

 

Thanks

Tim

Share this post


Link to post
Share on other sites
<nl>tevreden nou?</nl>
Yes thanks for the tip. I must say these posts indeed do not contain anything I didn't know already, so I'm very happy that I didn't pay to be able to read it. :D

 

I still stick to:

div.container {
text-align: center /* compensate IE centering bug */
}
div.centeredBlock {
margin: auto:
text-align: left;
}

To center block elements. I think it's the most common/universal/easy way to do it. Allthough other ways don't have to be wrong of course.

 

The stupid IE centering bug is a real pitty, otherwise we could simply do it like this:

div.centeredBlock {
margin: auto;
}

Why the f... didn't they fix this bug years ago ? (only IE6 in strict mode does it right)

 

 

 

how I can change the colour of the margins as well. 

 

I thought I might be able to add another CSS like so:

DIV.background {
BACKGROUND: #FFEBAE;
}

I would not call the background color the color of the margins. But you better give the body a background color (and the centered div inside it another background color if you like)

i.e.:

body {
background: #FFEBAE;
}
div.centerpage {
background: #FFF;
}

 

Your surrounding div didn't work because it did not contain anything, an empty div without height and width does not work very well (The surrounding div does contain the centered div in the HTML, but since the centered div is positionend absolutely it's moved to another layer, so you surrounding div does not really contain anything anymore.). If you would position you surrounding div too (absolutely or relatively), it should work as you want I suppose (but you really don't need the extra div for setting the background color, you can just use the body for the background color as explained bove.)

 

hth

 

Paul

Share this post


Link to post
Share on other sites

:blink: Has anyone successfully added a background image to the body on a fixed width centered page?

Share this post


Link to post
Share on other sites

good one! working great but then i need to put box like or border tothis css.. is it posibble?

 

thanks

Share this post


Link to post
Share on other sites

Guys,

 

I downloaded the contribution and installed it (modified for my STS install) and everything seems fine except 2 things.

 

1. At the top of my page I SOMETIMES have "</".

 

2. If I reduse the size of my browser I cannot scroll all the way to the left of the page.

 

Let me know if there is a way to get around this and what might be causing it.

 

Thanks!

 

Craig

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
Sign in to follow this  

×