AniDB:Page layout: Difference between revisions

From AniDB
Jump to navigation Jump to search
(er... stuff)
mNo edit summary
 
(10 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 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.


== Structure ==
== Structure ==
Line 46: Line 47:
=== Content ===
=== Content ===


  <nowiki> <div id="layout-content">
  <nowiki> <div id="layout-content"( class="nonav")>
  <h1>[pagetitle]</h1>
  <h1>[pagetitle]</h1>
  <div class="section [pagename]_[sectionnamea]">
  <div class="g_content [pagename]_all">
  [content]
    <div class="g_section [pagename]_[sectionnamea]">
  </div>
      [content]
  <div class="section [pagename]_[sectionnameb]">
    </div>
  [content]
    <div class="g_section [pagename]_[sectionnameb]">
  </div>
      [content]
    </div>
  </div>
  </div></nowiki>
  </div></nowiki>


Line 62: Line 65:
Tables of information, displayed in a columny way.
Tables of information, displayed in a columny way.


  <nowiki> <table>
  <nowiki> <table( class="[tablename] (g_incomplete)")>
   <tr>
   <tr>
   <th class="[namea]">[title]</th>
   <th class="[colnamea]( c_[sortclass])">[title]</th>
   <th class="[nameb]">[title]</th>
   <th class="[colnameb]( c_[sortclass])">[title]</th>
   <th class="[namec]">[title]</th>
   <th class="[colnamec]( c_[sortclass])">[title]</th>
   <th class="[named]">[title]</th>
   <th class="[colnamed]( c_[sortclass])">[title]</th>
   <th class="[namee]">[title]</th>
   <th class="[colnamee]( c_[sortclass])">[title]</th>
   <th class="[namef]">[title]</th>
   <th class="[colnamef]( c_[sortclass])">[title]</th>
   </tr>
   </tr>
   <tr( class="g_odd")>
   <tr( class="g_odd")>
   <td class="[namea]( [contentmarker])">[content]</td>
   <td class="[colnamea]( [contentmarker])">[content]</td>
   <td class="[nameb]( [contentmarker])">[content]</td>
   <td class="[colnameb]( [contentmarker])">[content]</td>
   <td class="[namec]( [contentmarker])">[content]</td>
   <td class="[colnamec]( [contentmarker])">[content]</td>
   <td class="[named]( [contentmarker])">[content]</td>
   <td class="[colnamed]( [contentmarker])">[content]</td>
   <td class="[namee]( [contentmarker])">[content]</td>
   <td class="[colnamee]( [contentmarker])">[content]</td>
   <td class="[namef]( [contentmarker])">[content]</td>
   <td class="[colnamef]( [contentmarker])">[content]</td>
   </tr>
   </tr>
   <tr>...etc
   <tr>...etc
  </table></nowiki>
  </table></nowiki>


=== Definition lists ===
=== Sequential lists ===
 
Lists where not only the order is important, but also form a regular, unbroken sequence.


Lists with two parts, a name or number, and an item of content, might be marked up in several different ways.
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.


List, where all items are the same 'type', such as top 10 lists on the main page.
  <nowiki> <ol>
  <nowiki> <[o/u]l>
   <li class="g_odd"><span>[namea]</span> <[tag]>[value]</[tag]></li>
   <li class="g_odd"><span>[namea]</span> <[tag]>[value]</[tag]></li>
   <li><span>[nameb]</span> <[tag]>[value]</[tag]></li>
   <li><span>[nameb]</span> <[tag]>[value]</[tag]></li>
   <li class="g_odd">...etc
   <li class="g_odd">...etc
  </[o/u]l></nowiki>
  </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.
Definition list, for different types.
Line 106: Line 122:
   <tr>...etc
   <tr>...etc
  </table></nowiki>
  </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 ===
=== Icons ===
Line 114: Line 140:


  <nowiki> <a class="i_icon i_[imagename]" href="[link]">[linkname]</a></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]]

Latest revision as of 09:16, 12 May 2009

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>
Retrieved from "https://wiki.anidb.net/index.php?title=AniDB:Page_layout&oldid=13604"