12:12 PM
dpk
Here I'm going to tell you another important thing. Most of the new web designers has problem that how to center the website in a browser. Today I'll teach how to do that in easy way using simple CSS.
There are some alignment style we using for web pages.
- Align Center all the content of page.
- Align Left / Right all the content of page.
- Set content to use full width of page.
- Or align Top / Bottom full width and center the middle content of web page.
- And also there are some another alignment.
Let's see how to center the content of web page.
As we discussed on previous post, we know that what are the standard width sizes for a webpage.
http://latestwebdesignstuff.blogspot.com/2012/01/default-sizes-for-web-page-width-and.html
When we planing to center the content, we should know the what is the width size we are going to use on this web page / website.
Let's take it as 960px.
First we need to write the CSS code. Just a simple code.
<style type="text/css">
#container {width:960px; margin:0px auto;}
</style>
On above CSS code, we set a style for the ID called container. Just a name. I used this because it is unique and very easy to find it. And set as a ID. Not a style class.
For the container, we set width as 960px. That means our web page width going to be 960px.
Then set the margin. In here I used short form. This is how to read it.
Margin property has 4 sub properties as margin-top, right, bottom and left.
In here we used margin main property and with 0px, we set the top and bottom margins. Now top and bottom is 0px. And left and right sides we set as auto. It will says, automatically maintain the left and right margins with browser width. Once browser width exceeds 960px, automatically takes the free area and divide it by 2 and set left and right. Now it is center.
Here is how we can integrate the ID to the HTML code.
I'm going to use div element.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Web Site TItle</title>
</head>
<body>
<div id="container">Web Site Content Will goes here...</div>
</body>
</html>
It's very simple and completely cross browser supported.
Let's meet with a another post...
As we discussed on previous post, we know that what are the standard width sizes for a webpage.
http://latestwebdesignstuff.blogspot.com/2012/01/default-sizes-for-web-page-width-and.html
When we planing to center the content, we should know the what is the width size we are going to use on this web page / website.
Let's take it as 960px.
First we need to write the CSS code. Just a simple code.
<style type="text/css">
#container {width:960px; margin:0px auto;}
</style>
On above CSS code, we set a style for the ID called container. Just a name. I used this because it is unique and very easy to find it. And set as a ID. Not a style class.
For the container, we set width as 960px. That means our web page width going to be 960px.
Then set the margin. In here I used short form. This is how to read it.
Margin property has 4 sub properties as margin-top, right, bottom and left.
In here we used margin main property and with 0px, we set the top and bottom margins. Now top and bottom is 0px. And left and right sides we set as auto. It will says, automatically maintain the left and right margins with browser width. Once browser width exceeds 960px, automatically takes the free area and divide it by 2 and set left and right. Now it is center.
Here is how we can integrate the ID to the HTML code.
I'm going to use div element.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Web Site TItle</title>
</head>
<body>
<div id="container">Web Site Content Will goes here...</div>
</body>
</html>
It's very simple and completely cross browser supported.
Let's meet with a another post...
Posted in: 
0 comments:
Post a Comment