Webforumz Newsletter - November 2007
Tutorials
Borders as Underlines
Usually when a web designer wants to make a user acknowledge when they hover over a link, they would use the text-decoration: to either add an underline (if the navigation links have no underline in their inactive state) or remove an underline if vice versa.
For example, let's look at the html and css for this very simple, plain and boring list of links that might act as a basis for a typical navigation bar.
HTML Code:
<div id="navigation">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
Firstly, I style the div itself and the ul which our links are contained in.
CSS Code:
#navigation ul {
list-style: none;
height: 600px;
}
#navigation ul li {
display: block;
margin-bottom: 20px;
}
Now, the links can be styled in two ways. One, is to add to the stylesheet:
CSS Code:
a:link {}
a:visited {}
a:hover {}
However, that would assign styles to all the links in our html page. In a typical page, this is not what we want. We need to style the links in the navigation ul, but not anywhere else. Fortunately, CSS has the solution.
CSS Code:
#navigation ul li a:link {}
#navigation ul li a:visited {}
#navigation ul li a:hover {}
#navigation ul li a:active {}
Now, lets style! I'll start with the first link. Because I am going to use a border as an underline to replace the standard text-decoration: underline, I need to remove underlines.
CSS Code:
#navigation ul li a:link {
text-decoration: none;
color: #FF0000;
}
That gives a nice red font colour and no underline. Most websites have visited links looking identical to their normal inactive, un-clicked state. So, instead of copying the a:link into the a:visited, I can combine the 2 into one CSS group:
CSS Code:
#navigation ul li a:link, #navigation ul li a:visited {
text-decoration: none;
color: #FF0000;
}
Now I can work on the hover. It really isn't very complicated, just assign a bottom border as if you would to a div or any other element:
CSS Code:
#navigation ul li a:hover {
border-bottom: 4px solid #FF0000;
}
There it is, so now, you should see a 4px underline in red. This method has many advantages, as usually with the text-decoration: underline, the underline would be the same color as the text in the link. Using this method, you can mix and match. Feel free to change the font, change the size, do whatever you like. You now have the basis for a CSS menu with borders.
The full CSS Code is below:
#navigation ul {
list-style: none;
height: 600px;
}
#navigation ul li {
display: block;
margin-bottom: 20px;
}
#navigation ul li a:link, ul li a:visited {
text-decoration: none;
color: #FF0000;
}
#navigation ul li a:hover {
border-bottom: 4px solid #FF0000;
}
The idea can be taken further, thanks to FF2.0 and IE7, which allow :hover to be assigned to more than just links; Unfortunately IE6 does not support this, but we can add a hack that will tell IE6 to use the code we just made, and FF and IE7 to use our new code.
NOTE - Because the borders are now below the text, this works best with Horizontal Menus. Firstly, we need our list items to display inline. In your code for the menu we just created, change the display: block to display: inline:
CSS Code:
#navigation ul li {
display:inline;
margin-bottom: 20px;
}
You may notice we are now styling all the list items, not just the links. Because we are applying the border-bottom to the li itself, our browser needs to know the height of the li. I have styled mine slightly further and added some width and margins, plus some padding. The margin-bottom: 20px is no longer needed because that was put to separate the <li>s when they were vertical.
CSS Code:
#navigation ul li {
display: inline;
width: 98px;
margin-right: 1%;
height: 100px;
line-height: 100px;
padding: 5px 5px 15px 5px;
} Now you need to add some of those styles to the a:link and a:visited styles.
CSS Code:
#navigation ul li a:link, #navigation ul li a:visited {
font-size: 25px;
text-align: center;
text-decoration: none;
color: #FF0000;
height: 100px;
line-height: 100px;
padding: 5px 5px 15px 5px;
}
And finally, the bit that makes it work. Add this code into your CSS sheet:
CSS Code:
#navigation ul li:hover {
border-bottom: 4px solid #FF0000;
height: 100px;
line-height: 100px;
padding: 5px 5px 15px 5px;
} You can see this time instead of a:hover, we now have li:hover. This feature is only supported in IE7 and Firefox, so we need to make sure that IE6 users get the border-bottom applied to the actual link text, the code we worked on earlier. All we do is place * html in front of our code, to give us this (NOTE. This is in addition to the CSS code we already have for ul li a: hover):
CSS Code:
* html #navigation ul li a:hover {
border-bottom: 4px solid #FF0000;
} So now, IE7 and FF will ignore the above statement, and use our li:hover, but IE6 will do the opposite and use our hack.
That's it. To give you an idea what might happen - Here is an example: JackFranklin.co.uk
Thank you for reading, and I hope you enjoyed it.