|
Let's start with some basic HTML code. If you use Dreamweaver you can just create a new document and you'll get a blank page, but if you go to CODE VIEW you'll find your document already has some code. If you need more info on how to edit CSS in Dreamweaver you can read the "CSS in Adobe Dreamweaver" tutorial by Abraham Chaffin.
Here's how the starting HTML code should look. I already added it a TITLE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS centered layout</title>
</head>
<body>
</body>
</html>
Now, let's add some plain text inside the <BODY> tag.
<body>
This is the main content in plain text
</body>
If you open the document in a browser, the text should show at the top left corner.
The first step to center the content will be to place it inside a container DIV. I'll assign an ID of "wrapper" to the DIV, so later I can add a specific CSS rule for it.
<body>
<div id="wrapper">This is the main content in plain text</div>
</body>
By now, the content looks the same if you preview it in a browser, but structurally it's very different. Let's see what can we do with a little CSS.
The CSS rule should be inserted inside the document HEADER. We'll add a rule for the "wrapper" DIV, giving it a color of #F00, so we can see what's happening.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS centered layout</title>
<style type="text/css">
<!--
#wrapper {
background-color: #F00;
}
-->
</style>
</head>
We can preview the document now and see the red DIV from side to side of the browser window.
Now we can define a fixed width for the DIV. This is very important, otherwise the DIV will be always expanded to the width of the browser window and we'll never be able to see it centered. I'll give it 400px, kind of small for the real world, but good for the purpose of this tutorial.
#wrapper {
background-color: #F00;
width: 400px;
}
Finally, we add a left and right auto margins.
#wrapper {
background-color: #F00;
width: 400px;
margin-right: auto;
margin-left: auto;
}
That's it! You can place whatever content inside the "wrapper" DIV and it will be horizontally displayed at the center of your browser window.
###
|
Reply
Like
