Friday, May 19, 2006

Margin Tutorial

Okay, guys. I'll just show you what you need to alter in your code to change the margins. One disclaimer though is I don't if all the codes are written exactly the same but at least, you will have an idea what you need to play around with to get that.
For example, the chunk of code in my template that needed to be modified:
/* Content----------------------------------------------- */
#content {
width:820px;
margin:10 auto;
padding:0;
text-align:left;
}
#main {
width:560px;
float:left;
}
#sidebar {
width:240px;
float:right;
}
What is in red is what needs to be modified. They are the width in pixels of your page. First is #content width, which is the whole width of text. This is roughly approximate to width of main comment (posts) plus the width of the sidebar (which is where your profile & links on the side are located) . However, the number of pixels for content width is usually slightly bigger that the exact total of main + sidebar because it needs to accounts for margins included in the layout. So you will need to change the number of pixels for the content width, and do so as well for the main comment width. In my case, I also made my sidebar a tad larger. The values posted above have already been modified; they were something like 560 px, 330 px& 220 px initially. You just need to increase the values to something you like.

Labels: , ,

0 Comments:

Post a Comment

<< Home