Add and style an HTML div or span element to enhance the design of your page.

(lightbulb) Wrap is new in Zen 5.0 and replaces the Zen Bin macro.

Sample

Using the Wrap Macro in Zen 5, a right-aligned h3 is wrapped in a div with the following settings: ID: #text-block, width: 240px, height: 60px, padding: 28px 0 34px 0, float: right, background: #E1EFE0, and border: 3px double #5BA2A7.

Parameters

Terms in bold are required

Name

Default

Description

Element (Tag)

 

Choose a <div> or <span>.

id (CSS attribute)

 

Add an id to the element.

class (CSS attribute)

 

Adds additional CSS class names to the element.

width (CSS style)

 

Set the width of the element. Use CSS values, such as 200px or 25%

height (CSS style)

 

Set the height of the element. Use CSS values, such as 200px

margin (CSS style)

 

Set the margin around the outside of element’s border. Use CSS values, such as 24px or 6px 12px 6px 12px

padding (CSS style)

 

Set the padding inside the element’s border. Use CSS values, such as 24px or 6px 12px 6px 12px

float (CSS style)

 

Choose right or left to make the element float in its container, taking up only the horizontal space it needs.

clear (CSS style)

 

Choose both, left, or right to make the element vertically clear other floating elements.

background (CSS style)

 

Set the background of the element.

background-color (CSS style)

 

The CSS color for the background, such as blue or #F0F0F0

background-image (CSS style)

 

The filename of an image attached to this page to use for the background image.

background-position (CSS style)

 

Set the background image position. Use CSS values, such as 50% 50% or bottom right

background-repeat (CSS style)

 

Set the background image repeat characteristics. Use CSS values, such as no-repeat or repeat-x

border (CSS style)

 

Set the border for the element. Use CSS values, such as 3px dotted black