Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Definition Lists To Display Artist, Cd, And Track, The semantically correct method.
jlhaslip
post Mar 19 2007, 02:27 AM
Post #1


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,874
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
I had a situation where I needed to code a listing of Bands, Albums (CD's), and theTracks on each of the albums.
In order to develop the page in a semantic manner, the best way to develop the code was to use the Definition List, Definition Term and Definition Data tags as follows:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
listing albums and tracks </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="keywords" content="<dl><dt><dd> html tags, listing albums and tracks for different Bands, CSS dl tag" />
<meta http-equiv="description" content="A CSS format for listing albums and tracks for different Bands using <dl><dt><dd> html tags." />
<meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />
<meta http-equiv="author" content="Jim Haslip" />
<style type="text/css">
/*<![CDATA[*/
* html { margin:0; padding:0;}
body { margin:0 auto; text-align:center; }
#wrapper { margin: 0 auto; width:1000px; background-color: #ffeecc; border: 1px solid #666666; }
#header { margin: 1em 0; text-align:center; border-bottom: 1px solid #666666; }
#header h1 { margin: 1em 0; }
p { margin: 1em; padding:1em; text-align:left }
#footer { margin: 1em auto; padding: 1em; text-align:center; border-top: 1px solid #666666; }
#footer a { margin: 1em auto; padding: .15em; }
#dl_block { text-align:left; padding-left: 3em; width: 15em; }
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">

<div id="header">
<h1>
... Page Header here ...
</h1>
</div><!-- header -->
<div id="dl_block">
<h3>
Band 1
</h3>
<dl>

<dt>
Album1
</dt>
<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dt>

Album2
</dt>
<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dd>
Record3
</dd>

<dd>
Record4
</dd>
<dt>
Album3
</dt>
<dd>
Record1
</dd>
<dd>

Record2
</dd>
</dl>
<h3>
Band 2
</h3>
<dl>
<dt>
Album1
</dt>

<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dd>
Record1
</dd>
<dd>

Record2
</dd>
<dd>
Record3
</dd>
<dd>
Record4
</dd>
<dt>
Album2
</dt>

<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dd>
Record3
</dd>
<dd>

Record4
</dd>
</dl>
</div><!-- dl_block -->
<div id="footer">
<a href="http://validator.w3.org/check?uri=referer">validate the xhtml</a> <a href="http://jigsaw.w3.org/css-validator/">validate the css</a>
</div><!-- footer -->
</div><!-- wrapper -->


</body>
</html>


Feel free to borrow the code and use it where you need to. Of course, to be efficient, separate the CSS from the page and place it into a CSS file.

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · CSS (Cascading Style Sheets) · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. [request] Gimp Tutorial For Watermarking Pictures(2)
  2. 2nd Method Of Disabling Safe Mode On Winxp(2)
  3. Is Eating Meat Morally Correct?(77)
  4. How To Display Images Of A Directory(4)
  5. Cannot Open Display - Error(2)
  6. Google Analytics(11)
  7. Definition Of Globalization(3)
  8. Track Confernece(0)
  9. Am I Gay? What Is The Definition Of Gay?(17)
  10. Msgbox(17)
  11. Blank Images - (white Square W/red X)(8)
  12. DNS Hijack SearchAtHand.com Browser Result Removal(6)
  13. Toggle display in page script(8)
  14. Form Not Returning Correct Email Address(5)
  15. Span "display: _____" Problems(2)
  1. Nvidia Display Driver Problem(2)
  2. Search For Video Files And Display Them(0)
  3. A Small Html Problem(4)
  4. Image Not Taking The Right Size In Web Page(1)
  5. Political Correctness Getting Ot Of Hand(11)
  6. Which Archiving Method Is Faster?(5)
  7. Pluto No Longer A Planet But Is Called A "dwarf" Planet(25)
  8. [photoshop]grunge Abstract Sig ~ Samma(9)
  9. What Is Fun Anymore?(5)
  10. Pc On Without Display(11)
  11. Java Iterator Help(2)
  12. Can Someone Correct My Essay?(3)
  13. Http Method Post Is Not Supported By This Url(4)
  14. Widescreen Computer Display(7)
  15. Some Programmers Definition(1)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th July 2008 - 05:08 AM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation