Jump to content


Photo
- - - - -

Web page with centre column


  • Please log in to reply
No replies to this topic

#1 rullingen

rullingen

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 09 August 2007 - 03:44 AM

Web page with centre column

If you already have basic CSS & HTML knowledge then you can skip straight to “Creating a centre column in CSS” otherwise I recommend reading;


Anyhows



Creating a centre column in CSS

As many browsers do not support the positioning classes correctly, text hacks must be used to create a truly aligned CSS column. To start, we must create a container layer for the centred column. This can be done in one of two ways.


The body tag can be used as this container layer. The CSS should look like



Body {

text-align: center;

}



Otherwise a new DIV layer should be used like so



#container {

text-align: center;

}



The

text-align: center;

part makes sure that everything inside that tag is centred on the container and in the case of the body tag everything on the page is centred.



So, after we have contained our column we must create it. The code used here is very simple and looks like a normal layer but has a few key ingredients.



#centered {

padding: 10px 10px 10px 10px;

width: 700px;

margin: 0 auto;

text-align: left;

height: 400px;

background-color: #FFF2CC;

}



The two key ingredients here are



margin: 0 auto;

text-align: left;




The margin tag is purely for Internet explorer. This makes sure the layer is read by the browser as a text element, ensuring the centre position.

The text-align tag is to counter act the previous text centering tag for the content inside the column.

Now for the HTML, if you used the Body tag as the container then you should just be able to lay down the following DIV tag.



<DIV id=”centered”>TEXT</DIV>



However, if you used the container layer then you must use this code;



<DIV id=”container”>

<DIV id=”centered”>

TEXT

</DIV>

</DIV>



This creates the container and then the column and after all this you should hopefully have a finished product.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users