Tutorial:AdvancedTutorialPage1h
This page describes some ways to make sure that pictures and the table of contents look the way you want.
Displaying images
Back in the basic tutorial, we saw how we could put images on the left, right or in the center, add captions (or not), and make the pictures different sizes. However, sometimes formatting issues arise.
When images are on the left, the text wraps around them, including any later sections. Often the result is quite ugly. To force the text to come after the image, insert the text <div style="clear:left;"> right after the image. You can see an example here, where the clear:left; command is inserted at the end of the first section and the third section - the result is much neater.
Note that for images in the center, the text is forced to appear after the image. For images on the right, the formatting usually looks fine with the text wrapping right past.
For more galleries of pictures, it is often useful to use a simple table, as was used here.
Table of contents
The table of contents appears on MediaWiki pages automatically as soon as there are three or more headers in a page. Smaller headers are shown as subsections. Note that this page has no table of contents, because it only has two sections, but the previous tutorial page did have a TOC.
Sometimes it is necessary that the page has no table of contents (TOC). This can be ensured by adding __NOTOC__ near the top of the page. At other times you want to force a TOC to appear - do this by adding __TOC__ near the top of the page.
The same conference page also shows how the TOC can be placed on the right (but left of the template), allowing the text to fill up the left hand side of the screen. This was important, as this page was receiving over 1000 hits per day at that time, and it was desired to keep as much content in view as possible without scrolling. To force the TOC onto the right in this way, the following table code is used:
{| align="right"
| __TOC__
|}
Now go and practice on your sandbox page: Create a page containing some text. Use a semicolon subheading right before a 300px left-aligned picture with a caption (i.e., using a thumbnail). Then follow the picture with a new section containing some large-sized text, and use <div style="clear:left;"> to force this to appear after the picture. Then add __TOC__ to force a TOC to appear.
