AniDB:Page layout

From AniDB
Jump to: navigation, search
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"( class="nonav")>
   <h1>[pagetitle]</h1>
   <div class="g_content [pagename]_all">
     <div class="g_section [pagename]_[sectionnamea]">
       [content]
     </div>
     <div class="g_section [pagename]_[sectionnameb]">
       [content]
     </div>
   </div>
 </div>

Markup

Tables

Tables of information, displayed in a columny way.

 <table( class="[tablename] (g_incomplete)")>
  <tr>
   <th class="[colnamea]( c_[sortclass])">[title]</th>
   <th class="[colnameb]( c_[sortclass])">[title]</th>
   <th class="[colnamec]( c_[sortclass])">[title]</th>
   <th class="[colnamed]( c_[sortclass])">[title]</th>
   <th class="[colnamee]( c_[sortclass])">[title]</th>
   <th class="[colnamef]( c_[sortclass])">[title]</th>
  </tr>
  <tr( class="g_odd")>
   <td class="[colnamea]( [contentmarker])">[content]</td>
   <td class="[colnameb]( [contentmarker])">[content]</td>
   <td class="[colnamec]( [contentmarker])">[content]</td>
   <td class="[colnamed]( [contentmarker])">[content]</td>
   <td class="[colnamee]( [contentmarker])">[content]</td>
   <td class="[colnamef]( [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 class="g_odd">...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. Text derived from user input should also convert from simple formating to html.

 <p class="[name]">[text]<br />
 [text]<br />
 [text]</p>