–– workshop home ––

Workshops

CSS Puzzle Box Presenter Notes

Introduction and Overview

Shadows

Drop box effect

Basic technique is to make the bottom and right borders darker and wider than the top and left borders (assuming that's the direction you want the shadowing effect to appear). This is used mainly for images, but also is good for tables and in fact works for any block-level element.

	border-bottom: 2px solid #003;
	border-left: 1px solid #009;
	border-right: 2px solid #003;
	border-top: 1px solid #009;
	float: right;
	margin-left: 1em;

Graphic Drop Shadows

Make a shadow in the graphics editor of your choice. If you don't know how, the Sample Files provides one and you'll just have to live with the size of the shadow.

Create a div to hold the whole deal. Put your image of choice into the div, and put the shadow file as a background-image of the div itself. Style the div appropriately, and you're done!

It's that word "appropriately" that is, of course, the difficult part.

HTML

Here is the html, which is pretty straightforward:

	<div class="imageshadow">
	  <img src="file.ext" alt="descriptive text"/>
	</div>

Styling

Here are the associated styles:

.imageshadow {
  float:right;
  background: url(shadowAlpha.png) no-repeat bottom right; /*adjust path*/
  margin: 10px 0 0 10px;
}	
.imageshadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #bbb;
  margin: -6px 6px 6px -6px; /* these values correspond to the size of the shadow */
  padding: 4px;
}

Change the background color of the body (look in head section) and you will see that the transparency value of the alpha channel lets this shadow work against any background. This is why we used a png file. Older browsers cannot render png but that's okay because all that happens is that they don't get the drop shadow.

Taming Lists

This puzzle is named after a oft-cited essay by the same name at A List Apart. Much of what follows is shamelessly cribbed from there. http://www.alistapart.com/stories/taminglists/

The most common problem with lists is that the bullet (or number) falls outside the block area of the list, causing the bullets to fall into some other div. Here's an example: lists.html

Floats

Float Left-Right

Sometimes we want to put something left and right: for example, a running title and a page number or date. The way to handle this is to use nested divs along with float. We can even have text appear between the two.

div#headleft {
	float: left;
	padding-right: 1em;
}
div#headright {
	float: right;
	padding-left: 1em;
}

The fun comes when you want to do more complex formatting. For example, you might not want text to appear between the two. In that case, the following div needs to do a clear: both. See the sample file floats.html for examples of different techniques.

Alerts

.alert {
	background: #fff6bf url(exclamation.png) 15px center no-repeat;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	}

Indicators

File Type Indicators

The simplest way is to add text. If you use icons, don't forget the alt tag.

Opens a New Window (external links)

Uses an icon or symbol plus title

One approach to this can be found at MaxDesign, although I don't care for that approach. I borrowed the ideas from there, though.

I like to use a character entity rather than an icon. I put a title in the anchor tag to indicate external or new window.

Then, after the anchor tag ends, put in a span. Inside the span put in the same text as in the title. Class the span and set display to none. This makes the explanatory text disappear visually, but it will be read reliably by screen readers.

Footnotes

This is one of the few good reasons I can find for internal anchors. Use one anchor to go from the number to the note, but use another anchor to return the reader to the main text. The character entity ↩ (#8617) makes a nice symbol for the return trip.

Another approach is to use the :hover pseudo-class and you can pop up a hover box. This is visually handy but can get clumsy, both in the code and for the reader.

Drop Caps

Puzzle: how to create decent-looking drop caps.

Big first letter

How do we make one letter big? There are two choices. There's a pseudo-element called first-letter, or we can use a span.

Try this:http://css.maxdesign.com.au/floatutorial/tutorial0706.htm

or this: http://www.mandarindesign.com/troops.html

Centering

This example was taken from MaxDesign on 26 February 2008, with very minor revisions by me.

Centering liquid layouts

Liquid layouts are easy to center using margins on each side of the containing box. The margins can be set with em, pixel or percentage units.

div#container
{
margin-left: 10%;
margin-right: 10%;
}

Centering fixed-width layouts

You apply auto margins to the left and right of the containing block and it centers on the page.

The W3C Visual formatting model states: "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block."

So, a containing block can be centered using the following rules:

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

Vertical Centering

This is just plain hard. There is no tag or style for it. I leave it to you to research the problem. Just one caveat: make sure you find solutions that address IE7 and later. Dealing with earlier browsers introduces far too many hacks. Use the Advanced Search feature in Google to restrict your research to the last six months or last year.

Styling Images

file02 shows the unstyled image

The first thing we want to do is to float it right.

float: right;

But the text comes too close to the picture, so we'll add a left margin.

float: right;
margin-left: 1em;

Borders

A thin border tends to class-up an image, so let's add this.

border: 1px solid #000;
float: right;
margin-left: 1em;

What would happen if we styled img? It would affect every image on every page. I will sometimes do this to set a single-pixel border, then remove it in classes where I don't want it.

Image Captions

What you want is simple: a caption underneath the image

This is actually rather difficult to pull off because there's no structural coding for an image caption

A standard technique is to use a table, but that violates basic design principles because it's not tabular information.

So we use divs

Technique

One div holds both the image and the caption, then a nested div for the caption alone.

pseudo-code 

<div class="name">
	<img etc>
	<div class="imgcaption">
	code
	</div>
</div>
We can then style the two classes any way we wish. Here's an example: file03.

Note that I called it "imgcaption" and not just "caption". You should avoid using reserved words (html tags or css styles) as class or id names.

I basically hacked the caption so it would fit under the image. What happens if your caption is too wide for the image (remember, your user may be using a larger font!)? Remove the second break tag to see. Not very pretty. What can be done?

Force all images to be the same width and then set a width in pixels on the imgcaption. This is sometimes realistic, but often is not.

Edit the imgcaption tag for each picture individually. Determine the width of that image in pixels and then set max-width to something just a bit less for that imgcaption. Right-click on the image and choose properties to find its size.

This one happens to be 200 pixels width, so I would edit the img tag in the html file to be this: <div class="imgcaption" style="max-width: 195px;">

Exercise