SSU Website Content Layout Options

These are layout styles you may apply to your content. Some may require editing HTML in your web editor's code view.

Floats

Many elements can be floated to the right or left. When you float an element, it is displayed on the right or left side of the content area, and removed from the normal flow of content, causing following content to flow around it on the left or right (respectively).

By default, images in your content would look like this. The image in this paragraph has not been floated. This causes the first line of text to line up with the baseline of the image, leaving a large white space above the text. The HTML for this looks like:

<p><img src="clocktower.jpg" alt="" />Here's the text following a non-floated image.</p>

The image in this paragraph has been floated to the left. This causes the following text to snap to the top of the image and flow down the right side. The result is a more professionally designed look.

The text folllowing a floated element will continue to flow down the side of the element until it reaches the end of the floated element. As soon as the text exceeds the height of the floated element, it will wrap underneath, using the entire available content width. To float an inline element, such as an image, add the class="left" or class="right" to the <img> tag.

<p><img src="clocktower.jpg" alt="" class="left"/>This text follows an image floated to the left.</p>

ff The image in this paragraph has been floated to the right. That one over there ------>

<p><img src="clocktower.jpg" alt="" class="right"/>This text follows an image floated to the right.</p>

For block elements like headings, paragraphs, blockquotes, and divs, you'll also need to define a width for the floated element. SSU's design includes some CSS width classes you can apply to block level elements so you can float them effectively. These will set the width of the element to a percentage of the available content area width, from 25% to 75%.

  • class="width-25"
  • class="width-33"
  • class="width-50
  • class="width-66"
  • class="width-75"

To float a block level element, give it a class with two values, separated by a space. Use one of the width classes above, and either left or right. Here's a blockquote that has been set to width-33 and right:

A computer terminal is not some clunky old television with a typewriter in front of it. It is an interface where the mind and body can connect with the Universe and move bits of it about.
-Douglas Adams.

See Floatutorial by Max Design for more information about how to use floats.


When you want text to stop flowing around a floated element, and start again below the floated element, you can use a Clear Float on a break tag.

This clears an element floated to the left:

<br class="clear-left" />

This clears an element floated to the right:

<br class="clear-right" />

This clears floats on both sides:

<br class="clear-both" />


2 Column Layout

Some pages may be best arranged by splitting the content into two columns. This can be done by creating two divs, one for each column.

Left Column

The first div uses the class="col1" (short for column 1). Any kind of content can go into either column.

<div class="col1"> Content goes here. </div>

Right Column

The second div uses the class="col2" (short for column 2).

At the end of the second column, insert a break tag with the class="clear-left"

<div class="col2"> content goes here.
<br class="clear-left" /></div>

 

Collapsible Blocks

These Collapsible Blocks can contain any kind of content.

It's important to keep the links on the headings. These links with href, name and tabindex attributes ensure the content is accessible to people who use assistive technology.

These collapsible blocks consist of two divs. The first contains the heading and link. The second contains the content.

The <div> tags need multiple classes applied, so you will have to edit the HTML in your web editor's code view.

If you have more than one of these Collapsible Block on a page, make sure you edit the href, name and tabindex values so they are unique on the page. In this example, the first collapsible div uses <a href="#collapse1" name="collapse1" tabindex="1">. The second collapsible div uses <a href="#collapse2" name="collapse2" tabindex="2">

Here's sample HTML for two collapsible blocks.

<div class="news-header revealomatic collapsed">
<h3><a href="#collapse1" name="collapse1">This is an example of where you would put your first visible header.</a></h3>
</div>
<div class="news-content">
<p>This is an example of where your first chunk of expandable content would go.</p>
</div>


<div class="news-header revealomatic collapsed">
<h3><a href="#collapse2" name="collapse2">This is an example of where you would put your second visible header.</a></h3>
</div>
<div class="news-content">
<p>This is an example of where your second chunk of expandable content would go.</p>
</div>

Next, you need to link to the javascript that controls the collapsing-expanding animation. Put this into the head of your web page (visible in your editor's code view), above the </head> tag.

<script src="/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/js/reveal.js" type="text/javascript"></script>

Tip: If you want a collapsible block to be expanded when the page is first loaded, remove the collapsed class.

<div class="news-header revealomatic">

If you have more than a couple blocks, you should add the following link that lets your visitor Expand/Collapse All. In most cases, this link should be in the page before the collapsible blocks

<a class="revealomaticAll">expand/collapse all</a>