website

For those of you out there who are still wondering how to transition from table design to css design, I am going to try and rescue you.

I will take you through a new thought process, and explain how you would do something in tables and then convert it to css.

Hopefully you will find this helpful. Here are the links providing the two examples in their entirety: table layout, css layout.

Let’s Begin

Let’s say you need to create a simple 2 column layout. Nothing fancy, but you want to apply css as much as possible because your new boss says it’s the only way to go.

Let’s start with a basic diagram of what you need.

• header
• menu
• body – with 2 columns
• footer

With tables you would probably break it up into 4 rows with tables inside each row representing each section. Like below.

You would have a row for the header, menu, content, and footer. There would be another table inside the menu with however many rows for the buttons. Inside the content row there would be a table with 2 rows, and a table in each of those rows. (these are the deepest tables, 3 tables deep) In the last row, another table for the footer so it aligned with the right column.

Now this is fine and dandy, but your boss – bless him – must have it done in css. So I will explain what we’ll need for the layout. You would probably break it up into 4 divs (instead of 4 rows within a table) Like below.

(This image is vaguely familiar) We can use the basic layout we thought of to guide our css layout. You would have a div for each part: the header, menu, content, and footer. Like so.

<div id=”header”>
</div>
<div id=”menu”>
</div>
<div id=”content”>
</div>
<div id=”footer”>
</div>

Example File. Here is the file you can start from if you want to follow along.

Now we will add divs inside those to help create the menu items and columns. Be sure when you use id’s {id=”header”} to not use the same name more than once on a page. This will help create more valid code. When you use class’s {class=”left”} you can use them as many times as you want.

Inside the content div add a div for each column, like so.

<div id=”content”>
<div id=”col_1”>
</div>
<div id=”col_2”>
</div>
</div>

Now that’s all the div’s we need. Hurrah!! We will add the menus and content soon. Now for some css. I know it doesn’t look like much now, but that’s the beauty of css. You can change the css and the html code doesn’t need to change. A good point to remember is that css is awesome at making it where all you need to do is change one file and all of your pages are changed.

Put this code right before the end of the head tag. We are creating css that will be used for computers so we set the style media attribute to screen. You would use the media attribute to apply css to print, handhelds, etc.

I will explain the reason for each bit of code below.

<style type="text/css" media="screen">/*set default values*/
body{
margin:0 auto;
width:756px;
}

To make the content align in the middle you can set the margin property in the body selector, like so {margin:0 auto} the first value represents the top and bottom margin and the second value the left and right. And we assign the width to be 756px.

a:link{
color:blue;
}
a:visited{
color:purple;
}
a:hover{
background-color:#ABABAB;
}
a:active{
color:red;
}

We also want to set some basic default styles that will apply to every link. CSS allows you to alter link states. These next few values are called psuedo classes, and I am using them on the anchor selectors. {a:link} is the unvisited state. {a:visited} is the visited state. {a:hover} is the rollover/hover state. {a:active} this is the on-click/activated state. Some of these rules can be applied to other html elements, but they are used primarily for the anchor tag. Here is a reference that explains this is much more detail.

.left{
float:left;
}
.right{
float:right;
}

I have created 2 class selectors called left & right. { I will explain what they do in a little bit.} In css, you use a dot in front of the class name, that’s called a class selector. With id’s you put a pound-sign in front of the name, that’s called an id selector.

/*set layout values*/
#container{
}
#header{
height:150px;
line-height:150px;
position:relative;text-align:center;
}
#menu{
position:relative;
background-color:#EAEAEA;
}
#content{
position:relative;
}
#col_1{
width:25%;
}
#col_2{
width:75%;
}
#footer{
color:#ccc;
font-size:10px;
padding-left:25%;
text-align:center;
}
</style>

Then I’ve applied id’s to all of the divs I made to create the layout. I won’t explain them in gross detail, but I will explain why I did certain parts. In the {#header} id selector I made the line-height property the same as the height. That is a very simple way of aligning text vertically. In {#col_1 & #col_2} I gave the divs their widths in percentages just like I did for the tables. But if you look at the page it doesn’t line up correctly. And that’s because we need to make them float next to each other. The easiest way to do this is to use the class selector that we just talked about, called {.left}. Apply this style to each column {put this in each column div tag » class=”left”}. This will make them line up next to each other. And since their widths don’t equal more than 100%, they will float perfectly next to each other. And lastly in {#footer} I added a padding-left:25%, since that’s the width of the 1st column, to the id selector so that it would align correctly with the second column.

Now this is where we are at. Example File 2.

You can view the finished html page here.

View Example

Here is part 2, where I explain how the menus work. Enjoy for now, and feel free to ask any questions.