A not-so-secret secret
This entry was posted on January 4, 2008
My new rainbow-coloured navigation has gone down very well with lots of lovely comments, even several people admitting to visiting Calm Banana just to play with the navigation. Hey, if it brings in visitors, why not? 
As a thank you for all the kind words, I’m going to show you how I built my navigation.
It starts with a basic unordered list.
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">extras</a></li>
<li><a href="#">domain</a></li>
<li><a href="#">links</a></li>
</ul>
To distinguish this unordered list from other unordered list I’m going to use on the site, I’ve wrapped it in a div tag with an id of “navigation”. Also, because each link is going to have a different background colour on the hover, I’m going to assign an id to each list-item.
<div id="navigation">
<ul>
<li id="home"><a href="#">home</a></li>
<li id="about"><a href="#">about</a></li>
<li id="extras"><a href="#">extras</a></li>
<li id="domain"><a href="#">domain</a></li>
<li id="links"><a href="#">links</a></li>
</ul>
</div>
And that’s it as far as structure and HTML is concerned. Nothing else is needed; well, apart from the urls for the links, but they’re not really relevant to this tutorial.
Now we just need to concentrate on the CSS needed to make the navigation more aesthetically pleasing.
#navigation {
margin:0 auto;
width:750px;
}
This centres the navigation and assigns it a width of 750 pixels, which is the width of my layout.
#navigation ul {
list-style-type:none;
padding-left:0;
}
This part removes bullets point, and resets the padding on the left of the unordered list to 0. Although I have the “global reset” (* {margin:0;padding:0;}) at the top of my stylesheet, I’ve had problems in the past with browsers still applying padding to the left of unordered lists. This deals with that.
For those of you not fully familiar with CSS, the “#navigation ul” means “every ul tag that is inside a containing element with an id of navigation”.
#navigation ul li {
display:inline;
}
This part changes the display of the list-items (inside a ul inside a containing element with an id of navigation) from “block” to “inline”, and has the effect of making the list-items appear next to each other as if they were a sentence.
Next we have the most complicated part - styling the actual links.
#navigation ul li a {
display:block;
float:left;
width:150px;
text-align:center;
height:2em;
line-height:2em;
color:#FFF;
background:#333;
text-decoration:none;
font-size:120%;
}
This intimidating piece of markup refers to all links inside list-items inside unordered lists inside containing elements with the id of navigation. Ids are (or at least should be if you do it properly) unique to each page. I only have one navigation.
display:block changes the display of the links from “inline” to “block”, which is the opposite of what we did earlier with the list-items. I did this because I want the links to be clickable in as large an area as possible. I don’t just want the text to be clickable.
If we didn’t have float:left, the links would display how a typical unordered list appears. In other words, they would be on top of each other. That’s not the intention at all, so we float them to the left and they pop back up onto one line again.
width:150px tells the browser that the links should all be 150 pixels wide. There are five links, and I want them evenly distributed. The full width of the navigation is 750 pixels, so 750 divided by five is 150.
text-align:center centres the text inside each link.
height:2em lets the browser know how tall each link should be, and line-height:2em makes sure the text inside the link is vertically-aligned to the middle.
color:#FFF and background:#333 sets the colour of the text to white and the background of each link to dark grey.
text-decoration:none gets rid of the awkward underline under each text. Underlines are good as they help distinguish the link from regular text, but with the navigation there is no regular text, and an underline is not needed to show the visitor that these are in fact clickable links.
font-size:120% makes the text in the links 120% bigger than the text in the surrounding element, which in this case is the body. It’s just there to make the links even more obvious.
That deals with most of the presentational aspects of the links, so now there’s only one more thing to sort out - what do we want to happen when a mouse hovers over a link?
We want rainbow colours!
If you’re familiar with CSS, you should be away of the :hover pseudo-selector. Do you also remember that we assigned a unique ID to each list-item? That allows us to do this:
#home a:hover {
background:#C91212;
}
With regards to each link inside a containing element with an id of home, when you hover over it, the background will change from #333 to #C91212. Because there is only one “home”, and there is only one link inside it, we know exactly what’s going to happen.
Here’s the CSS to change the hovers on the other links:
#about a:hover {
background:#ED7321;
}
#extras a:hover {
background:#F2C64E;
}
#domain a:hover {
background:#67BF24;
}
#links a:hover {
background:#3C73C7;
}
And that’s it. When I first put together this navigation, I’d neglected the “display:inline” for the #navigation ul li, which led to a very perculiar staircase effect in IE6 and IE7.
Any questions?
12 lovely people have commented
Top tips for organising your stylesheet
This entry was posted on October 28, 2007
If you take a look at my stylesheet, you will see that it is a complete mess! Aisling may like to be taken on an adventure when she’s looking through her stylesheet, but I do not! I like to be able to scroll through and find exactly what I’m looking for. I want to be able to see with a glance the padding that makes my layout mess up in Internet Explorer, or the typo that means my layout fails in Firefox.
Group your CSS rules
Grouping is good! So, have all your header rules in one place, all your link rules in another place, all your table rules together. Keep like things together, and unlike things apart.
Comment your stylesheet
/* Comments in stylesheets are enclosed with a forward slash and an asterisk. You can use comments to provide headers for each section of your stylesheet, as well as to leave notes on what each part is for, so that you (or anyone else working on your stylesheet) will know what each part does. */
Shorten your declarations
body { margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;} can be shortened to body {margin:0;} - much less text, don’t you agree? Anything that has a value of 0 can have the units removed. 0 is 0 whichever way you look at it. 0px = 0em = 0% = 0. Properties such as margin, padding, border, and font (amongst others) can all be shortened to one declaration rather than four.
Name your classes and id’s logically
CSS is used to control the aesthetics of your website, and id’s and classes should be semantic - ie, they should make sense away from your stylesheet. What happens if you later decide to change your layout? Some of your classes won’t make sense. Let’s say, for example, you currently have an id of “pink” for your header div. This could make perfect sense for your current layout because you want your header to be pink. But let’s say for your next layout you want your header to be blue. Where’s the logic in having #pink { background:blue; } in your stylesheet?
What are your top tips for organising your stylesheet? Are you a fan of shortened declarations, or do you prefer to write everything long-hand? Do you leave yourself comments, or do you automatically know which part does which job?
14 lovely people have commented
·
