The structural code
First have a look at the structural code:
<ul id="nav">
<li id="home"><a href="index.html" title="This link takes you back to the homepage">home</a></li>
<li id="about"><a href="about.html" title="Find out a bit more about this weblog and myself">about</a></li>
<li id="archive"><a href="archive.html" title="Browse the archive">archive</a></li>
<li id="contact"><a href="contact.html" title="Contact information">contact</a></li>
<li id="links"><a href="links.html" title="List of websites I find interesting">links</a></li>
</ul>
As you can see the code for the navigation is an unordered list. Each list item represents a tabbed button and has a its own ID. So far so good, nothing difficult about that. The CSS is where the power lays. Using the right CSS will turn this text-based list into a graphical one.
The CSS
The CSS adds a graphical layer on top of the code. First we start by styling the (<ul>) unordered list element.
Styling the unordered list element
ul#nav {
position:absolute;
top:194px;
left:35px;
width:380px;
height:27px;
}
For my site’s design I’ve used an absolute positioning of the navigation. This means that the navigation is shown on the exact X and Y coordinates on the page: 194 pixels from the top and 35 pixels from the left. Next I define the width and height of my navigation : 380 pixels width and 27 pixels height.
Styling the list item
ul#nav li {
padding:0;
margin:0;
list-style-type:none;
float:left;
text-indent:-9999px;
}
First we set the padding and margin to zero so there is no space between each tabbed button. The property "list-style-type" has a value of "none". This turns off the rounded bullets that appear by default. To achieve a horizontal navigation we need to give each list item a left float. We also need to hide the text as well, we can do this by using a negative text indentation of -9999px which will throw the text outside the browser window.
The CSS styles for the anchor element within the list item
ul#nav li a {
border:0;
text-decoration:none;
display:block;
background:transparent url(../images/navigation.gif) no-repeat;
}
The default border that appears with an anchor element is set to zero (border:0). Same goes for the text decoration property, this is set to none, to hide the default underlining. Then we give each list item a display:block, this way the list item will be forced to render as a blocked element and we will be able to give this box area an exact with and height. Because the width differs for each tab, both measurements are defined in a separate style. In the last property we link the background navigation image in the CSS.
Each tab has its own ID
li#about a {
width:69px;
height:27px;
}
As described above, every list item has its unique ID. Each list item, each representing a tabbed button has its unique width and height for the anchor element. The above example shows the styles for the "about" tab.
The CSS styles for the anchor pseudo-classes
li#about a:link, li#about a:visited {
background-position:-66px 0px;
}
li#about a:hover, li#about a:focus {
background-position:-66px -27px;
}
In the first style we define the links and the visited links. The beauty of this technique reveals itself. It’s all about background positioning. What we do is using the exact X and Y coordinates that fit the top left corner of the part we want to reveal. The second style defines the style when the mouse hovers the tabbed "about" button. The focus anchor pseudo-class is valuable for people using a keyboard devices.
body#about-page ul#nav li#about a {
background-position:-66px -54px;
}
Last but not least is the style for the active tab. The above styles show the CSS for the "about" tab. Depending on your experience and knowledge of CSS, you probably wonder why I use body#about-page. Well basically what I did is give each body element for the pages that are linked to each tab an ID. This will become more clear in a later post when I’ll talk a bit more about the implementation of my template pages in Expression Engine (EE). My header is a separate EE template which means that if I need to modify my header, I need to do this only once and all pages that include this template will be updated. You see in EE you can work with nested templates, this is one of the powerful features that I love about EE.
I guess you are most curious about the navigation’s code. Here you go.