Archive for the ‘CSS’ Category

Screen Casts for beginners - soon

Wednesday, April 1st, 2009

There are a lot of good sites out there that offer tips, tricks, and how-tos for the mid to advanced level coders and designers. However, I haven’t found many great resources for people looking to start out fresh, from the beginning. This means learning HTML, and then learning CSS (or learning them together). I find that a lot of people at this level are interested in learning how to use Dreamweaver, and are more interested in the WYSIWYG editor in Dreamweaver then learning how to code by hand.

There is no substitute for hand written code. Something created in Dreamweaver’s design view will never equal the well structured code that can be done with a text editor. It doesn’t matter if you’re on Windows or a Mac, in Textmate or Notepad++ or even Dreamweaver’s code view. What matters is you learn the language and best practices.

I’m experimenting with some screencasting software. Look for new tutorials for the beginner starting hopefully next week. If you’re beyond the beginner level, my apologies, but head over and check out Chris Coyier’s CSS tricks or net tuts. We’ll work up to those levels on this site, but for a while, we’re going back to the basics, and we’re going to do it using a hands-on approach with the aid of a screencast.

Tags: ,
Posted in CSS | No Comments »

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 »