Okay, so this has taken awhile for me to get around to writing.
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.
If you have any suggestions or questions please feel free to share your thoughts.
