Just Beyond The Bridge

Frivolity

Friday, November 03, 2006

Yes, it is unlike me to post twice in one evening, some would even say frivolous, but after scaring everyone who doesn't know what the hell the last post was about, I figured I should make-a-mends.

Some interesting developments. Firstly, an observation. When did mainstream television news companies start sourcing their video libraries from YouTube? Tonight apparently. On Channel 4 News at 7pm, they used some archive clips of University Challenge, cited in a little purple box as coming from the lair of the copyright infringement monster. It wouldn't have mattered so much if YouTube provided HD quality video and if Channel 4 News couldn't afford to pay the royalty to the BBC, but it just seemed ridiculous that they would even bother using a clip if it wasn't visually or audially up to scratch. Odd.

Secondly, I have my MacBook back and it's fixed. Unfortunately the hard drive had totally died as I assumed, but they swapped it straight out for me under warranty. At the same time corrected my mistake of believing my serial number wasn't in the batch of Macs that had a problem with yellowing on the keyboard deck. They couldn't do anything about it in the shop yesterday, but they've ordered in the parts for me, and by this time next week, most of my Mac will be brand new again.

Microsoft's Zune site is now online and looking a little strange to me. I don't know who decided brown would be a great colour, but my main bug-bare is that they don't seem to have meticulously designed it , like you would if you were say, trying to create an 'iPod killer'. Is it just me or is the home link and the date in the top left corner looking a little redundant? Also, who put them all in grey with the search box wedged up against the page margin? I do quite like the dull montage at the bottom rather than the usual plain gradient, but I do feel the whole site lacks impact? Why do I crave a little Flash here? Some pizazz or something? Anything?

I've just spotted a few more anomalies like bullets appearing on lines of their own and imbalanced boxes. Who's been designing just for Microsoft products again? I've got nothing against Zune, I want to try one, but I can't help thinking that they just threw all their marketing together ten minutes before clocking off last Friday.

I was looking to style a definition list in a two-column table format yesterday and in the process I found this great little resource at MaxDesign (scroll down the page). Anyway, after looking at the Styling a definition list to look like a table, I decided the article was missing a trick. You'll note that if you try and alternate the background colour of the list, blotches of colour are left out if the definition text runs to two lines or more.

My solution is as follows:

<dl class="display-as-table">
<dt>Football</dt>
<dd class="odd-row">Football is the name given to a number of different team sports. The most popular of these is Association Football (also known as soccer).</dd>
<dt>Rugby Union</dt>
<dd>Rugby union is a team sport that was developed from the rules used to play football at Rugby School in England. Two teams, each of 15 players have the task of outscoring the opposing team.</dd>
<dt>Test Cricket</dt>
<dd class="odd-row">Test cricket is the longest form of the sport of cricket. It is regarded by players and serious fans as the ultimate test of playing ability.</dd>
<dt>Ultimate Frisbee</dt>
<dd>A game between two teams whose players try to toss a Frisbee to one another until they cross the opponents goal.</dd>
<dt>Field Hockey</dt>
<dd class="odd-row">A game that is played on an open field. Two opposing teams use curved sticks try to drive a ball into the opponents' net.</dd>
</dl>

I have used class names on each alternate <dd> tag, however with a bit of ingenuity, I'm sure it can be achieved otherwise. Note you don't need to apply the odd-row classes to the corresponding <dt> tags.

The CSS required is as follows:

dl.display-as-table {
border: 1px solid #485699;
border-width: 1px 0;
width: 40em;
}

dl.display-as-table dt {
float: left;
width: 10em;
padding: 0.5em;
font-weight: bold;
}

dl.display-as-table dd {
padding: 0.5em 0.5em 0.5em 11em;
margin: 0;
}

dd.odd-row {
background: #F2F2F2;
}

The final result is scalable and works in Safari, Internet Explorer 5+ (Win), Firefox and Opera. Click here to view the finished stripy definition list 'table'.

Additional things to try are adding a .odd-row:hover class to provide some focus, but the only 'hit' area will be the <dd> block, and so hovering on the <dt>'s won't trigger it.

This is Just Beyond The Bridge

Something About Me

Called Andy, I am passionate about design, love to travel, and have a knack for all things digital. This is the full story…

November 2006
M T W T F S S
   1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

More Stuff

Back Catalogue

  1. Aug ‘08
  2. Jul ‘08
  3. Jun ‘08
  4. May ‘08
  5. Apr ‘08
  6. Mar ‘08
  7. Feb ‘08
  8. Jan ‘08
  9. Dec ‘07
  10. Nov ‘07
  11. Oct ‘07
  12. Sep ‘07
  13. Aug ‘07
  14. Jul ‘07
  15. Jun ‘07
  16. May ‘07
  17. Apr ‘07
  18. Mar ‘07
  19. Feb ‘07
  20. Jan ‘07
  21. Dec ‘06
  22. Nov ‘06
  23. Oct ‘06
  24. Sep ‘06
  25. Aug ‘06
  26. Jul ‘06
  27. Jun ‘06
  28. May ‘06
  29. Apr ‘06
  30. Mar ‘06
  31. Feb ‘06
  32. Jan ‘06
  33. Dec ‘05
  34. Nov ‘05
  35. Oct ‘05
  36. Sep ‘05
  37. Aug ‘05
  38. Jul ‘05
  39. Jun ‘05
  40. May ‘05
  41. Apr ‘05
  42. All Archives

Search