EditLive! provides extensive support for content sections (also known as DIV tags), including HTML 5 Semantic tags. As a user you can create and remove sections, and even create sections within other sections. EditLive! can help you to apply styles to a section, set the width of a section, or wrap text around floating sections.
Creating an empty section can be done anywhere; even inside another Section. Simply place the cursor where you want the section and select Create Section (DIV) from the Insert menu: There are 2 basic methods for an inserting an empty section in EditLive!:
- Toolbar Button
- Menu Items
|The toolbar and menu items described below may not appear in your instance of EditLive!. This would be due to your Systems Administrator removing this functionality. For more information, see your Systems Administrator.|
The EditLive! toolbar provides the following button for selecting Page Widths:
- Create Section
The Create Section item is located under the Insert menu.
Choosing a Semantic Tag
Some elements may not be available as they may be dependent on other elements or restricted in their use. For example, FigCaption is only available for insertion in a Figure.
Select a portion of text in the middle of a paragraph:
Creating a section will split the paragraph around the selection and create a section in the middle:
The type of section inserted will be indicated by text in the top corner of the section. In this example an Aside has been inserted.
EditLive! supports not only creating sections in paragraphs but also within existing sections.
Highlight the middle paragraph of a section:
Creating a new section will not alter the outer section, instead nested a new section inside. Notice that the paragraph spacing has been removed to avoid unnecessary spacing:
|The nested section in the above screenshot has been shortened to better show the resulting structure. New sections will always expand to the full width until resized (see Resizing Sections)|
Use the Remove Section command will remove the innermost section at the cursor position.
Begin with our nested section from above:
Selecting Remove Section at that point will restore the outer section to the way it was before we added the nested section:
If instead the cursor was in the outer section, it would be removed instead:
Use the Remove Section command, located on the Insert menu or the Context Manu to remove a section. Only the section types available from the current cursor position will be available.
With the cursor positioned in the text for the nested Aside section, the options enabled are the enclosing Section and Article sections.
Selecting Aside will remove the Aside section, leaving the other two sections in place and merging the paragraph into the enclosing section.
With the cursor within the second paragraph, selecting Article from the Remove Section list will remove the outer Article section, leaving only the Section.
EditLive! allows basic editing of section attributes. Right click on a section and choose Section Properties... to show the Section Properties dialog:
- Alignment - Float sections left or right
- WidthSpecify width - Change the width of Checking this box allows the width of the section, using either pixel or percentage units, to be set.
- Style - CSS Style to be applied to the section type (if configured)
- ID - Set the section identifier attribute
Floating sections are often used for page layout, and allow text to flow around the section. EditLive! supports creating floated sections using the alignment option of the Section Properties dialog , described above.
Start with the previous example, containing three paragaphs and a section in the middle:a single section as shown below:
Use the Section Properties dialog to align the section left:
This brings the third paragraph up next to the second paragraph:
Continuing to type in the third paragraph will flow down to the line below the second paragraph:
If the second paragraph (inside the section) is then extended to two lines, the third paragraph layout will change to flow around it
EditLive! will update the page layout as you type in or resize the floated section. For best results, always specify a width for floating sections. Variable width sections can be difficult to predict, particularly if a user changes the default text size of their browser.
Sections can be resized either via the properties dialog or by holding the mouse cursor over the edge of a section (much like Images and Tables). Only the width of a section can be changed, the height of a section is determined by the content within it.