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: css navigation
Posted in CSS, php | 3 Comments »
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 »
November 25th, 2008
For another week, if you follow Sitepoint on Twitter you can download The Art and Science of CSS for free. I glanced through the first chapter or so this morning and it looks like it has some good stuff in it. The bits that I looked at covered some text-replacement methods that works even when users have images turned off (something I haven’t looked at or really given much thought to in the past). So I’m going to dig a little deeper into it. It probably won’t be earth shattering for those versed in CSS, but if you’re starting out I’d recommend checking it out.
Sitepoint is often a good resource, but the 99designs thing they’ve got going has left a bad taste in my mouth. It really is just spec work, and spec work is bad for many reasons. The work is often just unskilled type treatments, done for hundreds of dollars below market value. Any real designer should frown on the idea of selling their service for less than it’s worth, it’s insulting. Most of the designs have little conceptual thought, and lack big picture thinking. Everyone loses with 99designs, except for 99designs itself which takes a cut off of the ignorance of the other two parties involved. If you’re so desperate for $200 that you’ll give away a $800 - $1200 logo then need to rethink your career path. Seriously, look at the big picture. Corporate America - 40 hours of work a week should provide a decent living. Now, would you work for 1/4 of that? Do you really want to work 160 hours in that week (which is barely possible) to maintain the same level of living?
Tags: CSS
Posted in CSS | No Comments »
