Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Fixed Centred Layout


2 replies to this topic

#1 encryptedwrath

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 123 posts
  • Gender:Male
  • Location:Bristol
  • Interests: Graphic Design , Football , Climbing , Caving , Music , Architecture , Flash/Xml integration , Website building , Forums.<br /> <br /><br /> I may have milked that list slightly , but what the hell xP
  • myCENT:25.91

Posted 30 October 2008 - 07:04 PM

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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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 otherwise

Open 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, 30 October 2008 - 07:19 PM.


#2 pyost

    Newbie [Level 2]

  • Kontributors
  • PipPip
  • 34 posts
  • Gender:Male
  • Location:Belgrade, Serbia
  • myCENT:55.01

Posted 30 October 2008 - 07:12 PM

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.

#3 encryptedwrath

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 123 posts
  • Gender:Male
  • Location:Bristol
  • Interests: Graphic Design , Football , Climbing , Caving , Music , Architecture , Flash/Xml integration , Website building , Forums.<br /> <br /><br /> I may have milked that list slightly , but what the hell xP
  • myCENT:25.91

Posted 30 October 2008 - 07:18 PM

Thanks Pyost , will add that in :)




Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users