brandnewbox.co.uk

Reordering list items

This is a little experiment to create a list of items that can be easily reordered using the DOM.

Using CSS to produce an image gallery

UPDATE: an alternative version of this method has been added at the bottom of this article that takes a semantically marked up gallery and converts it to use the following technique using javascript.

An image gallery is a common web page requirement - a list of thumbnail images that link to larger versions of the images. In my example, the thumbnails have a maximum size, but can be of any dimensions within that size. Here is a technique to neatly display these images using CSS.

The finished image gallery can be viewed here

Generate list of images

As an image gallery is in essence a list of images, the logical HTML markup to use is an unordered list. Within each list item, the thumbnail image is displayed with a label, and it links to the full-sized image.

For starters, let’s use:

<ul>
  <li>
  <a href="big-image">
    <img src="thumbnail-image" alt="Label" />
  </a></li>
  ...
</ul>

Arranging images in rows and columns

To line the thumbnails in rows across the page we use the CSS:

li { display: inline; float: left; }

Traditionally we would have used tables, but by using CSS the number of columns can vary according to the width available.

As the thumbnails can all be differect dimensions, we can add a width and a height to get a more uniform grid

li { 
  display: inline; 
  float: left;  
  width: 101px; 
  height: 101px; 
}

Adding a background slide image

To make it a bit prettier let’s add a background image to the <li>:

li { 
  display: inline; 
  float: left; 
  width: 101px; 
  height: 101px; 
  margin: 4px;  
  background: transparent url(frame.gif) no-repeat top left; 
}

Centering the thumbnail

To centre the thumbnail within its container we’ll change the markup to make the thumbnail image a background image to tha <a> link. This allows us to use CSS to centre it easily and works well across browsers.

HTML:

<li>
  <a href="" 
    style="background-image: url(thumbnail-image)" /></a>
</li>

CSS:

li a { 
  display: block; 
  width: 101px;
  height: 101px;
  background-position: center; 
  background-repeat: no-repeat;
  text-decoration: none;
}

Displaying labels

Moving the thumbnail image into a background image loses the image’s label from the HTML. To put it back in, we include it within a <span> in the <a> tag.

HTML:

<li><a href="" 
  style="background-image: url(thumbnail-image)" />
  <span>Label</span>
  </a></li>

CSS:

li { height: 115px; }
li a span { 
  font-size: 9px; 
  position: relative; 
  top: 103px; 
  color: #666;  
  text-transform: uppercase; 
  display: block; 
  text-align: center; 
} 
li a:hover span { color: red; }

A working example of an image gallery can be found here

As one of the commenter below suggests, ideally the gallery should be marked up semantically - images should be tagged as <img>’s. An alternative method that uses javascript to ‘juggle’ a more semantically sound version of the gallery into the format above has been produced: an unobtrusive Javascript and CSS based image gallery

CSS Hacks

Browser bugs and differences in intrepreting the W3C specifications prevent CSS-based web designs from displaying the same on all web browsers.

CSS hacks take advantage of further browser bugs to hide CSS rules from browsers that mis-interpret them. In effect we use one bug to fix another.

The use of CSS hacks to fix problems is problematic. Future versions of browsers could fix one of the bugs being used, but not the other, so careful choice of hack is needed and they should only be used for old versions of browsers where it is known that neither or both the bugs still exist in the current version.

On a maintenance level it complicates stylesheets. Hacks can be difficult to spot and so should be commented in the code. My technique for doing this is to mark each occurence in the stylesheet with a comment, and for at least the first occurrence provide a link that provides a brief description of the bug and the hack.

The aim of this section is provide permanent links to hacks that I have used within my own code.

For reference: some underused entities

“Double quotes”

‘Single quotes’

em — dash & en – dash

Ellipses…

Source code:

“Double quotes”
‘Single quotes’
em — dash & en – dash
Ellipses…

Note: the difference between the hyphen, the em dash, and the en dash.

Yellow Fade Technique

Fade.js is a script that implements the Yellow Fade Technique used by 37signal's Basecamp project management tool to highlight recently changed elements on a page.

When an item is changed on a web page, the page is often forced to reload. So that the user can easily spot the change they have just made, it is highlighted (in this case, with a yellow background) for a number of seconds before fading back to its normal colour.

Click here to demonstrate on the block below:

In this case, the fade is triggered by clicking on the link, but it would generally be triggered by the pages onload event.

Links page

The links on this site's links page are initially stored in an 'Unsorted' section in a database, and then occasionally categorised into a more relevant section when I get around to it.

Previously, all unsorted links were only visible to me behind a password protected part of the site until they were categorised, but I've noticed that several people have been following their referring links back to this hidden page (which seems a bit unfair to them, not being able to see where there page is being linked from).

All the unsorted links have therefore been made available on my links page via a link at the bottom.