Session III - Advanced CSS - Replacing the Table out for the DIV Layout

Adding the CSS Styles

Now that you have broken up your content into divs you can begin to apply styles to your page.

Tip: Most tags have default values for many css properties, including the margin and padding. If you are having trouble with extra space that you don't want between elements try setting the margin and/or padding to 0px and see if it helps.

We will start by applying some basic styles to the body of the document, the container div, and the main divs of the document. On the container div we use "margin:auto;" to center the container div on the page. Changes to existing CSS styles are denoted with an asterisk (*). If you are copying from this page make sure you remove the asterisks before you put your page online or it will not work right.

body { 
  font-size: 12px;
  font-family: sans-serif;
  background-color: #524F46;
}

img.float-left {
  float: left;
}

img.float-right {
  float: right;
}

#container {
  width: 760px;
  border: 1px solid black;
* margin: auto; 
}

#header {
* background-color: #CCB94D;
}

#top {
  background-color: black;
  height: 37px;
}

#h1-image {
  background-color: #CCB94D;
  border-bottom: 1px solid black;
}

#left {
  float: left;
  width: 160px;
* background-color: #F4EECC;
}

#content {
  float: left;
  width: 440px;
}

#right {
  float: right;
  width: 140px;
* margin-bottom: 10px;
* background-color: white;

}

#clear {
  clear: both; 
  height: 10px;
}

#footer {
  display: clear;
  width: 100%;
* background-color: black;
}

Now we are going to apply some styles to the divs inside the header of the document. Through the css we will apply all the formatting for the header including the header image.

We will be applying the styles to individual tags in the id. In this way you can change the properties of a header or paragraph within an id without changing that tag in the rest of the document.

#h1-image h1 {
  background-color: #CCB94D;
  background-image: url(images/h1-title.jpg);
  text-indent: -4000px;
  width: 760px;
  height: 142px;
  margin-top: 0px;
}

Next we will start applying styles to the content of the document.

We'll start with the left div. For the left navigation section we need to assign styles to the header and the list of links contained in an unordered list. Here we use "list-style-type: none" to remove the bullets from the unordered list. We also remove the margin and padding from the ul to unindent the list.

#left h2{
  background-color: #D0CAAA;
  color: #4A472B;
  font-size: 14px;
  font-weight: normal;
  padding: 3px;
  margin: 0px;
}

#left ul {
  padding-left: 0px;
  margin-left: 0px;
  text-align: center;
  list-style-type: none;
}

#left ul li {
  list-style-type: none;
  margin-bottom: 25px;
}

#left a {
  color: black;
  font-size: 14px;
}

Next we will apply a style to the main paragraphs of the page.

#content p {
	padding: 10px;
	vertical-align: top;
	line-height: 175%;
	padding-top: 0px;
	margin-top: 0px;
}

Finally we apply some styles to the right hand column of the page. Every div contained within the right ID will become an individual block of text. So to create the two news items you see in the demo you should enclose each block of content in a div.

#right div {
	margin-bottom: 10px;
	background-color: #F4EECC;
}

#right p {
	padding: 5px;
	margin-top: 0px;
	color: #4A472B;
}

#right p a {
	color: black;
	font-size: 14px;
}

#right h2 {
	text-align: center;
	background-color: #D0CAAA;
	color: #4A472B;
	font-size: 14px;
	font-weight: normal;
	padding: 3px;
	margin: 0px;
}

And the footer.

#footer p {
	color: white;
	font-size: 11px;
	padding: 5px;
	margin: 0px;
	text-align: center;
}

And with that the layout should be complete.

Back: Table of Contents

Next: Margin/Padding

select a page...

resources...

CSS Layouts: Replacing the Table…

Adding the CSS Styles