Building Containers using divs, ids and CSS
Building Containers using divs, ids and CSS
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
Procedures to Practice - creating containers
Procedures to Practice - creating containers
Create a new HTML file in NotePad
Add the following markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The might div element</title>
</head>
<body>
<div id="banner">This is the banner area</div>
<div id="sidenav">This is the sidenav area</div>
<div id="content">This is the content area</div
<div id="footer">This is the footer area</div>
</body>
</html>
3. Save as containers.html (in procedures of course!)
The Division Element
The Division Element
We have put the content into containers using the division element (div).
Divisions, like paragraphs are also block elements; they can contain content.
Therefore divisions must have an opening and closing tag.
The attribute id defines the selector.
Create a file in NotePad and add the following code:
/* CSS Document */
body{
margin:0;
padding:0;
}
#banner{
background-color:#000099;
color:#ffffff;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
}
#content{
background-color: #FFFF99;
}
#footer{
background-color:#990000;
color: #999999;
}
Notice:
id selector is defined by the # symbol within our style sheet, and by the use of the id attribute within our HTML document - for example id="sidenav".
body selector is set to 0 for the padding and the margin. Usually the margin and padding are set to the browser default if not specifically set to 0.
5. Save this file as layout.css in the prostyles folder.
6. Link to the external style sheet, layout.css in the <head> element of containers.html using the following markup:
<link href="prostyles/layout.css" rel="stylesheet" type="text/css" />
7. Save both files and preview in a browser
Notice the page is split into colored divisions or containers.
Now we can start playing with the layout.
The banner we will leave as it is, which is at the top.
We want the sidenav on the left with the content flowing beside it on the right
The footer will be at the bottom of the page.
It should look like this:
To get the sidenav to stay on the left we will use the property float and we will give it a width of 160 pixels.
Note: The width of the average monitor is now 1024 pixels. There are still some monitors that only have a width of 800 pixels. Most web designers design for a width of 800px.
10. Add the following code (in red) to layout.css:
/* CSS Document */
body{
margin:0;
padding:0;
}
#banner{
background-color:#000099;
color:#ffffff;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
float: left;
width: 160px;
}
#content{
background-color: #FFFF99;
}
#footer{
background-color:#990000;
color: #999999;
}
11. Save both files and preview in a browser. It should look like this:
Let's add more content in the content area. We know eventually that area is going to have more than one line of text.
12. Add a heading and a couple of more paragraphs to containers.html.
13. Save both files and preview in a browser. It should look like this:
Yikes, that's not quite what we want.
The content is flowing underneath the sidenav and we don't want that to happen. We can give the content a left margin of 200 pixels.
14. Add the following code (in red) to layout.css:
/* CSS Document */
body{
margin:0;
padding:0;
}
#banner{
background-color:#000099;
color:#ffffff;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
float: left;
width: 160px;
}
#content{
background-color: #FFFF99;
margin-left:200px;
}
#footer{
background-color:#990000;
color: #999999;
}
15. Save both files and preview in a browser. It should look like this:
Here we go, now we are getting closer.
But it still looks a little messy with too much white space where we don't want it.
So let's do a little trick.
We are going to put all the containers into one big container and call it wrap.
We need a new <div> in the html and a new rule in the css.
16. Add the following code (in red) to layout.css:
/* CSS Document */
body{
margin:0;
padding:0;
}
#wrap{
background-color:#000066;
}
#banner{
background-color:#000099;
color:#ffffff;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
float: left;
width: 160px;
}
#content{
background-color: #FFFF99;
margin-left:200px;
}
#footer{
background-color:#990000;
color: #999999;
}
17. THIS IS VERY IMPORTANT...You are going to add this code into the html file where you want this CSS to be applied. With this code, even if you link the CSS file to the html file, you have still not indicated that you want to apply a 'div'. Divs are almost always defined in an external CSS sheet but will not work unless you put the div tag into the html. Add the following markup (in red) to containers.html:
<!DOCTYPE html>
<html>
<head>
<title>The mighty div element </title>
</head>
<body>
<div id="wrap">
<div id="banner">This is the banner area</div>
<div id="sidenav">This is the sidenav area</div>
<div id="content">This is the content area
<h2>Heading</h2>
<p>This is the content area</p>
<p>this is a paragraph </p>
</div>
<div id="footer">This is the footer area</div>
</div>
</body>
</html>
18. Save both files and preview in a browser. It should look like this:
Finishing touches.
Finishing touches.
The text is too tight to the sides of the containers. We'll add some padding to the banner, the sidenav and the footer.
Add padding:6px to all four containers in layout.css
19. Add the following code (in red) to layout.css:
/* CSS Document */
body{
margin:0;
padding:0;
}
#wrap{
background-color:#000066;
}
#banner{
background-color:#000099;
color:#ffffff;
padding:6px;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
float: left;
width: 160px;
padding:6px;
}
#content{
background-color: #FFFF99;
margin-left:200px;
padding:6px;
}
#footer{
background-color:#990000;
color: #999999;
padding:6px;
}
20. Save both files and preview in a browser. It should look like this:
21. Set the width of the wrap to 800px
/* CSS Document */
body{
margin:0;
padding:0;
}
#wrap{
background-color:#000066;
width:800px;
}
#banner{
background-color:#000099;
color:#ffffff;
padding:6px;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
float: left;
width: 180px;
padding:6px;
}
#content{
background-color: #FFFF99;
margin-left:200px;
padding:6px;
}
#footer{
background-color:#990000;
color: #999999;
padding:6px;
}
22. Save both files and preview in a browser. At this point, a lot of you may find that your containers page does not look as it should per the example above. To save yourself the trouble of having to go back through every line of code and figure out where you went wrong, please replace all of the code you have in layout.css with the following code...this code has some additional content in it that will be used a few steps later, so make sure you replace all of your layout.css code with the code below regardless of whether or not your page looks correct.
/* CSS Document */
body{
margin:0;
padding:0;
}
#wrap{
background-color:#000066;
width:800px;
background-image:url(../images/bg_wrap.gif);
background-repeat: repeat-y;
margin: 0 auto;
}
#banner{
background-color:#000099;
color:#ffffff;
padding:6px;
}
#sidenav{
background-color:#000066;
color:#CCCCCC;
float: left;
width: 180px;
padding:6px;
}
#content{
background-color: #FFFF99;
margin-left:200px;
padding:6px;
}
#footer{
background-color:#990000;
color: #999999;
padding:18px;
background-image: url(../images/xhtml_h1_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
}
Basically that is how the pros do it but these days, even the pros let Dreamweaver do most of the work for them! We're almost there!
Page updated
Report abuse