Index

Welcome to KGS
Downloading and Installing CGoban, the KGS Client
CGoban Main Window
Introduction to KGS
KGS Plus
Tournaments
KGS on Androidâ„¢
Terms of Service
Admin Announcements
Newbie FAQ
Main KGS Window
Set Preferences
Server Stats
"New Game" Window
Game Window
Playing Games
Game Types
Supported Rule Sets
Supported Time Systems
Tagged Games
Rating System
Rating System Math
Main FAQ

Information for Help Editors
Resources for Help Editors
Help Discussion
Recent Changes
Translations Available (click a flag to view):
English (United States)

Tips and Tricks for Help Editors


Table of Contents

Editing  |  Coding  |  HTML Cheat Sheet  |  CSS Cheat Sheet
  Tables:  |  ... HTML tables |  ... The Grid Class |  ... Beyond The Grid Class |  ... Fixed Table Layout |  ... Tabs
  Splitting Help Pages  |  Footnotes  |  Glossary  |  Related Links

Editing

Coding

HTML Cheat Sheet

Some useful HTML Entities

All HTML Entities

Some useful HTML tags

All HTML tags

HTML Tutorial Home Page


CSS Cheat Sheet

The KGS help pages use inline styles. This means that they use a style attribute followed by a CSS property after a relevant tag. For example, relative positioning,
                <p style="position:relative;  left:25px;  line-height:175%;">  The KGS help pages use ...  </p>,
was used to indent this paragraph. The "line-height" property increased the space between the lines. The "text-indent" property indented the first line.

Relative positioning is used in the Coban Main Window to help set off the subsections from the sections.

Some Useful CSS Properties

CSS Tutorial Home Page

All CSS properties

KGS Classes


Tables

The four tables displayed below are intended to be used as templates. Each table is a simple representative of a family of tables that are obtained from the basic type by adding various style attributes. The simplest kind of table is an HTML table. The HTML family includes the other three families since all tables are obtained by adding CSS styles to an HTML table.

The tables in this section are all followed by a blank half-line.

This section is divided into five subsections, not including this introductory section. Each subsection contains one table. The first four subsections are enclosed with only one pairs of div tabs ( <div>, </div>). Only one "style='position:relative; left:25px;'" statement is then needed to indent the first four subsedtions.

HTML Tables

Tables can be built with HTML using HTML "table" tags and attributes. HTML tables are left adjusted and use double-line borders by default. The following table uses the "border" attribute in its "table" tag: <table border="1">.

Twenty One Questions
Animal Vegetable Mineral
monkey peas diamonds
baby hippopotamus spinach ruby


The Grid Class

Using the KGS "grid" class is the easiest way to get a table that looks better than a simple HTML table. The drawback of the "grid" class is that its attributes can not be over-ridden (as far as I know. dj, 1020). For example, it must be centered in the page. The following table uses the "grid" class. The table tags looks like this: <table class="grid">, </table>. In addition to the use of the "grid" class, the text in the cells is padded and centered. The tags for the data in a cell look like this <th style="padding:5px; text-align:center;">, </td>

Twenty One Questions
Animal Vegetable Mineral
monkey peas diamonds
baby hippopotamus spinach sandstone


Beyond The Grid Class

Instead of using the KGS "grid" class, the CSS table properties. The "border-collapse:collapse" attribute specifies the use of single line borders instead of double line borders. The border attribute defines the width of the borders independently for each cell. This method allows left aligned tables and tables with thicker borders for the table headers. In addition, this table is floated with a (<div style="float:left; margin-right:25px;">, </div>) block delimiter. The code for this table was used as a template for the tables in the Abbreviations and Acronyms section of the Newbie FAQ.

Twenty One Questions
Animal Vegetable Mineral
monkey peas diamonds
baby hippopotamus spinach ruby


Fixed Table Layout

The following table uses the "table-layout:fixed" attribute. When "fixed" is specified for the "table-layout", the width of each column is specified with a "width" attribute in the table header (th) tags. The following table uses "width:200px". Long tables display noticeably faster on the user's screen with the the "fixed" property than they do with the "auto" property. The column widths are computed from the width of the largest entry in the column when the "auto" is specified. "Auto" is the default value if the "table-layout" is omitted.

The "padding" attribute is not used. If it were, only the height of the cells would be affected. The width is already determined by the "width" attribute. The height of the cells may also be set via the "height" attribute. The columns do not all have to have the same width. In the example below, the do.

Twenty One Questions
Animal Vegetable Mineral
monkey peas diamonds
baby hippopotamus spinach ruby


Tabs

Borderless tables with a fixed table layout are a convenient method for simulating tabs. This syntax of this type of table is almost as simple as a Grid Class table. A line height of 115% is used in the div tabs surrounding this table to get a little space between the table rows. There is no padding in the cells. The table data uses a font size of 14 pixels.


Twenty One Questions

Animal monkey, baby hippopotamus
Vegetable peas, spinach
Mineral diamonds, ruby


Guidelines for Splitting Help Pages into Multiple Pages


Footnotes

1  A simple ">" (instead of "&gt;") works too, and it makes the code easier to read!

2   The en dash makes a better arrow (–>) than does the hyphen (->) at least in the Firefox browser display. The mdash can also make an arrow: —>.

3   The "thin space" is slightly smaller than the "non-breaking space". Thin spaces can mess up how browsers handle line spacing. For example, they can cause Firefox to randomly insert extra blank lines between elements. These lines can come and go when the user adjusts the width of their browser window. (as of March 1, 2011. dj)

Glossary

Related Links


Edit this page (requires admin or translator privilege)


KGS