The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?

Semantic Mark-up: An Unordered List

Flickr places all of the photos in divs. These are then styled to float next to each other or appear however you like.

In my opinion, the most semantic way to mark-up photos like this would be to create an unordered list. A photo album is essentially a list of photos.

This could be an ordered list if the photos were intended to be sequential – like a photo essay or a comic book – but the average photo album is just a collection of pictures.

The mark-up would look something like this.

<ul id="images">
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
</ul>

The images would then be displayed in a long, vertical list.

Styling – Making the List Inline

In the end, we’d like to have the images sit side by side. Ideally, they’d form a rectangle of either 2 x 3 pictures, or 3 x 2.

The first thing we want to do, then, is remove the list style type, clear the padding/margins of the list, and make the images appear next to each other. The last bit we can achieve by giving the list items the “display: inline” css declaration.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
#images li {
  display: inline;
}

This would create a simple horizontal list, like this…

Width: Restricting the Number of Columns

Notice how the list terminates at the end of its container div and continues on a second line?

Without a width declaration, the unordered list expands as large as wide as it can. When that width limit is hit, it starts a second line, and continues until all of the list items have been displayed.

We can use this to our advantage by setting a width declaration. This allows us to limit the number of images to be displayed in each row.

If our images are 75px square, and we want to display three images across, we can set our width to be about 250px. The extra space can be used later for paddings and margins – but the images will appear left justified within the list container.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 250px;
}
 
#images li {
  display: inline;
}

This would create a list like this…

Finishing Touches: Padding and Borders

With the basic structure complete, we can add a few finishing touches.

First, we might we to add a little padding to the images. This would space them out a few pixels from each other so that they don’t appear so cramped.

#image img {
  padding: 4px;
}

Adding this line to the css file would change the image album to this.

Finally, a cool effect for images is to add a border around the image. If you include a padding value for the img tag, the border is placed 2-3 pixels away from the edge of the picture. It gives a nice framing effect.

#image img {
  padding: 2px;
  margin: 2px;
  border: thin solid black;
}

This final change would look something like this.

By using an unordered list to mark-up your image collection, you end up with semantically correct and simple to style content. Much better, in my opinion, than a string of divs.

I only realized today – while testing something else – that the plugin had been firing off warning messages because of an oversight in the code. Warning messages annoy me, so I decided to fix it up.

Where’s the Error?

The plug-in consists of one file – per-post-css.php.

Towards the end of the function per_post_css_js, the script loops through any retrieved CSS and JS files. During these loops, the link tags are added to the head element of the page.

Here’s the line that deals with CSS stylesheets.

foreach ($array_css as $css){ 
  print("\t<style type=\"text/css\" media=\"screen\"> @import url(". $css ."); </style>\n");
}

Notice anything potentially wrong here? What happens if there are no custom CSS files attached to your page?

Foreach looks for an array ($array_css). If a value is passed to foreach that is not an array, it’ll fire off a warning – and that’s just what it did.

The fix is simple enough. Before attempting to iterate the loop, first check to see that $array_css (and later $array_js) is in fact an array.

if (is_array($array_css)) {
	foreach ($array_css as $css){ 
		print("\t<style type=\"text/css\" media=\"screen\"> @import url(". $css ."); </style>\n");
	}
}

It’s a minor problem that creates some inconsequential warnings… but it annoyed me so I fixed it. If you have display_errors turned off in PHP (which I usually do) you won’t notice the problem either.

Per Post CSS and JS Updated Source Code

In the plug-in file, the homepage is listed as http://www.flog.co.nz. Oddly enough, I didn’t see a reference to the script on the page anymore, although the author still updates the page.

When I searched for a new copy of Per Post CSS and JS, I found a listing in a WP Plugin Directory – which pointed to an old post on flog.co.nz. That post and the link to the source code are both dead now. Perhaps they were cleaned up to make room for new content.

Regardless, I’m going to re-post the source code for the Per Post CSS and JS WP Plugin here to keep it available.

Kudos and thanks to the original author, Adam Burmister.

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.

Look At the HTML/CSS

Before we start making things dynamic, let’s look at the basic HTML.

Let’s say we want to make a list of items – in a table – maybe a list of emails. The end result should be a table with alternating background colors for rows – white and light blue.

If we were to create this table by hand, it might look something like this.

<table>
<tr class="blue"><td>E-mail subject</td><td>Sender</td></tr>
<tr class="white"><td>E-mail subject</td><td>Sender</td></tr>
</table>

This assumes that we have a CSS class defined as “blue” with a blue background and “white” with a white background.

Adding Some PHP to Assign Classes

We’re setting the background color by adding a class declaration to the table row. The first step in making this dynamic is to use PHP to echo the class. Like this…

<tr class="<?php echo 'blue'; ?>"><td> ... </td></tr>

We’ve taken the same table row element from before and replaced “blue” with a php snippet that echos the same phrase, “blue.” The end result is the same HTML that we created in the first example.

Dynamically Choosing the Class

The final step in making this dynamic is to add a conditional statement to the PHP block. For example, let’s say we’re executing a loop 5 times. On the odd iterations (1, 3, 5) we’ll use “blue” as the class. On the even iterations (2, 4), we’ll use “white.”

To test whether or not a number is odd, you can use the modulus (%) operator. This returns the remainder of a division – so 2 % 3 = 1. With a little basic math theory, we know that if a number is divided by 2 and has no remainder it’s even – but if there’s a remainder of 1 it’s odd.

Here’s what the loop might look like.

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php
      if ($x % 2 == 1) { echo "blue"; }
      else { echo "white"; }
      ?>"><td> ... </td></tr>
<?php } ?>

That If Statement Is Kind of Long…

Well, we can shorten that up. This is a great place to use the obscure and un-readable ternary operator in PHP. It’s a shortcut that allows you to write a simple if-statement in one line.

For example…

echo (true ? "Yes" : "No");

The ternary operator takes three parts – the conditional statement (in this case I just wrote true), a value to return if the statement is true (“Yes”), and a value to return if the statement is false (“No”). I echo’ed the result just so you could see what the statement outputs (in this case, “Yes”).

We turn our previous if statement into a ternary operator statement and shorten up that code block quite a bit. Like so…

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php echo ($x % 2 == 1 ? "blue" : "white"); ?>"><td> ... </td></tr>
<?php } ?>

Creating these table rows is just one example of how you can use PHP to help spice up your HTML. With this concept, you can dynamically alternate styles based on a bunch of factors.

How else could you use this?

You could alternate the background colors of comments in your blog template. You could include a bottom-border after every five rows in your table. You could make a calendar module and display Saturday and Sunday in boldface.

The options are really endless – so long as you understand the basic principal.

Unfortunately, this isn’t a built in function of WordPress. Fortunately, you can add this functionality with a plugin.

Headspace

I originally accomplished this with the Headspace plugin.

Headspace is an all in one SEO plugin for WordPress. It’s major function is to allow you to add custom titles, tags, and meta descriptions to your WordPress posts. This should help with your SEO and SERP.

An added bonus is that you can add individual CSS stylesheets and JS scripts to each page. There’s an extra field in the writing page where you can add either of these two options.

This part of Headspace worked great. However, I was having trouble getting the other SEO functions to work. I was assigning descriptions and titles, but no meta tags were being generated.

Replacing Headspace

To fix that problem, I de-activated Headspace and got the All In One SEO Pack WordPress Plugin. It worked great, but that’s another post altogether.

I didn’t realize until after I had deactivated Headspace that I had also deactivated the custom CSS on a few posts/pages. I checked the pages and low-and-behold the custom CSS didn’t exist anymore.

I didn’t want to re-active Headspace just for this function, so I went off in search of a better solution.

Per Post CSS and Javascript

I eventually stumbled on this very simple plugin – Per Post CSS and JS.

It’s only a few short lines. It uses the custom fields function of WordPress to add the custom link tags. You define a CSS or JS field for a post, enter the URL, and the plug-in adds a link tag to the head section of your page.

It’s quite simple, and if I didn’t find a suitable script I was going to make one myself. However, this works perfectly well and I don’t think I could really expand on it (except maybe creating the CSS and JS fields on the writing screen, instead of using the custom fields) – so I doubt I’ll be writing my own plug-in anytime soon.

When it’s possible, re-use. Then focus your energy on things you need to do yourself.

You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff – like style different “input” types differently, style anchor tags with titles differently, and etc.

How does it work?

An attribute selector follows this basic formula…

[attribute="value"] { style information... }

Like an id or class selector, you can use it alone (as in the example above), or attach it to a specific html element.

How can we use it? Here are a few examples.

Style Links with Title Elements Differently

You could use this to give users a hint that an anchor tag or link has a title element. This way they know to hover over the link and read the tooltip.

a[title] { border-bottom: thin dotted blue; }

That declaration gives any anchor tag containing a “title” attribute a thin dotted blue underlining. You may have to tweak it a bit to make sure the normal anchor-underlining doesn’t interfere with it.

Style Particular Input Types on Forms

You can use this to style Submit buttons, Text Inputs, etc. – independent of other input types.

input[type="submit"] {  background-color: blue; }

This simple declaration gives all Submit buttons a blue background color. Fairly silly, but the point is the declaration – not the actual styling. You could do something similar with these declarations…

input [type="text"] { /* style information */ }
input [type="password"] { /* style information */ }

Style Internal Links Different from External Links

This is a really nifty trick… but unfortunately it requires a bit of CSS 3. This will probably invalidate your CSS, and your mileage may vary.

It’s still interesting to try out.

You can use “^=” instead of “=” to signal that the browser should match any element with the given attribute that contains the quoted string. It doesn’t have to be an exact match. So you can use “^=’mydomain.com’” to match any links that point to the domain you’re working on.

Like so…

a[href^="earn-web-cash.com"] { /* style information */ }

You could use this to given internal links a slightly different color – some kind of queue to help the user differentiate between internal and external links.

For a longer list of ways to use this neat little trick, check out this post Hip to Be Square. There’s also a list of the different ways to search for values (like ^=) – which will be valid in CSS 3.

Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…

Web Cash

We can build this button up in a couple of steps. First, we need to make our anchor tag (link) into a block – with some padding and a background.

Web Cash

a.button {
   background: #ab7f20;
   padding: .5em;
   color: white;
   text-decoration: none;
   font-weight: bold;

That gives us a nice, squarish look… kind of like a button. But it definitely looks flat and two dimensional. The next step we’re going to take is to add a gradient background. This will add a nice lighting effect – giving the button a bit of depth.

To do this, we need a background image. I made a gradient image in GIMP (read this tutorial to learn how to create a gradient image like this). Then we need to add the image to the css declaration by changing one line.

Web Cash

a.button {
   background: #ab7f20 url(uploads/2008/01/gradient-button.thumbnail.png)
     repeat-x top;

Notice that the color (#ab7f20) is the same as the second color in the gradient image. This gradient is long enough to color the whole area – but if our button gets too tall, we want it to blend in nicely.

The last thing we need to do is give it some borders – light on the top and dark on the bottom. This will give it the illusion of being hit by the light. It’ll also accentuate the effect of the gradient background image.

Web Cash

a.button {
   border-top: #f6daa3 3px solid;
   border-right: #724f05 3px solid;
   border-bottom: #724f05 3px solid;
   border-left: #f6daa3 2px solid; }
 
a.button:hover {
   border-top: #724f05 3px solid;
   border-right: #f6daa3 2px solid;
   border-bottom: #f6daa3 2px solid;
   border-left: #724f05 3px solid;
}

Notice that the background colors are flipped when you hover over the button. This gives the illusion that you are actually “pressing” the button – just by flipping the way the lighting hits.

You could also use the special “inset” and “outset” border types to cut down on that last css declaration. You lose a little control over the color and light placement, but it gives a pretty decent effect. Like this…

Web Cash

a.button {
   border: #ab7f20 3px outset; }
 
a.button:hover {
   border: #ab7f20 3px inset;}

And that’s all there is to it. Change the colors to your liking, add a custom gradient image, and you’ve got a nifty little 3 dimensional button.

All it takes is some css. No need to create a bunch of fancy images, and it’s easily expandable to accommodate the text inside of your button.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.

Create a Blank Image (120px x 120px)

First thing – fire up GIMP and create a new image. Usually a gradient background image is 1 pixel wide. For now we’ll create a bigger image so it’s easier to see what we’re doing – 120 pixels by 120 pixels. You can crop the image down to a 1 pixel width later.

Set the Foreground and Background Colors

When you create a gradient, you need to set two colors – the beginning color (usually the foreground) and the ending color (usually the background color). To change these colors, click on the square swatch of the foreground color in your toolbar (see the circled area in the screenshot to the right).

This should bring up a box titled, “Change Foreground Color.” Pick a dark color – I used #981313. Then, click on the Background Color Swatch (the one right behind the Foreground color). Change the background color to a lighter version of your foreground color – I used #f17b7b.

Select the Gradient Tool

Now that you’ve chosen the two colors, you’re ready to create the gradient. Click on the “Gradient” tool – it’s the square that fades from black to light gray. See the screenshot to the right. There are a bunch of options you could customize, but for a standard gradient background image you’re better off leaving them alone.

Draw the Gradient! Then Crop Away

Now you can actually create the gradient by clicking and dragging on your image canvas. Position the tool at the top border of your canvas (if you look in the bottom left, it’ll tell you when you’re over pixel “0″). Hold down the Control button to force GIMP to draw a straight line, and drag the cursor down to the bottom pixel of your canvas.

Let go. Voila! You’ve got a nice gradient image created.

You could use it as-is in your css stylesheet, but it’s usually a good idea to trim your picture to 1px wide. The browser can simply repeat the image across the entire width of the element – so making it wider than 1 px is simply wasting bandwidth. Go ahead and crop the image now, and in the future make your gradient images 1 px wide by whatever height you want.

Now, let’s write the css to use this as a background image for an html element.

.gradient {
  background: #f17b7b url(images/gradient.png)
    repeat-x top; }

There’s four pieces to this shorthand css declaration.

• #f17b7b sets the background color. This is the same as the bottom color in our gradient, so that if the container is taller than the gradient image it seems to blend smoothly.
• url(images/gradient.png) sets our gradient image as the background image. Make sure you change the path to where-ever you uploaded your gradient image.
• repeat-x tells the browser to repeat the image left-to-right for the entire width of the container. This is what makes our 1-pixel background image “stretch” across the entire width.
• top simply tells the background image to align itself to the top edge of the container. Not always necessary, but your better safe than sorry.

And that’s all there is to it. Create an html element with class gradient and it should have your lovely gradient background.

So get to it. Start drawing.

You can test how your site displays in a few browsers – for example, I often check mine out in Windows IE, Ubuntu Firefox, and Ubuntu Opera. But how am I going to check it on Mac browsers like Safari?

Enter Browsershots.

The premise is very simple. You check off a list of browsers and platforms, enter your website’s url, and click submit. Then the servers open your site, take a screenshot, and upload the display to Browsershots.

You can then view the screenshots and see how your website appeared in those browsers. You can check out some sample displays for an education related website that I created.

Your options are pretty extensive. At the moment you can choose from 36 Linux browsers, 12 Windows browsers, and 4 Mac OS browsers.

After you submit your request, you need to wait until your website comes up in the queue. Each server (factory, as they call it at Browsershots) has its own queue. A lot of the servers will be done in a couple of minutes, but some queues can be one to two hours long.

One of the downsides to the site is that your request will expire in 30 minutes. The completed screenshots will stay up there, but if you have any requests left in the queue they will be canceled.

You can refresh your request by clicking a button, but if you get stuck in a 90 minute queue you’ll have to remember to refresh your request several times.

All in all, very useful tool. I plan to use it to test out any future design projects. So the next time you want to see how a foreign browser would display your site, head over to Browsershots.

Today, we’ll take a look at how to make this tooltip look a bit nicer – using a gradient background and some extra styling.

To review, here’s the basic styling to create the tooltip. Refer to the original post for an explanation of the CSS/HTML.

a.info span {
    display: none; }

a.info:hover {
    position: relative; }

a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0; }

In order to make this look a bit nicer, kind of like this tooltipThis tooltip has a gradient background, some bold-face font, and a nice border on top and bottom., we’re going have to add some more style to a.info:hover span.

First, let’s change the colors a bit, add a nicer border, add some padding, and move the tooltip down about one line.

a.info hover span {
   top: 1.5em;
   padding: 1em;
   border-top: 3px solid #d58700;
   border-bottom: 3px solid #d58700;
   border-left: none;
   border-right: none;
   color: white;
   background: #516898; }

Adding that styling would leave us with this tooltipThis looks a lot nicer, but we still need a gradient background..

I created a gradient image in GIMP. You should be able to do this in your favorite image editing program.

I made the gradient image 120px tall. I figured that’s high enough for the average tooltip, and longer ones will be covered by the standard background color. This background color should be the same as the bottom color of the gradient. That way when the gradient ends… it blends in nicely.

To add the gradient, we’ll change one line in the css declaration for a.info:hover span – the background line.

background: #516898 url
  (images/tooltip-gradient.png) repeat-x top;

Now we’ve got our final tooltipThis should be nicely styled. Looks good to me anyway..

You’ll notice a few things in the background declaration – and these hold true for any time you use a gradient background. I included a color – which is equal to the bottom end of the gradient. This way it can blend in if the tooltip becomes longer than the gradient image.

I included repeat-x – which means that the gradient image will be repeated every 1 px along the x-axis. This let’s you expand the image to the full width of the block, but only have to load a nicely small 1px wide image. I also included top to make sure that the gradient appears all the way to the top of the tooltip’s box.

Well there you have it. Once you get the mechanics of the tooltip down, it’s pretty simple to add extra styling like a gradient background image. All you need to do is create your own gradient and tailor the colors to your own needs.

Happy tool-tipping.

You can achieve a tooltip like that on any anchor text by defining a “title” attribute. However, it will also be bland, yellow, and un-styled. You can’t control the size of the box, style of the font, or the general appearance of the tooltip at all.

But there’s a better way. This tutorial will show you how to create custom tooltips using simple, valid HTML and CSS. Once you’ve created the basic tooltip, you can style it to your heart’s content.

Before diving into the code, we should take a look at the CSS/HTML mechanics that we’ll need to build this thing. If you feel confident that you know everything… then feel free to skip ahead. Otherwise, read along.

First, let’s take a look at our goal. We need to…

• Create a box to hold the tooltip.
• Make the box invisible.
• Make the box visible once we mouse over our target text.
• Make the box appear “above” the page, instead of inline with the page.

Now It’s Here, Now It’s Not – Pseudo Classes

In order to make our box appear and disappear, we need to use a little html/css magic called pseudo-classes. Without these, we’d have to use javascript to detect when we mouse-over the target text.

Anchors (<a>) tags have a few built in pseudo classes – a:visited, a:active, and a:hover. This allows you to style different types of anchors differently. For example, an anchor tag will usually change color when you hover over it.

We’re going to use this to make our box appear and disappear. The box will initially be invisible. Then, using the a:hover pseudo-class, when we hover over the anchor tag the box will become visible.

Creating a Box – Holding the Tooltip

In order to display our tooltip and make it appear and re-appear, we need to create a container for it. Then we need to position it.

What’s the natural container tag? A <div>. Unfortunately, Internet Explorer doesn’t like the <div> tag, so we’ll use a <span> tag instead. To hell with semantics. It’s still valid html.

Initially, this <span> is going to be styled with display:none. Then, when the a:hover becomes active, it will switch to display:block.

We also need to position the span so that it appears “above” the rest of the page. We’ll need two css attributes to do this. First, we’ll give the anchor a position:relative declaration. Then, we give our span a position:absolute declaration.

This will make the tooltip hover above the rest of the page – and it’s position will be based on the relative position of the anchor text.

Building the HTML and CSS

Now that we know the basic building blocks, let’s look at the actual markup.

Here’s the HTML you would use to create the tooltip.

<p>Here’s some more sample text.  This 
  <a class='info'>anchor<span>CSS tooltip.  We 
  can style this!</span></a> has a css-based tooltip
  that we can style to our liking.</p>

There’s three basic elements here. The regular text – enclosed in a p tag. Our target text is enclosed in an anchor tag with class “info.” The actual tooltip is in a <span> tag inside the anchor tag.

Now, let’s look at the css necessary to make the tooltip magic work. This is the barebones version – we’ll style it a bit later.

a.info span {
    display: none;
}
 
a.info:hover {
    position: relative;
}
 
a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

This sets up what we discussed before. The tooltip <span> is initially invisible. Since it’s inside the anchor tag, we can use the a.info:hover span declaration to style the <span> differently when the anchor is hovered over – and then we make the <span> appear.

Voila! Tooltip.

Mouse over this textThis is the barebones tooltip. to see what we’ve built so far.

At this point, you’ll probably see a blur of text appearing on top of some other text. Not very readable… but that’s because we haven’t styled it yet.

Mouse over this textNow this has a bit of styling. to see a slightly styled tooltip.

We added a few things here – I styled the basic a.info so that it had a different color and no text-decoration. Then I styled the span with a bunch of stuff – background color, border, text color, width, and padding.

I also used position:top to offset it 1.5em from the top-left of our anchor, and position:left to offset it 1.5em from the top-left of our anchor.

Here’s the new css…

a.tooltip {
color: gray;
text-decoration: none;
}
 
a.info span {
display: none;
}
 
a.info:hover {
position: relative;
}
 
a.info:hover span {
display: block;
position: absolute;
top: 1.5em;
left: 1.5em;
background-color: #eeeeee;
border: thin solid black;
color: black;
width: 12em;
padding: .5em;
}

And that’s about all there is to it. With the html and css you built in this tutorial, you’ve got the mechanics needed to build your own tooltip.

It’s up to you to style it according to your site’s theme and make it pretty. You could add a gradient background, style the font for some extra spacing and/or size, set the width to the way you want, and more.