Up until now, we have been more-or-less focusing on the grammar and syntax of XHTML and CSS. Now we will examine some common conventions that web developers use. These are by no means rules that must be followed, but there is a reason why these techniques are popular and useful, so you should follow them, at least for now.
Put it in a container
In general you want to wrap ALL of the content in the body of your XHTML document inside an outermost div element. Some people call this outermost div a “wrapper”, and others call it a “container”. No matter, the idea is the same. The container div should contain everything else on the page.
For example, the body section of an XHTML document using a container div:
<body>
<div id="container">
<!-- all XHTML code for the body of the page goes in here -->
</div>
</body>
Following this convention gives you more control over how the page is displayed. For example, some advantages of using container divs:
- limit the width of the page so it takes up less than the full width of the browser
- center the entire contents of the page within the browser window
- easily add margins above and/or below the content of the page
- apply a background image to just the content area of the page
To sum these advantages up, using a container div allows you to control the contents of a page as a whole, rather than element by element.
Now we will look at some of the CSS code that would allow us to perform each of the above tasks
Limit the width of the page
Setting the width of the page is as simple as setting the width of the container div. Since all content is inside of the container, all content is restricted to this width:
div#container {
width: 970px;
}
Center the entire contents of the page
To center the page, you must first give the container a fixed width, as exhibited above. Otherwise, the container, being a block element, would take up as much width as it can, which in this case would mean the full width of the page. By reducing the width to a fixed amount, the width of the page is no longer as big as the width of the browser window, so you have room in which to center the content.
Using a container div, centering the page is as simple as adding equal margins to the left and right side of the container. But how do you know how big to make that margin? Fortunately, there is a CSS margin setting called “auto” that automatically gives the margins the maximum size available:
div#container {
width: 970px;
margin-left: auto;
margin-right: auto;
}
Easily add margins above and/or below the content of the page
Often, you will also want to remove any top and bottom margins from the container div that the browser may have added by default. If you recall from the W3Schools margin reference page, the margin property in CSS can take either one, two, or four arguments. The following code uses the margin property with two arguments to set the top and bottom margins to “0″ and the left and right margins to “auto” in one fell swoop:
div#container {
width: 970px;
margin: 0px auto;
}
If you wanted to, you could set the margins for each side of the container individually using the margin setting with four arguments. The four arguments are in clockwise order: top margin, right margin, bottom margin, and left margin:
div#container {
width: 970px;
margin: 0px auto 0px auto;
}
This is equivalent, but much shorter than this code, which does exactly the same thing:
div#container {
width: 970px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Apply a background image to just the content of the page
Applying a background image to the container is as simple as using the CSS background-image property. This will apply only to the background of the container, so if your container is not as wide as the width of the entire browser window, you will see that the background does not take up the full width of the page.
div#container {
width: 970px;
background-image: url(../images/background.jpg);
}
Note: the URL used to indicate the image file to use for the background-image must be relative to where the CSS lives. So, if you have your project set up in a folder called “project_name”, using our standard project folder structure, you will typically have a folder structure that resembles this:
project_name/
project_name/images/
project_name/css/
If the CSS file is inside of the “css” subfolder, and the image is inside of the “images” subfolder, then you will need to use a URL that indicates that the browser should look for the image file one level up from where the CSS file lives, and then inside of the “images” folder. So if your image file is named “background.jpg”, the URL to use in the CSS file would be:
../images/background.jpg
Loading ...