OK Sushi

Mini testcases for your css pleasure

Saturday June 13, 2009 by Cal Wilson in

When you spend a bit of time hanging out on IRC helping people, you tend to create a whole bunch of little test cases, proving one thing or another.

I’m no exception, and I’ve decided to make a more concerted effort to keep them up-to-date.

You can view my testcases here – hopefully they are of use to somebody.

Some popular ones are:

Centred navigation menu
Basic two column layout (explains the faux columns technique)
Styling Definition Lists
Making a div the full height of the viewport
Containing floats with overflow: hidden
Marking up forms with lists

Comment

Chilli Jam

Sunday May 17, 2009 by Cal Wilson in food

We found some delicious-looking chillies at the market yesterday: perfect for making chilli jam!

A good chilli jam is sweet, but not too sweet, and leaves a delicious heat in your mouth. This recipe is my own concoction, although jaymis has a good alternative, sans tomato

Ingredients

2 cans of diced tomatoes (I use roma tomatoes – cherry tomatoes would be a nice alternative)
5 chillies (more or less – do what you think is right for your audience) – seeds removed and set aside
Garlic (I used 5 very large cloves – I suppose about half a standard-size garlic would be sufficient) – peeled and roughly chopped (chop it finer if you don’t like bits of garlic)
3 tsp tamarind paste
1 cup sugar (raw sugar works well – the more unrefined the better)
1 cup red wine (I used some leftover tempranillo )
1/2 cup fish sauce

Put all the ingredients into a largish saucepan, bring to the boil, then reduce the heat to very low. Cook for at least 2 hours, until such a time where you can see the mixture becoming non-runny.

Remove from heat, put into pre-boiled jars. Enjoy!

Comment

Styling Wordpress Images

Tuesday May 5, 2009 by Cal Wilson in Work

No doubt if you have used Wordpress for a website, you have used it’s WYSIWYG to insert images into posts. The class names that it gives images is pretty bad:

Want the image floated left? You get the class name ‘alignleft’
How about right? You guessed it: ‘alignright’
What about if you want it displayed in the centre of the post? Try ‘aligncenter’ on for size

Styling these tags

So, depending on your styles, you’ll want something like this:

	.alignleft {float: left; margin: 0 1em 1em 0;}
	.alignright {float: right; margin: 0 0 1em 1em;}
	.aligncenter {display: block; margin: 0 auto 1em auto;}

The above styles pretty things a little bit. However, what happens if you have a rogue person editing your content who uses the ‘align’ attribute on your images? How can you standardise the display of images?

Using attribute selectors, it’s pretty easy:

	.alignleft, img[align=left] {float: left; margin: 0 1em 1em 0;}
	.alignright, img[align=right] {float: right; margin: 0 0 1em 1em;}
	.aligncenter {display: block; margin: 0 auto 1em auto;}

In the perfect world that I dream of, no CMS would allow people to use ‘align’ on images (or any other element), but in the immortal words of John Bender: Screws fall out all the time, the world is an imperfect place. http://www.imdb.com/title/tt0088847/quotes (that’s from the Breakfast Club)

Comment