AniDB:Page layout

Revision as of 15:44, 15 April 2006 by Rar (talk | contribs) (→‎Tables: argh)
The information on this page is incomplete and may not be of much use.
If you can, please help by adding to it.

This page is going to be a guide to how pages on anidb are layed out and marked up, to aid the creation of new stylesheets.

Structure

Page

<body>
#layout-nav
#layout-menu
#layout-search
#layout-content
#layout-footer
</body>
anidbstyle.css
brown2.css

Content

 <div id="layout-content">
  <h1>[pagetitle]</h1>
  <div class="section [pagename]_[sectionnamea]">
   [content]
  </div>
  <div class="section [pagename]_[sectionnameb]">
   [content]
  </div>
 </div>

Markup

Tables

Tables of information, displayed in a columny way.

 <table( class="[name]")>
  <tr>
   <th class="[namea]">[title]</th>
   <th class="[nameb]">[title]</th>
   <th class="[namec]">[title]</th>
   <th class="[named]">[title]</th>
   <th class="[namee]">[title]</th>
   <th class="[namef]">[title]</th>
  </tr>
  <tr( class="g_odd")>
   <td class="[namea]( [contentmarker])">[content]</td>
   <td class="[nameb]( [contentmarker])">[content]</td>
   <td class="[namec]( [contentmarker])">[content]</td>
   <td class="[named]( [contentmarker])">[content]</td>
   <td class="[namee]( [contentmarker])">[content]</td>
   <td class="[namef]( [contentmarker])">[content]</td>
  </tr>
  <tr>...etc
 </table>

Sequential lists

Lists where not only the order is important, but also form a regular, unbroken sequence.

When the sequence is not 1+x. This would be easier with a value attribute on the <li>, but some w3c prat removed it from xhtml.

 <ol>
  <li class="g_odd"><span>[namea]</span> <[tag]>[value]</[tag]></li>
  <li><span>[nameb]</span> <[tag]>[value]</[tag]></li>
  <li class="g_odd">...etc
 </ol>

When the sequence counts up from 1, it's simple.

 <ol>
  <li class="g_odd">[value]</li>
  <li>[value]</li>
  <li>...etc
 </ol>

Definition lists

Lists with two parts, a name or number, and an item of content, might be marked up in several different ways.

Definition list, for different types.

 <dl>
  <dt>[namea]</dt><dd class="[namea]">[value]</dd>
  <dt>[nameb]</dt><dd class="[nameb]">[value]</dd>
  <dt>...etc
 </dl>

Table-as-definition-list, also for different types.

 <table>
  <tr class="[namea]"><th>[namea]</th><td>[value]</td></tr>
  <tr class="[nameb]"><th>[nameb]</th><td>[value]</td></tr>
  <tr>...etc
 </table>

General lists

Any collection consisting of items a similar kind, not sequentially ordered.

 <ul>
  <li>[value]</li>
  <li>[value]</li>
  <li>...etc
 </ul>

Icons

In general displayed as a block, and floated if need be.

 <span class="i_icon i_[imagename]">[name]</span>
 <a class="i_icon i_[imagename]" href="[link]">[linkname]</a>

Pictures

If not part of the content of the db (ie, stylesheet specific), they must be specified using the background property in the css.

 <img src="(absolute link)" alt="(something appropriate)" />

Text

Text data should convert \n into <br /> before output.

 <p class="[name]">[text]<br />
 [text]<br />
 [text]</p>
MediaWiki spam blocked by CleanTalk.
MediaWiki spam blocked by CleanTalk.