Archive for December, 2008

ID that Body - Clean CSS Navigation

Monday, December 8th, 2008

Just like cop dramas, the first step to a good navigation is the same as it is in solving a crime. You have to ID the body.

If you assign an ID on the body tag then you have a simple way to target items on any particular page. If you want the paragraph text on your contact page to be 16px tall then you have a simple way of targeting that text, assuming you ID the body on that page with contact:

#contact p {font-size: 16px;}

However, you get to understand the true power of IDing the body tag with using it for navigation. Assign each link in your navigation a class, then create a style for when the body’s ID and the link’s class match.

Your Navigation:

<body id="home"> <ul id=”nav”> <li><a class=”home” href=”#”>home</a></li> <li><a class=”about” href=”#”>about</a></li> <li><a class=”contact” href=”#”>contact</a></li> </ul>

Your CSS:

ul#nav { background: #000; list-style: none; font-family: Tahoma, Verdana, Arial, Sans-Serif; } ul#nav li { float: left; margin: 0 15px; } ul#nav li a, ul#nav li a:visited { text-decoration: none; color: #fff; } ul#nav li a:hover { color: #666; } /* here is the magic, when the body ID and the link Class are the same, this style is applied. */ #home .home, #about .about, #contact .contact { color: #ccc; }

This is pretty straight forward, but it works really well. The best application is when you use a dynamic language like PHP to include the menu on every page, so you have only one or two files to update in the event something changes with the navigation (the included file and/or the CSS file).

Tags:
Posted in CSS, php | 3 Comments »

Designing for your Target Audience - 24ways.org

Monday, December 1st, 2008

Head over to 24ways.org for this years pre-Christmas web goodness. I’ve read a lot of positive and negative about the design. Wether you like it or not, this is a great example of designing for your target audience. Many web designers/developers will be visiting this site, so you can bet on visitors having new, and what I consider “good” browsers. The screenshot here is from IE6.

Most of the time, my target audience for the web sites I make include IE6. As much as I hate it, it’s a fact I’ve learned to live with. Though you don’t have to serve up an exact duplicate of your site to IE6 users, you have to come up with something useable. Conditional stylesheets help out a lot, even if you use it to simply hide your stylesheet from IE6. So, while 24ways.org can get a way with something more innovative - I cannot.

Posted in CSS | No Comments »