Website layout

  • mysonmark
  • Novice
  • Novice
  • mysonmark
  • Posts: 24

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

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: [ 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: [ 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 :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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

Otherwise it does not work in IE6 ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

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
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ...
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

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
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

When I write a centered site, I use the short hand for my primary containers...
Code: [ 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.
;)
  • mysonmark
  • Novice
  • Novice
  • mysonmark
  • Posts: 24

Post 3+ Months Ago

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
  • blink182av
  • Posts: 1258
  • Loc: New York

Post 3+ Months Ago

Simple solution :)
Code: [ 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; }
  5. HTML:
  6. <body>
  7.  <div id="container">
  8.   content
  9.  </div>
  10. </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
  • Expert
  • Expert
  • User avatar
  • Posts: 503
  • Loc: WI

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • blink182av
  • Guru
  • Guru
  • blink182av
  • Posts: 1258
  • Loc: New York

Post 3+ Months Ago

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?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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: [ 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>
  11. <body>
  12.  <div> &nbsp;</div>
  13. </body>
  14. </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
  • blink182av
  • Guru
  • Guru
  • blink182av
  • Posts: 1258
  • Loc: New York

Post 3+ Months Ago

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: [ 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>
  11. <body>
  12.  <div> &nbsp;</div>
  13. </body>
  14. </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
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Fair enough. :thumbsup:

I stand corrected. The XML prologue apparently causes IE6 to go into quirks mode.

blink, I apologize for my curtness.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

This does bring up an interesting dilemma, however. According to W3C(document)...

Quote:
An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol. Here is an example of an XHTML document. In this example, the XML declaration is included.
Code: [ Select ]
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
 <head>
  <title>Virtual Library</title>
 </head>
 <body>
  <p>Moved to <a href="http://example.org/">example.org</a>.</p>
 </body>
</html>
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html
  3.    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  <head>
  7.   <title>Virtual Library</title>
  8.  </head>
  9.  <body>
  10.   <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  11.  </body>
  12. </html>


...I think I'll just let it align to the left in IE6.
  • blink182av
  • Guru
  • Guru
  • blink182av
  • Posts: 1258
  • Loc: New York

Post 3+ Months Ago

digitalMedia wrote:
This does bring up an interesting dilemma, however. According to W3C(document)...

Quote:
An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol. Here is an example of an XHTML document. In this example, the XML declaration is included.
Code: [ Select ]
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
 <head>
  <title>Virtual Library</title>
 </head>
 <body>
  <p>Moved to <a href="http://example.org/">example.org</a>.</p>
 </body>
</html>
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html
  3.    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  <head>
  7.   <title>Virtual Library</title>
  8.  </head>
  9.  <body>
  10.   <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  11.  </body>
  12. </html>


...I think I'll just let it align to the left in IE6.

Good find dM. It is also encouraged to use UTF-8 or UTF-16 for global encoding (meaning that you shouldn't need to put the XML declaration).

Glad we came to an agreement :).
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

:lol: Ha! But still strongly encouraged to use the prologue in all XHTML documents. :)

Agreement, right on.

It's kind of funny because I always thought that you were supposed to use the prologue for portability/interoperability and to really define the doc as XML - and I never questioned that. I just always thought IE was mishandling the XHTML DTDs in those respects.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

IE still sucks no matter how you put it :lol:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Bogey wrote:
IE still sucks no matter how you put it :lol:

Oh, brother. :lol:

Post Information

  • Total Posts in this topic: 21 posts
  • Users browsing this forum: No registered users and 41 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.