Posts for 03/2009

17 March 2009 - 13:40

Definition lists to style a multimedia listing of flash videos

I did ponder about using a definition list to provide some good x-html for a multimedia project, it, but finally gave it a go.
I came up with something which worked great in all browsers, including IE6 (yes still considering it a couple of months for now :-) )

And although I couldn't stop myself of not considering it a fully appropriated use of semantic html, I still found it very useful to consider definition lists to style this multimedia listing of flash video items.

Code

<dl class="mmItem">
     <dt><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. </a></dt>
     <dd>
           <object data="http://www.youtube.com/v/Iu68UXU7UUs&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" width="150" height="125">
           <param name="movie" value = "http://www.youtube.com/v/Iu68UXU7UUs&amp;hl=en&amp;fs=1" />
           </object>
          <span class="mmRating"><img src="images/stars_5.gif" width="75" height="14" alt="Rating" /></span><span class="videoItem">&nbsp;</span>
    </dd>
</dl>

CSS

#mmItems { float:left; margin: 0; padding: 0; clear: both; width:100%; overflow:hidden; } /*IE7 */
.mmItem { float:left; position: relative; margin:0 6px 15px 6px; top: 5px; width: 325px; left: 6px; min-height: 125px; }
.mmItem object{position:absolute; left:0; top:0}
.mmItem dt, .mmItem dd { padding:0 10px 5px 160px; margin:0; }
.mmItem dd {}
.mmRating { float: left; display:block; line-height:25px; padding: 2px 0 0 0; }
.videoItem { background:url(images/videoItem.gif) no-repeat center center; width:30px; height:20px; display: block; float: right; line-height: 25px;}
.audioItem {}

Afterstudy

Afterwards I did some research on using definition lists in such situations. Which reassured me actually, as these (older) samples confirm the use of multiple dl-elements.

(0) Comments ·
Page 1 of 1 pages