: _syntax
"Div" stands for "division".
To improve the layout you can use [[div]] ... [[/div]] elements which transform to html @div> ... </div@ blocks.
Allowed attributes are: class and style. The difference is that with style you can put CSS instructions close to the text, but this is not a good idea, instead of putting CSS instructions within your custom theme, with class.
Div style
[[div style="float:left; width: 45%; padding: 0 2%"]]
left column left column left column left column left column
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
right column right column right column right column right column
[[/div]]
~~~~
left column left column left column left column left column
right column right column right column right column right column
Div class
[[div class="two-columns"]]
left column left column left column left column left column
[[/div]]
[[div class="two-columns"]]
right column right column right column right column right column
[[/div]]
~~~~
And within the custom CSS stylesheet:
.two-columns{float:left; width:45%; padding:02%}
left column left column left column left column left column
right column right column right column right column right column
Main reference
Ask your question below
for instance, suppose I create a box as a custom div element: can I add a label to it and reference it in another part of the page?
The box I am trying to add a label to is this one:
http://community.wikidot.com/howto:box-with-rounded-corners
Many thanks!
paola
What you can do is to create a CSS module on your page (or put the CSS code on your main CSS page) containing the styling for the div, then use the div as many times as yu need to on your page. For example:
[[module css]]
.aquamarine {
background-color: aquamarine;
border: 2px solid #888;
border-radius: 10px;
margin:10px;
padding:10px;
width: 200px;
[[/module]]
[[div class="aquamarine"]]
Some content
[[/div]]
[[div class="aquamarine"]]
Completely different content
[[/div]]So the label is the name of the class that you have created, in this case aquamarine. Both divs that you have created will reference the same CSS. If you change the CSS it will change the way both divs look.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
On Syntax documentatin you will find the "Anchors"
i copied the text here for better explanation:
Anchors
(done with ++ [[# anchors]]Anchors)
To place an anchor use [[# anchor-name]] syntax.
To refer to an anchor (and scroll to it) use [#anchor-name text to display].
You need only to insert an "invisible!" anchor after your div-start command/tag: a.e.:
- [[# div-two-col]]
and can everywhere on this page insert the link to this label by building an "internal link inside your page ( like on toc) with
- [#div-two-col MY DIv-2-col] which displays like a link only MY DIv-2-col
or you can build a link on all of your pages on all sites
- with the eternal link [*http://YOUR_SITE.com/YOUR_PAGE#div-two-col MY DIv-2-col] which does exactly show the same link like the internal one MY DIv-2-col but links to this (invisible!) anchor on your page from all the internet.
If you want to make the anchor visible than you have to write after the anchor the label itself a second time ( like here in this post the "Anchor"..
As an example you can have a look on the howto: http://community.wikidot.com/howto:site-check-llist which is using 3 anchors ( and not "toc").
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?