Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:Image Removed There are 2 basic methods for an inserting an empty section in EditLive!:

  • Toolbar Button
  • Menu Items

 

Info
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.

Toolbar Button

 The EditLive! toolbar provides the following button for selecting Page Widths:

  • Image Added Create Section

Menu Item

The Image Added Create Section item is located under the Insert menu.

Choosing a Semantic Tag

Both the Toolbar button and Menu item display a drop down menu containing the following elements.
  • Image AddedBlockquote
  • Image AddedDiv
  • Image AddedSection
  • Image AddedHeader
  • Image AddedFooter
  • Image AddedArticle
  • Image AddedAside
  • Image AddedNav
  • Image AddedFigure
  • FigCaption
Note

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.

 

Creating a section around existing text

...

Select a portion of text in the middle of a paragraph:

Image RemovedImage Added

Creating a section will split the paragraph around the selection and create a section in the middle:Image Removed

Image Added

Note

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.

Creating nested sections

EditLive! supports not only creating sections in paragraphs but also within existing sections.

...

Highlight the middle paragraph of a section:

Image RemovedImage Added

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:

Image RemovedImage Added

Note
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.

Example

Begin with our nested section from above:

Image Removed

Selecting Remove Section at that point will restore the outer section to the way it was before we added the nested section:

Image Removed

If instead the cursor was in the outer section, it would be removed instead:

...

Removing Sections

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.

Example

With the cursor positioned in the text for the nested Aside section, the options enabled are the enclosing Section and Article sections.

Image Added

 

Selecting Aside will remove the Aside section, leaving the other two sections in place and merging the paragraph into the enclosing section.

Image Added

With the cursor within the second paragraph, selecting Article from the Remove Section list will remove the outer Article section, leaving only the Section.

Image Added

Section Properties

EditLive! allows basic editing of section attributes.  Right click on a section and choose Section Properties... to show the Section Properties dialog:

Image RemovedImage Added

...

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.

Example

Start with the previous example, containing three paragaphs and a section in the middle:Image Removeda single section as shown below:

Image Added

Use the Section Properties dialog to align the section left:

Image RemovedImage Added

This brings the third paragraph up next to the second paragraph:

Image RemovedImage Added

Continuing to type in the third paragraph will flow down to the line below the second paragraph:

Image RemovedImage Added

If the second paragraph (inside the section) is then extended to two lines, the third paragraph layout will change to flow around it

Image RemovedImage Added

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.

...

 

Resizing Sections

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.