Back To Website Design Forum

Website layout

  • mysonmark
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 13, 2007
  • Posts: 24
  • Status: Offline

Post November 11th, 2007, 6:31 pm

Hello,

In looking around on the internet, I notice that some websites are centered while others are formatted to the left.

I would like to center my website and would like advice on the following:

Can you give me your opinion on the pros and cons of centering a website

Would you recommend centering a website for a beginner such as myself (are there a lot of problems associated with it)

And, what is the best way to center a webpage.

Thanks so much in advance for all of your help.

Charlene
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 11th, 2007, 6:31 pm

  • Bogey
  • PHP Ninja
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 7337
  • Loc: Imagination
  • Status: Offline

Post November 11th, 2007, 6:52 pm

Pros
Easy on the eyes (IMO)
Can be professional if used correctly

Cons
Can be unprofessional if used incorrectly
Can have problems resizing if the layout is fluid
Can have centering problems in IE (duh!)

Best way
The best way to center a site is using CSS in my opinion.

Here's how...

...the css...
Code: [ Download ] [ Select ]
.centerwrap {
margin-left: auto;
margin-right: auto;
}
.wrap {
position: relative;
width: 75%;
height: 100%;
}
  1. .centerwrap {
  2. margin-left: auto;
  3. margin-right: auto;
  4. }
  5. .wrap {
  6. position: relative;
  7. width: 75%;
  8. height: 100%;
  9. }

...the HTML...
Code: [ Download ] [ Select ]
<div class="centerwrap">
<div class="mainwrap">
...html codes and text...
</div>
</div>
  1. <div class="centerwrap">
  2. <div class="mainwrap">
  3. ...html codes and text...
  4. </div>
  5. </div>

I think that is clear...

...hope that helped you out :)
Learn PHP

Apocalyptica - I Don't Care (Listen to this most awesome song ever!)

Post November 11th, 2007, 9:31 pm

Bogey, not quite ... you forgot the following:
Code: [ Download ] [ Select ]
body{
text-align:center;
}
  1. body{
  2. text-align:center;
  3. }

Otherwise it does not work in IE6 ...
RewriteEngine On

RewriteRule ^(awesome|excellent|extraordinary)$ RT
  • Bogey
  • PHP Ninja
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 7337
  • Loc: Imagination
  • Status: Offline

Post November 11th, 2007, 9:33 pm

then the text is centered :( :x

And why doesn't it work in IE? It works in IE for me :scratchhead:

Oh... IE6 I don't have IE6 :lol: :D
Learn PHP

Apocalyptica - I Don't Care (Listen to this most awesome song ever!)

Post November 11th, 2007, 9:45 pm

Bogey wrote:
then the text is centered

I know, but that's the only way I've seen so far that works with IE6 also, so you'll just have to set it to "left" again for everything else ...
RewriteEngine On

RewriteRule ^(awesome|excellent|extraordinary)$ RT
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Joined: Apr 22, 2007
  • Posts: 1003
  • Loc: Australia
  • Status: Offline

Post November 12th, 2007, 1:58 am

I know it is seen as bad practice not to design for a particular browser ... but I don't design for IE6 anymore.

1) it's a really bad browser that fails in everything it does (or tries to do)
2) it has been suceeded by IE7 (which is a slight improvement)
3) people that don't update to IE7 at least don't deserve to be on my website.

I like to kindly tell them to use firefox :D
My deviantART gallery | The random subdomain where I test things

Post November 12th, 2007, 2:03 am

I can't quite do that for all the sites I design ... but I sure-as-hell see your point ... IE6 just irritates me, and yes I agree that IE7 work better, imo it's way better than IE6 ...
RewriteEngine On

RewriteRule ^(awesome|excellent|extraordinary)$ RT

Post November 12th, 2007, 4:31 am

When I write a centered site, I use the short hand for my primary containers...
Code: [ Download ] [ Select ]
margin:0 auto;


...and I just let it align left in IE6.

Because we in the western world read left to right, top to bottom, we don't tend to notice a well organized left aligned site, while we're reading. We only tend to notice it when we stand back and look at the whole.

What drives me nuts, however, is when a paragraph stretches across the entire 1680px width of my screen and becomes a single line. For Ozzu, even, I can't have my browser expanded to full screen.
;)
- dM
  • mysonmark
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 13, 2007
  • Posts: 24
  • Status: Offline

Post November 12th, 2007, 7:16 am

Thank you so much for your replies. I really appreciate them. Please if anyone has any other comments regarding this, please feel free to post. I need all the help I can get. :)

Charlene
  • blink182av
  • Guru
  • Guru
  • No Avatar
  • Joined: Jun 27, 2005
  • Posts: 1261
  • Loc: New York
  • Status: Offline

Post November 12th, 2007, 11:31 am

Simple solution :)
Code: [ Download ] [ Select ]
CSS:
body { text-align: center; }
body * { text-align: left; }
#container { width: 775px; margin: 0 auto; }

HTML:
<body>
 <div id="container">
  content
 </div>
</body>
  1. CSS:
  2. body { text-align: center; }
  3. body * { text-align: left; }
  4. #container { width: 775px; margin: 0 auto; }
  6. HTML:
  7. <body>
  8.  <div id="container">
  9.   content
  10.  </div>
  11. </body>


The text-align center is for IE5, not 6. Whenever I use just margin: 0 auto; it works fine in IE6. Also, keep in mind: you must specify a width and it must be a block level element in order to use margin: 0 auto;

Good luck!
  • dyfrin
  • Proficient
  • Proficient
  • User avatar
  • Joined: May 10, 2006
  • Posts: 451
  • Loc: WI
  • Status: Offline

Post November 12th, 2007, 12:51 pm

are you talking fixed width page like adobe?

on 24" widescreen theres a lot of side space.

See what adobe has done with their menu on top? Made it stretch while rest of the content stays fixed.

Doing things like that so you don't just have a fixed area may help in appeal.

Post November 12th, 2007, 1:43 pm

blink182av wrote:
The text-align center is for IE5, not 6. Whenever I use just margin: 0 auto; it works fine in IE6.

Um...sorry, no it doesn't, friend.

IE 5, 5.5 and 6 are essentially the same rendering engine underneath. The same rendering engine that was developed a long time before any web developers talked about standards and long before anyone heard the name Firefox. IE 7 marks a huge change in the way IE renders content.

blink182av wrote:
Also, keep in mind: you must specify a width and it must be a block level element in order to use margin: 0 auto;

I hope we were all assuming that.

dyfrin wrote:
See what adobe has done with their menu on top? Made it stretch while rest of the content stays fixed.

The menu at adobe.com, itself, isn't stretching. There's a background image that's tiling in the X direction.
- dM
  • blink182av
  • Guru
  • Guru
  • No Avatar
  • Joined: Jun 27, 2005
  • Posts: 1261
  • Loc: New York
  • Status: Offline

Post November 12th, 2007, 4:52 pm

digitalMedia wrote:
blink182av wrote:
The text-align center is for IE5, not 6. Whenever I use just margin: 0 auto; it works fine in IE6.

Um...sorry, no it doesn't, friend.

IE 5, 5.5 and 6 are essentially the same rendering engine underneath. The same rendering engine that was developed a long time before any web developers talked about standards and long before anyone heard the name Firefox. IE 7 marks a huge change in the way IE renders content.

Then I have a question for you. http://www.wordhugger.com/ is one of the sites I recently finished. It is centered in IE6, but not IE5.5 (let alone 5). Nowhere in the CSS do I have body { text-align: center; } -- so why is it centered in IE6?

Post November 12th, 2007, 8:00 pm

blink182av wrote:
Then I have a question for you. http://www.wordhugger.com/ is one of the sites I recently finished. It is centered in IE6, but not IE5.5 (let alone 5). Nowhere in the CSS do I have body { text-align: center; } -- so why is it centered in IE6?


No, I'm tired and I'm not in the mood to sort through your workarounds.

blink182av wrote:
Whenever I use just margin: 0 auto; it works fine in IE6.


I do have a better idea, though. Why don't you tell me why this doesn't work in IE6. Hmmm?

Code: [ Download ] [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Not centered in IE 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style>
 div{margin:0 auto;width:800px;height:200px;background:#F00;}
 </style>
</head>

<body>
 <div> &nbsp;</div>
</body>
</html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Not centered in IE 6</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.  <style>
  8.  div{margin:0 auto;width:800px;height:200px;background:#F00;}
  9.  </style>
  10. </head>
  12. <body>
  13.  <div> &nbsp;</div>
  14. </body>
  15. </html>


I think I could write your site in about 1/4 the amount CSS that you burdened my browser and bandwidth with.

//...and by the way, if I wrote your page it would work in IE5
- dM
  • blink182av
  • Guru
  • Guru
  • No Avatar
  • Joined: Jun 27, 2005
  • Posts: 1261
  • Loc: New York
  • Status: Offline

Post November 13th, 2007, 1:46 pm

digitalMedia wrote:
blink182av wrote:
Whenever I use just margin: 0 auto; it works fine in IE6.


I do have a better idea, though. Why don't you tell me why this doesn't work in IE6. Hmmm?

Code: [ Download ] [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Not centered in IE 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style>
 div{margin:0 auto;width:800px;height:200px;background:#F00;}
 </style>
</head>

<body>
 <div> &nbsp;</div>
</body>
</html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Not centered in IE 6</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.  <style>
  8.  div{margin:0 auto;width:800px;height:200px;background:#F00;}
  9.  </style>
  10. </head>
  12. <body>
  13.  <div> &nbsp;</div>
  14. </body>
  15. </html>


Looks to me like it is the XML at the top. Try viewing this in IE6: http://www.stuckinanutshell.com/center.html -- works just fine.

digitalMedia wrote:
I think I could write your site in about 1/4 the amount CSS that you burdened my browser and bandwidth with.

//...and by the way, if I wrote your page it would work in IE5

Sorry, was a rushed job and did not have the time to go through and optimize it.

Hope this clears things up :D
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 13th, 2007, 1:46 pm

1, 2

Post Information

  • Total Posts in this topic: 21 posts
  • Users browsing this forum: No registered users and 113 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2010 Unmelted, LLC. Driven by phpBB © 2010 phpBB Group.