Aligning and sizing images within the body content of cascade pages can be trciky. However, there are some simple class decorations that simplify this process.
Edit Cascade CMS content via the “HTML View” in order to stylize the body images.
Image treatment HTML/CSS in 960 Grid:
<div class=”figure half left”>
<img alt=”Description” src=”Image/Location” />
<p>Caption</p>
</div>
* To have images stacked on top of one another, add ‘<div class=”clear”></div>’ at the end of the div above.
List of class options – and their style definitions
| class | definition |
|---|---|
| half | { width: 50%; padding: 10px; margin: 0.5em 0.67em; } |
| fortyfive | {width: 45%; padding: 10px; margin: 0.5em 0.67em; } |
| third | { width: 33%; padding: 10px; margin: 0.5em 0.67em; } |
| quarter | { width: 25%; border: none; padding: 5px; margin: 0.25em 0.5em; } |
| fifth | { width: 20%; border: none; padding: 5px; margin: 0.25em 1%; } |
| class | definition |
|---|---|
| right | { float: right; margin-left: 2%; padding-left: 20px; padding-bottom:0; } |
| left | { float: left; margin-right: 2%; padding-right: 20px; padding-bottom:0; padding-left:0; padding-top:0; } |