In CKEditor some formatting settings can only be applied to block-level elements. Sometimes it is also useful to be able to apply formatting to a larger document fragment that extends beyond one block. If this is the case, a standard practice is to add a
div container around a document fragment.
Note that using
div containers, just like other HTML elements, along with CSS styling, is an advanced feature that should only be used if you have sufficient knowledge of both Web standards.
To add a
div element to your text, press the toolbar button. The Create Div Container dialog window that will open lets you set configuration options that define the stylesheet ID and classes as well as other advanced properties.
For general information on using dialog windows please refer to the Dialog Windows section of the User's Guide.
The Create Div Container dialog window includes two tabs that group
The General tab lets you manually add a stylesheet class that will be applied to the
div element. Note that a
div element might be assigned more than one class. If this is a case, separate class names with spaces.
If the system administrator defined some additional styles in the
default.js file for the
styles plugin, you will be able to choose the style from the Style drop-down list. After you choose a style from the list, the Stylesheet Classes text field will be populated automatically.
The Advanced tab lets you configure additional
div element options such as assign it an ID, a language code, a text direction, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the
div element is concerned.
Below is the overview of all Advanced tab elements:
- Id – a unique identifier for an
divelement in the document (
- Language Code – the language of the
divelement specified according to RFC 1766 (
- Style – CSS style definitions (
styleattribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
- Advisory Title – the text of the tooltip that is shown when the mouse cursor hovers over the
- Language Direction – the direction of the text: left to right (LTR) or right to left (RTL) (
Using Div Containers
To illustrate the idea of adding
div elements, let us assume that we have a sample document that contains three paragraphs and a list.
As visible on the elements path, when the cursor is placed in the second paragraph, the hierarchy of HTML elements includes just the
Suppose we wanted to apply the same styling to a fragment of this document, namely the first two paragraphs and the list. We could select these elements and then add various formatting features to it. If, however, at any time in the future we wanted to change the styling of the same text fragment, we would need to laboriously select it again and modify the formatting piece by piece.
There is, however, a better way to achieve the same result. We can select the same fragment and place it inside a
div container that will serve as a placeholder for all styling rules that we might come up with, both now and in the future. By adding a stylesheet class to this container we can even control its properties with an external stylesheet.
In this example the first two paragraphs and a list were selected, and then placed inside the
div container created with the toolbar button. Once created, the
div element received a class named
mydiv and a style that adds a pink background color to all its content.
div element is now also visible on the elements path. If we check the document source, we will see that it encloses the previously selected text elements and has a class as well as style definition applied to it.