DivisionsExplained

Summary: Explanation of (:div:) and >>..<< markup for creating page sections (divisions)
Version: 2007-04-17
Prerequisites: PmWiki 2
License: N/A
Status: Needs attention
Maintainer:
Categories: Layout

Questions answered by this recipe

How do I use the (:div:) or >>...<< markup?
How can I create sections or divisions in page content?
Can I use nested divisions?

Basic (:div:)...(:divend:) markup

See BlockMarkup-Talk

The basic div markup works like advanced tables, using a (:div:) ... (:divend:) sequence.

This text is before the division.

(:div id='foo' style='background: #ffffcc' :)
Here is my text in the division.

* Other markups are allowed
* here also

(:divend:)

Now we're after the division.

This text is before the division.

Here is my text in the division.

  • Other markups are allowed
  • here also

Now we're after the division.

As with advanced tables, a (:div:) or advanced table markup will automatically close any previous (:div:) section.

Styles can be applied to the division markup, but the (:div id="..." class="..." style="..." :) directive can only contain the regular HTML id, class and style attributes.

Using the shortform >>...<< markup

There is also a >>...<< shortcut that allows WikiStyles to be easily applied to divs. Some examples:

%define=Pm bgcolor=#ffeeff font-style=italic%
%define=John bgcolor=#eeffee%
%define=shouts font-weight=bold font-size=larger%
%define=meekly font-size=smaller%

>>Pm<<
Hello, this is some text from Pm.

>>John<<
And here is some text from John.

>>Pm<< 
And now we're back to Pm again.  Pm can enter multiple paragraphs and
* lists
* lists
* lists

>>John shouts<<
And now John has something really important to say!

>>Pm meekly right<<
okay already!

Hello, this is some text from Pm.

And here is some text from John.

And now we're back to Pm again. Pm can enter multiple paragraphs and

  • lists
  • lists
  • lists

And now John has something really important to say!

okay already!

Nesting divisions

In addition to the normal (:div:)...(:divend:), one can also suffix "div" with a number to indicate a specific div to be opened or closed. For example (indentation shown for clarity):

    (:div:)           <div>                start a new div
    abc                 <p>abc</p>
    (:div1:)            <div>              start a (nested) div1
    def                   <p>def</p>
    (:div1:)            </div><div>        close prev div1, start new div1
    ghi                   <p>ghi</p>
    (:div1end:)         </div>             close prev div1
    jkl                 <p>jkl</p>
    (:divend:)        </div>               close div

Any sequence of digits can be used to distinguish one div from another. The digits don't imply any sort of ordering relationship -- they're simply used to match up opening and closing div tags. For example, each of the following columns all output the same results:

    (:div1:)            (:div3:)          (:div2:)
    (:div2:)            (:div2:)          (:div1:)
    (:div3:)            (:div1:)          (:div3:)
       text                text              text
    (:div3end:)         (:div1end:)       (:div3end:)
    (:div2end:)         (:div2end:)       (:div1end:)
    (:div1end:)         (:div3end:)       (:div2end:)

Closing a div automatically closes any nested divs that were started inside of it.

(:div10:) %div bgcolor=#ddddff%
Here is a div, and we'll put another div in the middle:

>>cframe width=300px bgcolor=#ffffdd<<
This div is nested within the outer div.

>>cframe width=300px bgcolor=#ffdddd<<
Another nested div within the outer div

(:div10:) %div bgcolor=#ffddff%
Okay, we've created another div at the "10" level, which closed the previous two divs.

(:div10end:)

And we're done with divs.

Here is a div, and we'll put another div in the middle:

This div is nested within the outer div.

Another nested div within the outer div

Okay, we've created another div at the "10" level, which closed the previous two divs.

And we're done with divs.

Nesting divisions and tables

Nesting tables and divs is also doable. First, let's see tables nested within divs:

>>bgcolor=#ffffdd<<
Here is some text in a div.
(:table border=1 bgcolor=#ddffdd:)
(:cell:)alpha
(:cell:)beta
(:cell:)gamma
(:cellnr:)delta
(:cell:)epsilon

>>bgcolor=#ffdddd<<
Now we've started a new div.  Note that the table in the
above div was properly closed, even though no [@(:tableend:)@]
directive was provided.

(:table border=1 bgcolor=#ddffdd:)
(:cell:)iota
(:cell:)zeta
(:cell:)theta
(:cellnr:)omega
(:cell:)sigma
(:tableend:)

Now we're out of the table, but still in the div.

>><<

Now we're out of the div.

Here is some text in a div.

alpha beta gamma
delta epsilon

Now we've started a new div. Note that the table in the above div was properly closed, even though no (:tableend:) directive was provided.

iota zeta theta
omega sigma

Now we're out of the table, but still in the div.

Now we're out of the div.

Now then, let's see some divs nested within tables:

(:table border=1 bgcolor=#ddffdd:)
(:cell:)
Some text

>>bgcolor=#ffffdd<<
A nested div
>>bgcolor=#ffdddd<<
Another nested div
>><<
more text
(:cell:)
Another cell
>>bgcolor=#dddddd<<
A nested div in this cell
(:cellnr:)
Another cell
>>bgcolor=#ddddff<<
A div within this cell.
>>bgcolor=#ddffff<<
Another div in this cell

Some text

A nested div

Another nested div

more text

Another cell

A nested div in this cell

Another cell

A div within this cell.

Another div in this cell

Yes, but what about tables within tables, esp table directives?

You can nest a simple Table within a Table Directive

See Also

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.