A BulletProof Idea*

Create BBC iPlayer style roll over boxes

// May 24th, 2009 // 3 Comments » // Code, css, tutorials

You must have seen those funky roll overs used on the BBC iPlayer website right? I have come up with a very basic way of doing the same thing, not with Javascript but with CSS and HTML.

Step One

First we need to prepare our image, so open your image editor of choice (I am using Fireworks for this example) and create a new canvas with a width of 178px and height of 200px. In the top half of the canvas place an image with a width of 178px and a height of 100px.

Now we make a copy of the image by selecting it and copying it. Paste it into the lower half of the canvas like below:

Then we add a black rectangle over the bottom image and reduce it’s opacity to around 80%
image

Finally add some text

Step 2 – The Code

Lets start with some really basic and easy mark up

and our css…

all we have done is move the bottom half of the image up on the hover state to cover the top half of the image by setting a background position. Easy!

You should get something like this:

Easy Flexible Rounded Boxes

// March 29th, 2008 // 1 Comment » // css, tutorials

A number of people have asked me what is the easiest way to make rounded boxes without resorting to Javascript and other such methods. Well, you’re in luck and here is a method I use which is simple and lean in terms of mark up, also the box is flexible which always contains the text no matter what size the text is re-sized in the browser.

All you need is two images and an unordered list and away you go, here’s what we are going to make today:

View Live Demo

The Images

First open up the image tool of your choice (I used Fireworks for this tutorial) and create an a rounded rectangle image about 273 x 170 pixels like the one below. It doesn’t matter what colour or gradient etc.. you choose – you be the boss here, or if you wish, you can download the images with the source files at the end of this tutorial.

Once you have done this, give it a name. I chose “top.gif” as this will be the top of our box which will contain our title or heading.

Next we need to create one more rounded rectangle image which will form the bottom half of our box. With your image tool still open create an image like the one below. This time make it 273 x 400 pixels:

Once done, save it as “bottom.gif” and that’s it all the images you need!

The Mark Up

Simple mark-up is all that is needed. Here we create a div class of “round_box” and inside that div there is a level 2 heading and an unordered list made up of links. That’s all there is to it!
Note: I put in “#” as a url in this example, replace this with whatever you choose. Save this as “box.html”

<div class="round_box">
	<h2>Menu</h2>
	<ul>
		<li><a href="#">A BulletProof Idea</a></li>
		<li><a href="#">Look What My RSS Dragged in #4</a></li>
		<li><a href="#">Green Press</a></li>
		<li><a href="#">Introducing Cardiff Geeks</a></li>
		<li><a href="#">Splashes Of Colour</a></li>
		<li><a href="#">Hidden Gems Inside Mac OSX</a></li>
	</ul>
</div>

Styling The Box

Again this is so easy – let’s start by specifying a font-size and type:

body {
  font-family: Helvetica, sans-serif;
  font-size:small;
  }

Now to style the links, here Im choosing green with a hover state of orange with underlined text.

a {
  color: #7DcE34;
  text-decoration:none;
  }

a:hover{text-decoration:underline;color:#ff9900;}

Now to give the bottom half of the box a width and a background image (bottom.gif):

.round_box {
  width: 273px;
  background: url(img/bottom.gif) no-repeat bottom left;
  }
 

Next we set the top of the box which will contain our second level heading or title and position it’s background image (top.gif). Notice I have set a border of 2px solid green, this gives a “join” between our two images.

.round_box h2 {
  margin: 0;
  padding: 6px 8px 4px 10px;
  font-size: 180%;
  color: #fff;
  border-bottom: 2px solid #7DcE34;
  background: url(img/top.gif) no-repeat top left;
  }
 

Now to style our unordered list:

.round_box ul {
  margin: 0;
  padding: 14px 10px 14px 10px;
  list-style: none;
  }
 

And our list items:

.round_box li {
  margin: 0 0 6px;
  padding: 0;font-size:120%;
  }

Save this as “box.css”, and that’s it finished!

Source Files

Download Source Files Boxes.zip (12kb)

Using Semantic Naming Conventions In Your Mark-Up

// February 25th, 2008 // 1 Comment » // POSH, tutorials, web standards

When marking up a document, how many of us pay attention to good naming conventions? By this I mean using mark up that is meaningful and nonpresentational.

Let’s take a very basic web page which has main navigation, a header which contains the company branding or logo, a sidebar for additional content, a main content area and a footer area which has site content such as copyright information. Before we all used web standards and meaningful mark-up our document would probably resemble something like this:

The way each div element is named is not telling you anything about the content, only giving clues to how the content is being presented. Even though we can achieve valid mark up using these naming conventions, they are non-semantic and as we are aiming for a true separation of presentation from content we need to have a re-think of these names by using semantic mark-up.

Let’s take another look at our document and break it down piece by piece:

#Navigation

Looking at our mark-up we have just #navigation, but what kind of navigation? Is it primary, sub or whatever? As this will be the main navigation in our document lets give it a meaningful name, lets call it #nav_main. This clearly tells us that this is the main navigation not the sub or the secondary but the main navigation.

#Header

The company logo is something I have seen named as ‘header’ or ‘head’ or even in some cases ‘banner’. Not at all semantic as it’s presentational, but how about ‘brand’ or ‘branding’. That is what we are putting there – the company branding or identity. When we see a famous logo like Fedex for example, we don’t say “oh that’s the company header” we say ‘Ah! Thats the company brand identity or ‘Branding’ So, in our example let’s use #branding

#Sidebar

A question we must ask ourselves here is “what is the sidebar actually for and what is it going to contain?” In our example we are going to use it for additional content. Let’s say for example we want to put a small thumbnail gallery like a flickr feed inside the sidebar, we can label this “Additional content” but more semantically we can re-name this to #content_sub If we kept it as #sidebar we would be using a presentational name which goes against our goal of separating presentation from content.

#Content

Our example has one area of main content which needs to be given a definition. Instead of just calling it ‘content’ which could be anything on the page, let’s give it more meaning, let’s call it #content_main
Here we can achieve an added bonus, you have probably seen those ‘skip to main content’ links on some websites right? Now that we have a meaningful ‘hook’ in place, we really can skip to main content rather than putting a ‘skip to content’ link in the page and linking it to just something with the name ‘#content’.

#Footer

Finally we come to the ‘footer’ of our page. Now footers have a wide range of possibilities and are often overlooked. In fact they are a vital component of your website as they can contain some useful information.
In our example, we are going to put some copyright information, a link to a site map, and a link to an accessibility statement. This tells us that the footer is going to contain content relating to information about the site. So I think it would be common sense to re-name the footer to #site_info

Now let’s look at the changes we have made to our mark-up:

All we have done is change our naming conventions from presentational sounding mark-up to semantic mark-up giving our document’s content structure something that is meaningful and not presentational.

Advantages

Using naming conventions in this way can help yourself or a design team working together on a project in more ways than one. In a team environment, naming conventions make it simple to understand mark-up that has been written by a designer or a developer, as everyone in that team will understand a set of pe-defined conventions that the team have created and agreed upon. It will also reduce the margin for error with deadlines looming so in turn can help reduce costs as well.

It can also be a great deal of help to yourself. You probably have old items or snippets of code created months ago which you might not have looked at in a while, and whilst reading through them thought “what the hell does that relate to?”. It’s so easy to forget why you gave something a certain name when you created that code, so by using the same named conventions, you have ease of reference when reading through your code.

Not Just Mark-Up

A common head-scratcher is often when naming images. In our #branding we could use the same name for our company logo image – branding.jpg. Here we are naming our image semantically by naming it what it is rather than what it looks like.

Find Out More

Please Note: The above article is not a definitive guide, just a seed to plant into your mind about the idea of using good well formed and semantic mark-up. POSH (Plain Old Semantic Mark-Up) is quite a debatable subject and I would suggest reading more from some of the authors listed below to learn more in greater detail:

“There is a danger of adversly effecting semantics through incorrect use of CSS.” Andy Clarke

Read: Semantics and Design by Andy Clarke

Learn about the origins of POSh and Semantic XHTML from the Microformats Wiki
Read: POSH – Microformats
Read: Semantic XHTML

Here’s a great article from Digital Web entitled Mark-Up As A Craft which gives an extensive list of guidelines to aid you in creating well formed and semantic mark-up.

These are just a few pointers that I hope you will take a look at and learn from. Good Luck!