Fullscreen
[Show/Hide Left Column]
[Show/Hide Right Column]

Defines and formats sections of a page or text.
3d browser Print

Tags: plugin div syntax
TOC Previous page Parent page Next page

Plugin Div

This Wiki Plugin defines and formats sections of a page or text.

Table of contents



Usage and Parameters

To use this plugin in a wiki page, use the syntax:
Syntax for the DIV plugin
{DIV(type=div|span|pre|b|i|tt|p|blockquote, bg= , width= , align=left|center|justify,  float=left|right, class= , id= )} your content {DIV}


Parameter Accepted values Default Effect Required? Since
type div
span
pre
b
i
tt
p
blockquote 		div div: defines a block (division or section) that can be formatted
span: defines a span of inline text that can be formatted
pre: preserves spaces and line breaks and uses a fixed-width font
b: bold text
i: italic text
tt: Teletype font
p: defines a paragraph with space before and after itself
blockquote: formats a long quotation with margins and space before and after 		n
bg valid HTML color name
(example: brown)
valid HTML color code
(example: #A52A2A)
click here for valid color names and codes 		none Sets the background color n
width number of pixels
(example: 200px)
percent
(example: 50%) 		none Sets the width of the element n
align right
center
justify 		left Aligns text within the element n
float left
right 		float is set to none Determines alignment of entire element n
clear left
right
both 		clear is set to none Items are not allowed to wrap around the side(s) this parameter is set to.
See next section on Controlling "Wrapping" for more information.		 n 4.0
class valid CSS class none Apply custom CSS class to the element n
id text string none Sets the element id n 2.0


Controlling "Wrapping"

If this plugin is used and the float parameter is used to align a block, then other elements on the page may "wrap" around that block. To avoid this or otherwise control the wrapping, the DIV plugin needs to be followed by another plugin or code that sets the clear property. Here are three ways to do this where all wrapping is stopped:

MethodSyntax to avoid all wrapping
PluginDiv
(starting with version 4)		 {DIV(clear=both)}{DIV}
PluginTag {TAG(tag=br style=clear:both)}{TAG}
Dynamic Variable Establish a variable like %clear% and set to <br style="clear: both" /> . To set its value, click on NaV the first time.


The clear property can also be set to "right" or "left" as needed for desired effect.

Examples

Type=div

This code,
{DIV(float=right width=200px bg=#FFEBCD align=center)} This section is a "div" that is 200 pixels wide, has a nice blanched almond background color, aligns to the right because float=right, with text that aligns center because align=center.{DIV}


Would produce:
This section is a "div" that is 200 pixels wide, has a nice blanched almond background color, aligns to the right because float=right, with text that aligns center because align=center.



Type=span

This code,
With type=span, the text remains inline. {DIV(type=span bg=yellow)} This text is in a "span" that is that is highlighted yellow.{DIV} And this text is after the span.


Would produce:

With type=span, the text remains inline. This text is in a "span" that is that is highlighted yellow. And this text is after the span.




Close
tip Difference between "div" and "span"
These types are similar, but one of the main differences is that the "span" type can be used for inline text whereas the "div" type cannot.


Type=pre

This code,
{DIV(type=pre align=justify bg=#D8BFD8 width=600px)} Using "pre" displays text in a fixed-width font, preserves     spaces and any

line breaks (enter was hit twice before "line"). 
The width only controls the color, not the text. {DIV}


Would produce:

 Using "pre" displays text in a fixed-width font, preserves     spaces and any

line breaks (enter was hit twice before "line").
The width only controls the color, not the text.



Close
note Note
PluginCode or the Wiki-Syntax Text "~np~ your content ~/np~" can also be used for similar effects and to display code without processing it.


Type=blockquote

This code,
{DIV(type=blockquote width=150px align=justify)} Notice that blockquote indents the text. Here the width has been set at 150 pixels and the text is justified.{DIV}


Would produce:

Notice that blockquote indents the text. Here the width has been set at 150 pixels and the text is justified.


Type=b, i, tt,

These types are used to format text. Here are some examples:


TypeSyntaxResult
b {DIV(type=b bg=#F08080)}This text is bold and the background is misty rose.{DIV} This text is bold and the background is misty rose.
i {DIV(type=i float=right)}This text is italic and floats right.{DIV} This text is italic and floats right.
tt {DIV(type=tt)}This text is in teletype font.{DIV} This text is in teletype font.



Close
note Note
Consider using Wiki-Syntax Text if you just need simple text formatting and don't need other formatting like a background color or special alignment.





Contributors to this page: lindon1701 points  , ricks994323 points  and sylvie3037 points  .
Page last modified on Sunday 25 October, 2009 22:48:15 UTC by lindon1701 points .

SourceHistorySlides

To register

To have an account at this site, please register at Tikiwiki.org (external link), and then use that user name and password to log in here.

Find by Page Name

Exact match

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki documentation and should correspond to development keywords (bug reports and feature requests):

Accessibility (WAI – 508)
Action log 2.x
Alert 3.x
Articles & Submissions
Backlinks
Banners
Blog
Bookmark
Browser Compatibility
Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts Address book
Contact us
Content template
Contribution 2.x
Cookie
Copyright
Custom Home (and Groups Home Page)
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tikiwiki.org (Help System)
DogFood
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interaction
Inter-User Messages
InterTiki
Karma
Live Support
Login
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profile Manager
Quicktags
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Security
Semantic links 3.x
Shadowbox
Shoutbox
Slideshow
Smarty Template
Smiley
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
System log
Tags 2.x
Task
Tell a Friend + Social Bookmarking 2.x
TikiTests 2.x
Theme
Trackers
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
Webmail
Webservices
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval 2.x
Wiki Plugins extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
WYSIWYCA
WYSIWYG 2.x
XMLRPC