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.