1,633
edits
AniDB:Page layout: Difference between revisions
m
no edit summary
(A small start) |
mNo edit summary |
||
| (11 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{{todo}} | {{todo}} | ||
{{TOCright}} | |||
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 == | ||
=== | === Page === | ||
{| style="width: 100%" | {| style="width: 100%" | ||
| Line 43: | Line 44: | ||
|} | |} | ||
|} | |} | ||
=== Content === | |||
<nowiki> <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></nowiki> | |||
== Markup == | |||
=== Tables === | |||
Tables of information, displayed in a columny way. | |||
<nowiki> <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></nowiki> | |||
=== Sequential lists === | |||
Lists where not only the order is important, but also form a regular, unbroken sequence. | |||
When the sequence is not <code>1+x</code>. This would be easier with a <code>value</code> attribute on the <code><nowiki><li></nowiki></code>, but some w3c prat removed it from xhtml. | |||
<nowiki> <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></nowiki> | |||
When the sequence counts up from 1, it's simple. | |||
<nowiki> <ol> | |||
<li class="g_odd">[value]</li> | |||
<li>[value]</li> | |||
<li class="g_odd">...etc | |||
</ol></nowiki> | |||
=== 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. | |||
<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> | |||
=== General lists === | |||
Any collection consisting of items a similar kind, not sequentially ordered. | |||
<nowiki> <ul> | |||
<li>[value]</li> | |||
<li>[value]</li> | |||
<li>...etc | |||
</ul></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> | |||
=== Pictures === | |||
If not part of the content of the db (ie, stylesheet specific), they must be specified using the <code>background</code> property in the css. | |||
<nowiki> <img src="(absolute link)" alt="(something appropriate)" /></nowiki> | |||
=== Text === | |||
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 /> | |||
[text]<br /> | |||
[text]</p></nowiki> | |||
[[Category:Development]] | |||
[[Category:CSS]] | |||