AniDB:Page layout

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>
  <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>

Definition lists

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

List, where all items are the same 'type', such as top 10 lists on the main page.

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

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>

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>