Main Page The Writer The Programmer Wikipedia Main Page

The Programmer

CSS

Fonts

Serif Serif fonts are best for long passages of text, as it's widely believed that the serifs—those tiny "feet" at the end of a letter's main strokes—gently lead the eye from letter to letter, making text easier to read. Examples of serif fonts are Times, Times New Roman, Georgia, and the font in the main body paragraphs of this book.

"Times New Roman", Times, serif
Georgia, "Times New Roman", Times, serif
Baskerville, "Palatino Linotype", Times, serif
"Hoefler Text", Garamond, Times, serif

Sans-serif Sans-serif fonts are often used for headlines, thanks to their clean and simple appearance. Examples of sans-serif fonts include Arial, Helvetica, Verdana, and Formata, which you can see in the gray boxes in this book.

Arial, Helvetica, sans-serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Tahoma, "Lucida Grande", Arial, sans-serif
"Trebuchet MS", Arial, Helvetica, sans-serif
"Century Gothic", "Gill Sans", Arial, sans-serif

Monospaced and fun fonts Monospaced fonts are often used to display computer code (like the CSS snippets you see throughout this book). Each letter in a monospaced font is the same width (these were traditionally used on typewriters to line up data into tidy columns).

"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace
"Copperplate Light", "Copperplate Gothic Light", serif
"Marker Felt", "Comic Sans MS", fantasy

Tip: You can find a lot more information on which fonts are installed on which systems, including Macs, Windows, and Linux, at www.codestyle.org/css/font-family. For another good resource for thinking outside the normal set of web fonts, visit http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks.

Colors

Note: If your color design sense needs some help, you can find lots of attractive, coordinated collections of colors as well as great color-related resources at Colourlovers.

Pop-up Menus

How do I create those cool pop-up menus that display a submenu of links when someone rolls his mouse over a button?

Navigation bars that have multiple levels of menus that pop up or slide out are extremely popular. They're a perfect way to cram a lot of link options into a compact navigation bar. You can create them in a couple of ways.

First, there's the CSS-only approach. One popular dropdown menu technique is called Son of Suckerfish. (The earlier version was called Suckerfish.) You can learn about both here: www.htmldog.com/articles/suckerfish/dropdowns.

As for creating a multi-level, horizontal drop-down menu, there's a nice easy tutorial at: www.tanfa.co.uk/css/examples/menu/tutorial-h.asp.

The same site provides a tutorial for creating vertical menus with pop-out submenus: www.tanfa.co.uk/css/examples/menu/tutorial-v.asp.

If you're not the do-it-yourself type (of course you are, you're reading this book), or if you're just in a hurry, you can use the free Pure CSS Menu generator—a wizard-like web page that produces the necessary HTML and CSS for you: http://purecssmenu.com.

The one disadvantage to the CSS approach is that the submenus disappear instantly if your visitor's mouse strays. You can hope that all your visitors have excellent reflexes, or you can try a different approach: Use CSS to style the buttons and JavaScript to control the actions of the submenus. (Another benefit of JavaScript is that you can add cool animation effects to your menus.)

For a very simple JavaScript menu try the "jQuery Simple Drop Down Menu plugin" (http://javascript-array.com/scripts/jquery_simple_drop_down_menu). Just the basics, but it works well. A more powerful JavaScript-driven menu system is Superfish. You can read about it and download the necessary files from http://users.tpg.com.au/j_birch/plugins/superfish.

Where to Get Navigation Bar Help

I've never made a nav bar before, but I really want my site to have one. I just don't think I can put it all together on my own. Is there something that walks me through the whole process for the first time? Yes. In fact, there's a tutorial in this very chapter that shows you step by step how to create a navigation bar. Just flip to Section 9.3.3.1.

Online, you can find tutorials, plus tools that do some of the work for you.

For more information on turning ordinary lists into extraordinary navigation elements, visit the step-by-step list tutorial at: http://css.maxdesign.com.au/listutorial.

You can also find loads of cool list-based navigation designs at http://css.maxdesign.com.au/listamatic.

If you want to create tabs for your navigation (like the ones at the top of every Amazon.com page), check out the resources on this page: http://css-discuss.incutio.com/?page=ListTabs.

Finally, if you just don't want to bother creating your own, then try the List-O-Matic wizard at www.accessify.com/tools-and-wizards/developer-tools/list-o-matic. This site is for certain information, like fonts and colors, and can create the CSS you need for list-based navigation. It even lets you create submenus (a.k.a drop-down menus).

CSS Sprites

http://veerle.duoh.com/index.php/blog/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2.

Sliding Doors

Note: Douglas Bowman's Sliding Doors technique is a classic in CSS design. You can find his original article at the A List Apart website: www.alistapart.com/articles/slidingdoors. There's also a follow-up article covering more advanced techniques at www.alistapart.com/articles/slidingdoors2.

Note: If you like this technique, but aren't good at using Photoshop to create graphics, you can pick up free tab designs at www.exploding-boy.com/2005/12/15/free-css-navigation-designs and www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs.