DivisionsExplained
(:div:) and >>..<< markup for creating page sections (divisions)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.
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
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.
Now we've started a new div. Note that the table in the
above div was properly closed, even though no
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 |
|
Yes, but what about tables within tables, esp table directives?
You can nest a simple Table within a Table Directive
See Also
- Wiki styles Modifying the style of page contents
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.