Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
 
box Flexi CSS Layouts for Dreamweaver

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.

 

Special offer

Flexi CSS Layouts documentation

Adding Margin/Padding/Borders to the Flexi CSS Layouts

With Flexi CSS Layouts for Dreamweaver is very easy to add margin, padding or borders to the DIVS (cells) you are creating. All 3 elements affect the positioning of the content inside a cell, so before setting them it's a good idea to understand the concepts: each time you are using margin, padding or borders there is less space remaining for the content but and depending on what method you use results are different. To exemplify, I have created 2 cells below and applied a yellow background on the cell that has padding or margin.

To add margin, padding or border to a cell, you need to select the cell in the working area of the editor:

If you apply 20px padding to a cell, then the content will appear at 20px from the cell border. However the background color or image will cover the entire cell space.

Understanding the border, padding and margin concepts

The border size is deducted from the available content space. If you have an all around 2px border then the deducted space is 2px x 2= 4px (you have a 2 px left border and a 2 px right border).

If you apply a 20px padding to a cell, then the content will appear at 20px from the cell border. However the background color or image will cover the entire cell space.


Understanding the padding concept

If you apply a 20px margin to a cell, then both the content and the background starts at 20px from the cell border.


Understanding the margin concept

Adding margins

If you want to add margins to a DIV, select the cell in the working area and go to the Margins/Padding/Borders tab and change the value of the margins from 0 to the value you want. You can have a margin for all sides of the cell or you can have different margin sizes for each by deselecting the "all" button. The order of the margins is T (top), R (right), B (bottom) and L (left). You can have percentage, pixel or elastic dimension for your margins.


Default margin settings

Adding padding

If you want to add padding to a cell in the layout, open the Flexi Editor and under the Margin/Padding/Borders tab you will find the padding settings. Just like for the margins settings you can add an equal padding on all sides or you can have a different padding on each side by deselecting the "all" button. The order of the margins is T (top), R (right), B (bottom) and L (left). And also you can have percentage, pixel or elastic dimensions.


Change the padding

Adding borders

If you want to add border to your layout open the Flexi Editor and select the Cell. Under the padding settings you will find the border settings. The default setting is to have an equal border on all sides (top, right,bottom and left), but you can have a different borders on the sides by deselecting the "all" button. You can change the color of the borders and you can also change the type of border: solid, dashed, dotted, inset, outset, double, groove and ridge.


Change the borders

Download Flexi CSS Layouts for Dreamweaver trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6