AniDB:Page layout: Difference between revisions

From AniDB
Jump to navigation Jump to search
(A small start)
 
(er... stuff)
Line 3: Line 3:
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.
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.


== Page Structure ==
== Structure ==


=== Macro ===
=== Page ===


{| style="width: 100%"
{| style="width: 100%"
Line 43: Line 43:
|}
|}
|}
|}
=== Content ===
<nowiki> <div id="layout-content">
  <h1>[pagetitle]</h1>
  <div class="section [pagename]_[sectionnamea]">
  [content]
  </div>
  <div class="section [pagename]_[sectionnameb]">
  [content]
  </div>
</div></nowiki>
== Markup ==
=== Tables ===
Tables of information, displayed in a columny way.
<nowiki> <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></nowiki>
=== 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.
<nowiki> <[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></nowiki>
Definition list, for different types.
<nowiki> <dl>
  <dt>[namea]</dt><dd class="[namea]">[value]</dd>
  <dt>[nameb]</dt><dd class="[nameb]">[value]</dd>
  <dt>...etc
</dl></nowiki>
Table-as-definition-list, also for different types.
<nowiki> <table>
  <tr class="[namea]"><th>[namea]</th><td>[value]</td></tr>
  <tr class="[nameb]"><th>[nameb]</th><td>[value]</td></tr>
  <tr>...etc
</table></nowiki>
=== Icons ===
In general displayed as a block, and floated if need be.
<nowiki> <span class="i_icon i_[imagename]">[name]</span></nowiki>
<nowiki> <a class="i_icon i_[imagename]" href="[link]">[linkname]</a></nowiki>

Revision as of 19:53, 2 February 2006

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>