This is the second part to the learning to create css layout series. This part focuses on how to make the menu. The last part left off here.

We are going to create the menu from an unordered list. The main reason we do this, is because of semantics. When css is disabled or someone is using a screen reader it’s helps in navigation. But also it is because the menu is a list or grouping of links.

So lets start with the xhtml.

<ul>
<li><a href="#" class="active">Main 1</a></li>
<li><a href="#">Main 2</a></li>
<li><a href="#">Main 3</a></li>
<li><a href="#">Main 4</a></li>
<li><a href="#" class="last">Main 5</a></li>
</ul>

Which is pretty simple. Much cleaner than separate <td> for each link. Each link is nested inside a list tag. And whichever page you are on the anchor tag has a class of {active} attributed to it. This is strictly for declaring css on that element to help distinguish it from the other menu items. And you might have noticed a class of {last}, which is being used for controlling graphical elements on the end anchor tag.

That’s pretty simple and it can be controlled quite extensively with css. Here is the css that controls the way the unordered list is setup and displayed.

#menu ul{
margin: 0;
padding: 0;
width: auto;
}
#menu ul li{
display:inline;
}

We have put the unordered list inside the {menu} div. We can set specific rules for just this div by attributing #menu before all of the elements we want to control inside that div. That way it won’t affect any other tags on the page that are not in that div.

We get rid of the default values that are atrributed to an unordered list by setting margin and padding to 0. Also each list item inside the unordered list is set to display inline instead of block. What this does is align the elements to sit beside each other instead of on top of each other.

Now here is the gritty part of the menu, and where you can really effect the colors, size and many other aspects.

#menu a{
border:1px solid #333;
border-right: none;
color: black;
display:block;
float:left;
margin-left:-1px;
padding:5px 0;
text-align:center;
text-decoration: none;
width:20%;
}
#menu a.last{
border-right:1px solid #333;
margin-right:-1px;
}
#menu a:hover{
background-color:#181818;
color:#EAEAEA;
}
#menu a.active{
background-color:#181818;
color:#EAEAEA;
}�

Okay, hopefully you are not overwhelmed. I will try and explain the important parts of what this css does. First we assign a border to each link as well as set the right border to be 0px by using the word none. This makes the border be the same width across the entire menu. And because we got rid of the right border, the last anchor tag needs to have it put back on. So that’s where a.last comes to play. We apply a 1px border back onto that element.

Normally anchor tags are inline elements, but we want them make them have cool hover states and have the entire height of the link clickable. So, we need to set display to block, and have them float left. What this does is allow you to set a height and makes the extra space on the element clickable, not just the text. Which is really user friendly, and allows for easier navigation.

When working with css and making things line up correctly you need to be aware of your elements width. Because we added a border to each link we need to offset the width of the element so that it is what it was before the border. Since each element has 1px extra, because of the border, we can set the margin-left to -1px. And on the a.last element we can add margin-right -1px (since it needs 2px taken off).

The biggest reason for this is so when we set the width of the links it is correct. Because we have 5 links we can set the width to %20. If we hadn’t taken off 1px with margin, the links would not display correctly.

Now we just add some simple decoration with padding. And we are using shorthand css here. The first number effects the top and bottom, and the second number effects left and right. Then we add some colors and set the :hover and :active pseudo elements. So, when you rollover the links, they behave like you expect.

It’s that simple. Once you have created a few sites using css. You will begin to understand how easy it is to effect entire websites.
Hopefully this tutorial has shed some light on how to create a css layout that you would normally have done with tables. The final example has some extra css thrown in to help show how to create a more complete look.

View Completed Example

If you have any suggestions or questions please feel free to share your thoughts.

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.

Multiple layouts are included (left and right aligned).

• 2 column: 800×600 and 1024×768
• 3 column: 800×600 and 1024×768

There were a few things that I wanted as default personally.

• Font sizes as ‘em’ (so that everything would increase or decrease easily)
• The ability to easily use floating divs
• Basic css styles for form elements
• I didn’t end up creating a default css menu, since those change every time I do a site.My website is setup using these css files, with the id’s and such renamed to work with wordpress. I loosely based my default.css file on meyerweb.com’s example. Please feel free to use this set of files in any way. View ExamplesDownload FilesNow!