AniDB:Page layout: Difference between revisions
Epoximator (talk | contribs) No edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
{{todo}} | {{todo}} | ||
This page is going to be a guide to how pages on | 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 == | == Structure == | ||
| Line 148: | Line 148: | ||
=== Text === | === Text === | ||
Text data should convert <code>\n</code> into <code><nowiki><br /></nowiki></code> before output. Text derived from user input should also | Text data should convert <code>\n</code> into <code><nowiki><br /></nowiki></code> before output. Text derived from user input should also {{t|498|convert from simple formating to html}}. | ||
<nowiki> <p class="[name]">[text]<br /> | <nowiki> <p class="[name]">[text]<br /> | ||
| Line 154: | Line 154: | ||
[text]</p></nowiki> | [text]</p></nowiki> | ||
[[Category:Development]][[Category:CSS]] | [[Category:Development]] | ||
[[Category:CSS]] | |||
Revision as of 01:36, 12 May 2009
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
|
|
|
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>