Jump to content
xisto Community
Sign in to follow this  
Followers 0
encryptedwrath

Fixed Centred Layout Learn how to code that popular Centred/Fixed width layout...

By encryptedwrath, in Programming

Recommended Posts

encryptedwrath    0

encryptedwrath
Posted (edited)

I remember learning this so long ago after piecing together some tutorials. First , put together your basic HTML Code. Nothing complicated , but it should probably look like this;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/;  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />  <title>Your Site Name</title></head><body><div id="layout">All but All content should be here</div></body></html>

The ID is important. It doesn't matter what you ID/Class it as , as long as it has a value/Id :). The entire tutorial is useless otherwiseOpen a new CSS file , or make a new one in notepad

body {  text-align: center;  }#container {  margin: 0 auto;  width: abcpx;  text-align: left;}

Body defines the entire document. The Body text align; center is used for the general code.The container tag defines the container ID we declared earlier :o.The Textalign left means all text within the container will be aligned left :P. The Margin tag defines no Margins on top or bottom but auto margins on the left. So replace Abc with whatever width you care to add , and the layout will be centred according to that width. That's essentially it. There are several other tweaks , but aren't really neccesary. Hoping I helped in some way , Encryptedwrath ;)NOTES:1) The text align is compulsary for IE users. Other browsers display the code fine without it :P

Edited by encryptedwrath (see edit history)

Share this post

Link to post
Share on other sites

pyost    0

pyost
Posted

I would just like to add why it is necessary to use text-align: center. If you tried creating a layout with that line of CSS code, everything would look fine in Opera and Firefox, which is how it should work. However, in IE, it would not. That's why you have to add text-align: center, which, oddly enough, helps. Why oddly enough? Well, the name says it all - text-align, not div-align. After all, it's Microsoft we are talking about and their lack of respect for WWW standards.

Share this post

Link to post
Share on other sites

encryptedwrath    0

encryptedwrath
Posted

Thanks Pyost , will add that in :)

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  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept