HTML and CSS Reference
browser to replace the default symbol with redsquare.png, but to display a standard square symbol if the image
can't be found or images are turned off:
list-style: url(images/redsquare.png) square;
This has exactly the same meaning as using the individual properties like this:
Creating a Navigation Bar from a List
Several years ago, the only way to create an attractive navigation bar was to design everything in a graphics editor.
If you wanted a rollover effect, you needed to create at least two images for each button. I always seemed to
nudge something accidentally, and ended up with text out of alignment, meaning I had to start all over again. It
was back to the drawing board each time you wanted to make a change to the menu.
CSS has made life a lot easier, because you can often use image elements as backgrounds and handle all
the text with HTML and CSS. Thanks to the display property, you can turn links into large, clickable blocks. Add
some rounded corners and a drop shadow, and before you know it, a humble link looks like a menu button.
Unordered lists are the ideal container for navigation links, because they can be nested, allowing you to
create a hierarchy of top-level items with individual submenus. In this chapter, I'm going to deal only with single-
level navigation bars. Then in Chapter 11, I'll show you how to display submenus using CSS Positioning.
Creating a Vertical Text-based Navigation Bar
When converting an unordered list into a vertical navigation bar, you don't need to worry about long menu items.
As long as the horizontal space allocated to the navigation bar is wide enough to accommodate two words of
average length, long text simply wraps onto another line, and the style rules create a taller button. Assuming you
want the navigation bar to fill the entire width of its container element, the process involves the following steps:
Remove the bullet and all margins and padding from the unordered list.
Remove all margins from the list items.
Set the display property of the links to block .
Style the links with padding, background color, and borders.
That's all there is to it. So, let's put the theory into practice.
eXerCISe: CreatING a VertICaL NaVIGatION Bar
in this exercise, you'll convert an unordered list of links in the sidebar of a page into a vertical navigation bar.
use as your starting point vertical_begin.html and styles/vertical_begin.css in the ch10 folder. The finished
menu is in vertical_end.html and styles/vertical_end.css.
The page is based on the Mediterranean destinations file that has been used in previous chapters, but i have
added some rounded corners and drop shadows. i have also reduced the width of the sidebar and main
content area to add a 1% margin on the left and right, respectively, to move them away from the edge of the
page when the viewport is less than 1000px .