I have to convert this PDF (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/Files/pol%20cca.pdf">http://www.medford.k12.or.us/Files/pol%20cca.pdf</a><!-- m -->) to HTML, and have no clue where to start... Actually, scratch that, no clue where to finish is more acurate... I figure I can mark most of it up with nested unordered lists, but how would I mark up the Staff Development, as it has two parents... Any ideas? Also, how would I signify the horizontal relationships of the top 3 on the chart?<!--content-->well you could try using tables and border properties, but i would just make it a big picture<!--content-->Turn it into a GIF and put it on a page as an img.<!--content-->but as a gif its entirely inaccessible... If at all possible, I would like people to be able to cut and paste, and have screen readers to be able to access the content.<!--content-->egads thats not very pretty at all!<br />
<br />
My only suggestion is flagrant use of the div tag with a bunch of CSS<br />
<br />
position: absolute;<br />
top: Xpx;<br />
left: Ypx;<br />
width: 100px;<br />
height: 50px;<br />
border-width: 1px;<br />
border-style: solid;<br />
<br />
and where applicable:<br />
<br />
border-left: none;<br />
etc etc<br />
<br />
<br />
You'll also have to position the links via position: absolute as well.<br />
<br />
etc etc.... its a lot of tedium and quite a bit of trial and error if you don't do the calculations, but it will work.<!--content-->but divs are semantically meaningless... Styling this won't be difficult at all, my on question is what is the best way to mark this up semantically?<!--content-->The best semantic markup would be nested unordered lists.<br />
<br />
School Board<br />
Attorney<br />
Auditor<br />
Superintendant<br />
Director<br />
Secondary<br />
...<br />
Director<br />
Primary<br />
...<br />
<br />
The "platipus in the taxonomy"* is the Staff Development box but that could just be handled by duplicating it.<br />
<br />
*ZAMM allusion, there is always a platipus in a taxonomy. 8)<!--content-->
<br />
My only suggestion is flagrant use of the div tag with a bunch of CSS<br />
<br />
position: absolute;<br />
top: Xpx;<br />
left: Ypx;<br />
width: 100px;<br />
height: 50px;<br />
border-width: 1px;<br />
border-style: solid;<br />
<br />
and where applicable:<br />
<br />
border-left: none;<br />
etc etc<br />
<br />
<br />
You'll also have to position the links via position: absolute as well.<br />
<br />
etc etc.... its a lot of tedium and quite a bit of trial and error if you don't do the calculations, but it will work.<!--content-->but divs are semantically meaningless... Styling this won't be difficult at all, my on question is what is the best way to mark this up semantically?<!--content-->The best semantic markup would be nested unordered lists.<br />
<br />
School Board<br />
Attorney<br />
Auditor<br />
Superintendant<br />
Director<br />
Secondary<br />
...<br />
Director<br />
Primary<br />
...<br />
<br />
The "platipus in the taxonomy"* is the Staff Development box but that could just be handled by duplicating it.<br />
<br />
*ZAMM allusion, there is always a platipus in a taxonomy. 8)<!--content-->