Div's: In a "Class" of their own

Recently, I ran into a problem with a current project of mine. While developing a dynamic news website for my University, I ran into some trouble validating the site. The problem was this:

I had created a blueprint story layout. Each time a story was generated from the database, the same layout would be used (i.e. thumbnail, title, tease) creating a list of stories down the page. The problem, then, was that if each story uses the same code, I end up with several duplicate id's down the page—each time a story occurs, in fact. Well, as you know, this will not validate because an id name can only be used once (i.e. must be unique) within any HTML document. Bear in mind that the site should still work—it just won't validate (and it's such a great feeling when things are implemented properly, plus the piece of mind that it will always work.) So, now what?

Then it occurred to me, as far as HTML goes, a div is just another HTML tag. It can be styled the same way any other block element can. In other words, the div style doesn't have to be an id. What if we use a CSS element that doesn't have to be unique?

Of course! A class! Sure enough, I replaced all of my id tags with classes, and . . . it validated! Eureka! I win. You don't need to worry about "display: block" in your CSS rule for the class because a div is already a block element, so in my case, the list of generated stories naturally positioned how I wanted them to—one stacked on top of another down the page. It was that easy. Here's what it originally looked like in the HTML:

<div id="storyBlock">

<div id ="storyTitle">*database-driven content*</div>

<div id ="thumbnail"><img src=" . . . " /></div>

<div id ="storyTease>*database-driven content*</div>

</div>

Now, the new solution:

<div class="storyBlock>

<div class="storyTitle">*database-driven content*</div>

<div class="thumbnail"><img src=" . . . " /></div>

<div class="storyTease>*database-driven content*</div>

</div>

As far as the CSS goes, it can remain the same; just change your id's to classes (i.e. switch out the pound sign before each id name, for a period like so:  #storyBlock becomes .storyBlock) You can, then, keep all of the CSS rules how they are.

December Update

Merry Christmas fans! This month, I decided, as my Christmas gift to you, that this month will be the month of tutorials. So stay tuned; there should be some good knowledge coming your way. I will start off with CSS rollovers and work my way up from there. Note: this will include both the stackable image technique and the one known as "trifecta."
Now then, I have a little announcement to make: I just got an early Christmas Present—Adobe Creative Suite Design Premium! It includes Photoshop Extended, so all of those special 3D features that I covered in my review . . . I have! Can't tell you how excited I am. After I've worked with it for a while, I will give a full review, so stay tuned. Well, that's it for now. Happy Holidays, everyone!

Netflix and Mac: Instant Watch?

Announcing, Netflix's "Watch Instantly" feature is now supported on the mac. A while back, a friend of mine introduced me to a backdoor to a beta testing option for mac users to have access to the "watch instantly" option on Netflix. It required you to install a flavor of Silverlight onto your Intel Mac machine. Well, it looks like it's now out of beta and ready for normal use. Discouraged, because I thought that I had a bead on a little-known secret, but the secret's out. It's an official option. But as I stated earlier: it's a trick, in that you have to have an Intel-based Mac. Hooray, for my new Macbook Pro. Sorry, for those of you with the older chip :o( Well, good old fashioned dvd's through mail are still good, too.
Now, it wouldn't be fair of me to bring up this option without giving any recommendations, so here goes:
Remember, Tom Cruise when he was, like 16 years old, in that great fantasy classic Legend? Well, take a turn back in time and instantly watch the Director's Cut of Legend.
Or, if you don't want to watch a movie, check out the latest episode of Heroes. Yes, that's Heroes! Or, you can look for your favorite show and watch it, if it's available.

One-Two Punch

I have recently come into two books at work that I think anyone who uses CSS should own. Now these are advanced—not for those who are interested in learning CSS at the beginning level. For that, see my future tutorial or go to w3schools; a great resource for web training. For those who have a working knowledge of CSS and want to broaden both their knowledge and their library, these two books are just the thing.
The first book is a reference book: The Ultimate CSS Reference
It will cover your CSS technical knowledge and specs. Not only does this book contain a great compendium of CSS information, but for each selector, or feature, it gives you a chart containing: 1) What version of CSS it belongs to, 2)level of support in the major browsers (great "heads-up" reference for potential Internet Explorer issues), and info on inheritance properties. A very, very handy book and a great tool for web development and browser testing.
It is put out by Sitepoint, another great site for web development knowledge.
So that covers our reference needs. Now, what about expanding your CSS repertoire and furthering your general knowledge? Right hook = "Ultimate CSS Reference", then a left = "CSS Mastery"
Yep, the next book is: CSS Mastery
This book reads more traditionally, as a tutorial and explanatory-type book. It will teach you more advanced techniques and skills in the realm of CSS including greater explanation of the "box property", using CSS with "lists" for navigation, styling forms, and "flickr" style rollover fields on images, among many other things.
Together—one book for reference and one book for advanced CSS techniques—you'll have yourself a winning combo.

"One, two and he's down for the count."

What I'm currently listening to: Part 1

"Classical, in the key of 'Rock!'"

I have recently found myself in a mood for classical style music that rocks! What do I mean? You know, that kind of music that fills your soul with the emotions indicative of all the classical classics, like Kanon in D Major, while simultaneously invoking the impulse to raise your hand in the "metal" sign. *Think "Carmina Burana: O Fortuna"*
And from this disposition to rock out to something classical, I have compiled the following iMix on iTunes. The list of artists includes familiar ones, such as Sarah Brightman and Bond, and some not-so-familiar, like E.S. Postumus and Apocalyptica.
So, feel free to explore something a little bit "classical," a little bit "rock and roll":

The Fine Art of MythBusters

Q: What do you get when you combine the MythBusters, NVIDIA and the Mona Lisa?
A: Awesome Robots.
Adam Savage and Jamie Hyneman show you how to paint the Mona Lisa in less than a second—80 milliseconds to be precise:

NBC is Back!

After throwing, what can only be termed, the equivalent of an "adult temper tantrum," snatching up their toys and running home to mamma, NBC has returned to iTunes. And they have brought all of their shiny toys back, as well, including: The Office, Battlestar Galactica, and Heroes (among others). Only now, they're "shinier," offering version in HD.

This "spat" all started with iTunes sticking to its commitment to consumers to maintain the $1.99 pricepoint for all of its TV content. On the flipside, NBC wanted them to start a "value based on chronological-relevance" system, charging the $1.99 for older programming, but then raise the price for newer content, and etc. Well, iTunes simply said, "no" to which NBC responded, "Fine, we'll make our own, cause you're stupid!"

Hence, the inception of an awkardly named little program, known as "hulu". So now we have "hulu" vs the brand recogniton and market penetration of "iTunes." Sounds like a winner. Oh, and their business model? Offer content for free, but with commercials and advertising and stuff, minus the option to download and watch, i.e. you're stuck at the mercy of your internet connection via streaming data—how convenient is that! (Incidentally, there's no way you could make high-def content feasible, using streaming as your delivery model) Yeah, sounds like a winner. Hey, maybe I'm wrong. Maybe "hulu" has a very prosperous business model; it's still around, right?

All I know is that they're back on iTunes, and I couldn't be happier. The top five shows that I watched on iTunes were Lost, 24, Battlestar Galactica, Heroes, and Prison Break, with the top tier being Battlestar Galactica and Heroes, both NBC shows. So, of course, I'm glad to see them return. Let's hope that they can continue to play nice.