how to center a div on a page for an overall wrap
Posted: Tue Apr 13, 2010 2:55 am
So you want to center a page like you would with tables, with center? It works very similar to what you are thinking, but you have to do a few things you might not think about and take for granted. First, give you body some attributes as follows:
body
{
text-align:center;
margin:0px;
padding:0px;
}
This allows all objects, not just text, to be centered on the entire page, the body itself as you would write <body>-----</body> where ----- is all of your page contents.
next, you can give yourself an easy to remember div class that will hold the entire contents you want centered, say, 'wrap'. To properly allow the div to center, you have to let IE and FF know it has a width, say, 900px so it can do it's centering calculations as so:
.wrap
{
width:900px;
margin:auto;
}
The . before wrap means it is a class. everywhere on a page you use it, it can be called from with:
<div class="wrap">blah blah blah</div>
The margin:auto allows the div to automatically center itself with it's parent, body, because body likes things centered 'text-align' and body again knows wrap's width, 900px.
You can reuse this over and over on any page you make if you put this in the beginning of your html code as so, as in page.html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<div class="wrap">blah blah blah</div>
</body>
</html>
The head tag goes before the body to identify it will be used to modify the normal, boring html code. it is a text file you will save in a text editor and it is css. it is a stylesheet, and it will be called 'page.css'.
so, open your favorite text editor, and type in the css from above:
body
{
text-align:center;
margin:0px;
padding:0px;
}
.wrap
{
width:900px;
margin:auto;
}
then save it as page.css, and if it says 'file-type' in notepad, change its choice to *.* not *.txt, because it will save as page.css.txt, which makes no sense at all. if you're using a program like simpletext in apple's leopard, don't. use something else that allows you to save a file any way with any extension you like. if you're using dreamweaver, that's easy, make a new file and then choose css. then save it, remembering this....
your html file, say, page.html, should be in the same folder as page.css.
website
\____page.html
\____page.css
voila. try using apache server if you can, and storing this in its own folder, make a new folder called 'website101' or whatever you like. then you can goto your browser and enter the new page address with:
http://127.0.0.1/website101/
and you will see both pages. try page.html and you'll see it is working and centered!
next up, you'll probably like to make a 1280 wide x 1024 high image, jpg etc, you will use as a background image that has a nice design on either side of the 900w centered div, 'wrap'.
body can then have this in page.css:
body
{
background-image:url(page.jpg);
background-repeat:no-repeat;
background-position:top center;
text-align:center;
margin:0px;
padding:0px;
}
and then save it again.
now you can open up gimp or photoshop or whatever and make a 1280 x 1024 image, rgb image. then make a 900 x 100 image, and copy the entire area and paste it into the 1280 x 1024 image. this allows you to have it centered so you know what the page will look like with the background art. play around with your layers, adding more etc, always remembering the small 900 x 100 is only for visual aide in design. save your design as layers like a PSD or multiple layer object in GIMP.
then delete the 900 x 100 placer, and save as a 50-100% quality jpg, your choice, as 'page.jpg' in your website101 folder. then reload your page in your browser and voila, it works!
enjoy it! keep learning and teach your friends!
body
{
text-align:center;
margin:0px;
padding:0px;
}
This allows all objects, not just text, to be centered on the entire page, the body itself as you would write <body>-----</body> where ----- is all of your page contents.
next, you can give yourself an easy to remember div class that will hold the entire contents you want centered, say, 'wrap'. To properly allow the div to center, you have to let IE and FF know it has a width, say, 900px so it can do it's centering calculations as so:
.wrap
{
width:900px;
margin:auto;
}
The . before wrap means it is a class. everywhere on a page you use it, it can be called from with:
<div class="wrap">blah blah blah</div>
The margin:auto allows the div to automatically center itself with it's parent, body, because body likes things centered 'text-align' and body again knows wrap's width, 900px.
You can reuse this over and over on any page you make if you put this in the beginning of your html code as so, as in page.html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<div class="wrap">blah blah blah</div>
</body>
</html>
The head tag goes before the body to identify it will be used to modify the normal, boring html code. it is a text file you will save in a text editor and it is css. it is a stylesheet, and it will be called 'page.css'.
so, open your favorite text editor, and type in the css from above:
body
{
text-align:center;
margin:0px;
padding:0px;
}
.wrap
{
width:900px;
margin:auto;
}
then save it as page.css, and if it says 'file-type' in notepad, change its choice to *.* not *.txt, because it will save as page.css.txt, which makes no sense at all. if you're using a program like simpletext in apple's leopard, don't. use something else that allows you to save a file any way with any extension you like. if you're using dreamweaver, that's easy, make a new file and then choose css. then save it, remembering this....
your html file, say, page.html, should be in the same folder as page.css.
website
\____page.html
\____page.css
voila. try using apache server if you can, and storing this in its own folder, make a new folder called 'website101' or whatever you like. then you can goto your browser and enter the new page address with:
http://127.0.0.1/website101/
and you will see both pages. try page.html and you'll see it is working and centered!
next up, you'll probably like to make a 1280 wide x 1024 high image, jpg etc, you will use as a background image that has a nice design on either side of the 900w centered div, 'wrap'.
body can then have this in page.css:
body
{
background-image:url(page.jpg);
background-repeat:no-repeat;
background-position:top center;
text-align:center;
margin:0px;
padding:0px;
}
and then save it again.
now you can open up gimp or photoshop or whatever and make a 1280 x 1024 image, rgb image. then make a 900 x 100 image, and copy the entire area and paste it into the 1280 x 1024 image. this allows you to have it centered so you know what the page will look like with the background art. play around with your layers, adding more etc, always remembering the small 900 x 100 is only for visual aide in design. save your design as layers like a PSD or multiple layer object in GIMP.
then delete the 900 x 100 placer, and save as a 50-100% quality jpg, your choice, as 'page.jpg' in your website101 folder. then reload your page in your browser and voila, it works!
enjoy it! keep learning and teach your friends!