User:WikiMaster/Tables & Columns

From PortlandWiki
Revision as of 22:11, 31 October 2011 by WikiMaster (talk | contribs) (→‎Miscellaneous: "Bunch of DIVs.")
Jump to navigation Jump to search

Wiki Tables & Wiki Columns

{{Multicol}} is used to start a multi-column section of a page. Between each block of column text insert {{Multicol-break}} and close the last column with {{Multicol-end}}. For example:
{{Multicol}}
This text appears in the first column.
{{Multicol-break}}
This text appears in the second column.
{{Multicol-break}}
This text appears in the third column.
{{Multicol-end}}
This page gives you information about syntax to build wiki-tables in MediaWiki.

Worthy Examples

This Wikipedia tutorial page shows a good example of tabbed layout.

Miscellaneous

People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.
Q: I'm trying to create newspaper style columns using a block of text. I would like the text to be evenly spread out across 2 columns which could react to change of length in the text. Is this possible using just HTML/CSS, if not could javascript be used?
A: (One of the answers.) If you decide to do this, it is already possible in Mozilla and WebKit (and Prince) with only CSS:
selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
Q: I have a bunch of DIVs that contain textual information. They're all the same width (maybe 400px or so), but different heights. For space reasons, I'd like to have two or three columns of these DIVs (sort of like a want-ad section in a newspaper).
A: (One of the answers.) You could wrap div1 and div2 in a wrapper div, and div 3 and div 4 in a wrapper div, then wrap those two in an outer wrapper. Use some css to the get formatting right and you should be good to go. The html might look something like this:
<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>
Then, have some css like this:
.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}