Main Points

History is Now

This gallery shows off many OO-CSS components which you can use in your own websites. There are additional components in our design tools gallery. They are primarily geared towards streamlining the web design process, but they are fully production ready if a component fits your design requirements.

On a final note, the OO - CSS Gallery is not designed as a teaching tool. It is designed for people to copy and paste the CSS style rules into their linked stylesheet(s). You can then use the example XHTML as a model to trigger the OO - CSS component in your own webpages. If you understand the CSS, great. If you don't, who cares? While we have discussed OO - CSS significantly in other places, the gallery is purely aimed at examples and how to implement them. All you need is enough understanding of XHTML to write the proper elements, ids, and classes to trigger the style rules for an OO - CSS component. That's it. And that's the beauty of OO-CSS.

Image Components

Resource Captions

When you read about images, accessibility, and media, you will gets miles of ink spilled over the importance of the alt attribute and it's ability to provide a description of the media for those who will not be able to see it. Now I am solid supporter of web standards and a true believer in accessibility, so I'm not taking issue with the alt attribute. But what if you want to describe a picture for people who will see it!

The alt attribute is only used if we cannot access an image or if we mouse over an image and wait for a tool tip to appear. In contrast, it's not just normal, it's required for all images in print media to take a caption, if only a by-line for the photographer or a copyright notice crediting the image's owner. Resource captions is an OO - CSS component for providing captions for images (and other media as well) on your webpages. The caption should generally be shorter than the width of the image; I've used smaller images to show how the captions push out to the right when they get too long.

Component CSS

.insertPrimaryResource {
float: left;
}

.insertSecondaryResource {
float: right;
}

.resourceCaption {
display: block;
margin: -2em 0.5em 0 0.5em;
font-size: 0.8em;
text-indent: 1em;
}

Component XHTML

<div id="parentContainer">
<div class="insertPrimaryResource">
<img src="../Images/TopLeftCorner6.jpg" height="100" width="100" alt="The proposed top left corner image for the fluid image border." />
<em class="resourceCaption">Top Left Corner</em>
 </div>

<p>
Here's a lot of content...
 </p>

<div class="insertSecondaryResource">
<img src="../Images/Logo4.jpg" height="150" width="150" alt="The proposed logo image to be used for the page." />
<em class="resourceCaption">Logo Image for the site.</em>
 </div>

<p>
Here's a lot of content...
 </p>
<div class="spacer"></div>
 </div>
The proposed top left corner image for the fluid image border. Fluid Border: Top Left Corner

Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border. Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border. Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border. Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border.

The proposed logo image to be used for the page. Logo Image for the site.

Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too. Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too. Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too. Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too.

Wrapping Resource Captions

That's an excellent technique for short captions, but what if you just can't settle for that. Sometimes you just need write the content that you need to write. This is a bit trickier because there are number of older browsers which make our lives extremely difficult. If you do not want to have to cope with this complexity and can live tailoring your captions so they fit the size of the image, then the previous method definitely works best at the present time.

However, if you need wrapping captions and / or you're willing to write a little extra code for IE6 & 7, then you can start with the previous component and add the following touches. Note: the XHTML template is identical to the original resource caption component; you simply have the option to write as much text as you want.

Component CSS

.insertPrimaryResource,
.insertSecondaryResource {
display: table;
width: 1px;
}

For most major browsers, this causes the div element around the image to snap to the width of the image, but it forces the text to wrap when it hits the edge of the div. Exactly what we want. However, for IE 6 and 7, it causes the words of our long caption to stack up in a huge column of words (one word per line), creating a truly ludicrous effect. Therefore, we need to add an IE7 and below stylesheet to make some adjustments. Here's the CSS for the IE7 and below stylesheet. Special thanks to forum buddies and CSS gurus, Rayzur and Paul O'B of Sitepoint, for adding word wrapping for this component.

.insertPrimaryResource,
.insertSecondaryResource {
width: auto;
}

.resourceCaption {
width: 150px;
width: expression(this.parentNode.offsetWidth-22);
}
The proposed top left corner image for the fluid image border. Fluid Border: Top left corner image of the piece of parchment.

Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border. Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border. Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border. Here's a lot of content directly discussing the top left corner image as it relates to the fluid image border.

The proposed logo image to be used for the page. The official logo image for the Earth Chronicle website, created by chroniclemaster1.

Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too. Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too. Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too. Here's a lot of content discussing the top left corner some more, but there's also a brief mention of the logo image too.

Thumbnail List

Thumbnail images are a common organizational challenge. This component neatly organizes a list of thumbnails with descriptive text. The XHTML you write to trigger it is pretty simple, and it's completely regular making it easy to generate from a server side application for image indexes, photo albums, etc.

Component CSS

/* Thumbnail List */

#thumbnailList,
.thumbnailList {
list-style-type: none;
clear: both;
}

#thumbnailList img,
.thumbnailList img {
float: left;
margin: 0 0.2em 0.2em 0;
border: 0.1em solid #000000;
}

#thumbnailList li,
.thumbnailList li {
clear: both;
margin-bottom: 2em;
}

#thumbnailList a,
.thumbnailList a {
font-weight: bold;
}

Component XHTML

<ul id="thumbnailList">
<li>
<a href="AfricaWMGP.aspx">
<img src="../Images/AfricaWMGPThumb.jpg" height="50" width="45" alt="SRTM data set of Africa." />
Africa</a> - This image shows an SRTM data set for the continent of Africa.
 </li>
<li>
<a href="AfricaSRTM-Water.aspx">
<img src="../Images/AfricaSRTM-WaterThumb.jpg" height="50" width="46" alt="SRTM data set of Africa with bodies of water added." />
Africa (with water)</a> - This image shows an SRTM data set for the continent of Africa. It includes water, ie lakes rivers, etc.
 </li>
.
.
.
 </ul>

Africa Images

  • SRTM data set of Africa. Africa - This image shows an SRTM data set for the continent of Africa.
  • SRTM data set of Africa with bodies of water added. Africa (with water) - This image shows an SRTM data set for the continent of Africa. It includes water, ie lakes rivers, etc.
  • A Landsat image of Mt. Kilimanjaro draped over a vertically exaggerated SRTM elevation data set. Mt. Kilimanjaro - This image shows a perspective view of Mt. Kilimanjaro created by draping a Landsat image over the elevation framework from an SRTM data set; the elevation is vertically exaggerated to show detail.
  • Satellite Image of Egypt and the Nile River Delta. Nile Delta - This is a satellite image of Egypt; note the visually stunning coloration, as the Nile River paints a bold band of green across the arid desert sands.
  • A Landsat image of the Richat Structure draped over an SRTM elevation data set. Richat Structure - This image shows a perspective view of the Richat Structure created by draping a Landsat image over the elevation framework from an SRTM data set. Although it looks like a blast crater, it is created by a purely geological process.
  • SRTM data set of the Sinai Peninsula. Sinai Peninsula - This image shows an SRTM data set for the Sinai Peninsula in Egypt.

Text Components

Descriptions Included

There are times when you want a simple list. Lists are excellent structures for keeping your writing brief and to the point. However, there are also times when you need to be able to expand on a point and include additional description. This component is a simple and easy way to do just that.

Component CSS

/* Descriptions Included */

#descriptionsIncluded,
.descriptionsIncluded {
font-weight:bold;
}

#descriptionsIncluded p,
.descriptionsIncluded p {
font-weight:normal;
}

Component XHTML

<ol class="descriptionsIncluded">
<li>
The webpage should function without apparent defects with CSS and Javascript off. (In IE, FF, O, and S)
<p>
This is a rough approximation of...
 </p>
 </li>
<li>
The webpage should be linear for text browsers.
<p>
The webpage should...
 </p>
 </li>
<li>
Normal bullet point text
<p>
Additional description...
 </p>
 </li>
 </ol>
  1. The webpage should function without apparent defects with CSS and Javascript off. (In IE, FF, O, and S)

    This is a rough approximation of how a text browser will render the page. To go the extra mile, break out Lynx. It's a popular text browser and Google recommends it as a Googlebot's eye view for SEO purposes. Tips: CSS can be turned off from the nested master page; Insert an underscore in the run_at attribute of the <head> tag like so. Javascript can be turned off from the main master page; change the path so that the file can't be found.

  2. The webpage should be linear for text browsers.

    The webpage should make sense when starting from the beginning and reading straight through. For something like a table, it may be more effective to try reading it in code. Should this be a code check??

  3. The webpage should be accessible with only a keyboard. (In IE, FF, O, and S)

    Keyboard accessibility is a much faster way to navigate the page than a mouse. It allows you to stack commands. I can execute the keyboard commands to move to the next page or use an application while the page is still loading. The page has to appear before you can click on the user interface. It's also a more reliable way to navigate as well; many input devices are similar to the function of a keyboard, while mice and touch pads are related to each other but to little else.

Computer Code

While tailored more towards developer websites, this component fulfills the need to provide the structured display of computer code. Advanced implementations can make use of additional XHTML elements, like <var>, and apply additional classes to customize language structures (e.g. ids vs. types vs. loops, etc.) and distinguish different languages (e.g. XHTML vs. CSS vs. PHP, etc.). However, this basic implementation at least allows us to render computer code simply and accurately in a webpage.

Component CSS

/* Computer Code */

code {
font-family: "Courier New", Courier, monospace;
}

code.computerCode {
margin: 0.5em 0;
}

/* Create block structure for code blocks */
code.computerCode,
.computerCode code {
display:block;
line-height: 1.2em;
}

.codeNewIndent {
margin-left: 1em;
}

Component XHTML

<code class="computerCode">
&lt;ul id="colorList"&gt;<br />
<code class="codeNewIndent">
&lt;li class="amber"&gt;<br />
<code class="codeNewIndent">
&lt;strong&gt;Amber&lt;/strong&gt; - Mellow, it's an Autumn leaf color<br />
</code>
 &lt;/li&gt;<br />
&lt;li class="ayerBeige"&gt;<br />
<code class="codeNewIndent">
&lt;strong&gt;Ayer Beige&lt;/strong&gt; - a historical document sample<br />
</code>
 &lt;/li&gt;<br />
</code>
 &lt;/ul&gt;
</code>
<ul id="colorList">
<li class="amber">
<strong>Amber</strong> - Mellow, it's an Autumn leaf color
 </li>
<li class="ayerBeige">
<strong>Ayer Beige</strong> - a historical document sample
 </li>
 </ul>

Most of the XHTML examples are pretty clear, however, I've found constructing code samples can take a tedious amount of time if done manually. As one of the most complex XHTML samples, I'm therefore including my procedure. You will start by copying the code sample itself into the webpage; we then convert this so that it displays correctly as XHTML. You will also need a simple find / replace tool in your text editor, and virtually all such editors have them.

  1. Wrap the code sample in the component container. <code class="computerCode">
    Code Sample Here </code>
  2. Find and Replace all &s with &amp; (we're about to add a lot more so this needs to be the first find / replace).
  3. Find and Replace all >s in the code sample (but not the container tags) with &gt; (usually not many except in XHTML code).
  4. Find and Replace all <s in the code sample (but not the container tags) with &lt; (usually not many except in XHTML code).
  5. Insert a line break, <br />, at the end of every line in the code sample, including whitespace lines. (Must be done after the >s and the <s are replaced or the line breaks won't work.)
  6. Each section of code that is indented needs to be wrapped in a code element with a new indent class. All the lines which are indented at least one space are wrapped together. Then you continue wrapping lines indented at least two, then three spaces, etc. <code class="computerCode">
    &lt;ul id="colorList"&gt;<br />
    <code class="codeNewIndent">
    &lt;li class="amber"&gt;<br />
    <code class="codeNewIndent">
    &lt;strong&gt;Amber&lt;/strong&gt; - Mellow, it's an Autumn leaf color<br />
    </code>
         &lt;/li&gt;<br />
    &lt;li class="ayerBeige"&gt;<br />
    <code class="codeNewIndent">
    &lt;strong&gt;Ayer Beige&lt;/strong&gt; - a historical document sample<br />
    </code>
         &lt;/li&gt;<br />
    </code>
     &lt;/ul&gt;<br />
    </code>

Note that the lines indented two spaces in this example must be wrapped separately, because there are lines indented less than two spaces between them. And that's all there is to it. This automates code conversion quickly, and because it's a consistent procedure, I became comfortable with it after converting just a few code samples.

Clearly, this is just the beginning of what you can accomplish with OO - CSS, but these are a couple of excellent components that I've found useful on more than one occasion.

Column Form

Column form replicates the look of table-based form layouts. It requires form components to be aligned on the right edge as opposed to the left, but provides excellent cross-browser performance and adapts gracefully to changing browser configurations. The XHTML sample also demonstrates best practices for all viable form components, and shows the proper way to mimic a select elements for a select menu (as a drop down) or list box (checkbox / radio button list). For more information about best practices for writing form XHTML, click here. Note: It is recommended to avoid use of a drop down in your form for readability and visibility; it's better to be able to see the entire form at a glance.

Component CSS

/* Column Form */

.columnForm {
font-size: 0.7em;
list-style-type: none;
margin: 0 auto;
width: 61.73%;
}

.columnForm li {
float: left;
width: 90%;
}

.columnForm label {
float: left;
font-weight: bold;
font-size: 1.3em;
width: 100%;
}

/* Drop Down Menu Modifications */

.columnForm .dropDown {
font-size: 1.3em;
font-weight: bold;
}

.columnForm .dropDown ul {
font-size: 0.8em;
font-weight: normal;
width: 38.26%;
}

.columnForm .dropDown li {
width: 80%;
}

.columnForm .dropDown label {
font-size: 1.3em;
font-weight: bold;
}

/* Style Form Elements */

/* All form elements */ .columnForm input,
.columnForm textarea {
float: right;
font-weight: bold;
margin-top: 0.7em;
}

/* All textbox elements */ .columnForm .shortTextbox,
.columnForm .textbox,
.columnForm textarea {
margin-top: 0.2em;
}

.textbox,
textarea {
width: 13em;
}

.shortTextbox {
width: 2em;
}

/* Miscellaneous */
input,
label,
textarea {
padding: 0.2em;
}

.submitButton:hover {
color: #FF0000;
}

.columnForm label:hover {
background-color: #FFF0CD;
}

Component XHTML

<fieldset id="columnFormTest">
<legend>
Column Form Demo
 </legend>
<ul class="columnForm">
<li>
<label for="standardTextboxColumn">
Standard Textbox
<input type="text" name="standardTextboxColumn" id="standardTextboxColumn" class="textbox" />
 </label>
<div class="spacer"></div>
This is explanatory text in cases where the textbox may require special formatting like a date, 04-25-2005.
 </li>
<li>
<label for="shortTextboxDemoColumn">
Short Textbox
<input type="text" name="shortTextboxDemoColumn" id="shortTextboxDemoColumn" class="shortTextbox" />
 </label>
 </li>
<li>
<label for="standardTextareaColumn">
Standard Textarea
<textarea name="standardTextareaColumn" id="standardTextareaColumn" rows="4" cols="20">Default Content</textarea>
 </label>
 </li>
<li>
<label for="test1-page1-Column">
Test One / Page One
<input type="checkbox" name="test1-page1-Column" id="test1-page1-Column" value="complete" />
 </label>
 </li>
.
.
.
 <li>
<div class="dropDown">
Destination
<ul>
<li>
<label for="vacationDestinationColumnTahiti">
Tahiti
<input type="radio" name="vacationDestinationColumn" id="vacationDestinationColumnTahiti" value="tahiti" checked="checked" />
 </label>
 </li>
.
.
.
 </ul>
 </div>
 </li>
<li>
<input type="submit" name="submitButtonColumn" id="submitButtonColumnTest" class="submitButton" value="Test" />
 </li>
 </ul>
 </fieldset>
Column Form Demo
  • This is explanatory text in cases where the textbox may require special formatting like a date, 04-25-2005.
  • Tests
    • This is explanatory text in cases where the drop down may require an extended explanation, though this should be rare for radio buttons and checkboxes.
  • Destination

I also have galleries for OO - CSS components useful for design tools during XHTML prototyping, and another for key CSS techniqes implemented traditionally without OO - CSS.