Here I will discuss about a simple tutorial of how to make a basic layout with css with some good practices.
First thing comes, how should the layout should come, fixed or liquid? Liquide design are always suggested to avoid because of various reasons, so i am simply selecting fixed design.
Choose a height & a width (Here I am using 595px & 1000px respectively). if u give a border of your body & check it, you will find that ie & ff are using different margin value & padding value( specially for top & bottom which are assigned by browser itself if we don't assign). So, its always best to assign a fixed value for margin & padding(normally 0). so use the following code:
html, body, div
{
margin:0px auto 0px;
padding:0px;
}
body
{
width:1000px;
height:595px;
}
if you are decided to use same height & width for all of your design, you can make a file named like common.css , which will be reusable every time in future for other designs.
Now, lets decide about the layout. i am here using a common simple layout which is consists of a header, a footer & three columns in the middle(left,center & right). The html code is as follows:
<body>
<div id="header"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="footer"></div>
</body>
now, for the header part we will use the following style:
div#header
{
width:100%; /* as we already decided the body width, 100% will take the whole & will work very fine */
height:100px;
background:#0099FF;
}
now for left part:
div#left
{
width:180px;
background:#00FF00;
height:450px;
float:left;
}
here hope all have the idea why 'float' is used, its to leave places for other divs. You can also use ul li inline instead of float, as you like. Now for center & right part:
div#center
{
width:640px;
background:#FF0000;
height:450px;
float:left;
}
div#right
{
width:180px;
background:#00FF00;
height:450px;
float:left;
}
At last we got to the last part, footer:
#footer
{
width:100%;
height:45px;
background:#FFCCFF;
clear:left;
}
if you don't use clear:left, ie will give you ok result, but firefox won't as it supposed to be to the right side of the #right div. so we must need to cancel it.
Do you see something strange in this csss code? yes, there is. You will see that #left, #center & #right all have two properties in common:
height:450px;
float:left;
So, if once, somebody tells you to change the height of the middle portion, you have make the change three times on three places. But, we always should try to make our code optimized so that, a similar properties can be changed by only changing on one place. So, write the following code:
div#left, div#center, div#right
{
height:450px;
float:left;
}
and also remove these two lines from all three that was used before.
Remember another thing, css doesn't got compiled, they are just interpreted, that means line by line executing, if anything exists there that browser can't understand, it simply ignores it. Also, if you set same property twice on a css, the last will take effect. To make browser independent, you will have to use css hack often, some issues i have already discussed before.
0 comments:
Post a Comment