Eight harsh truths for clients about web design

Eight harsh truths for clients about web design

Every now and then we all have to deal with a client who has ‘interesting’ ideas for their web site. You know the type – the guy who wants an animated background, or the girl who insists on having all the text coloured light grey on a white background at 10 points. When it comes to web design, I’m a firm believer in the philosophy that the client is rarely if ever right. I justify this seemingly obtuse position like this: Would you tell a pilot how to fly an aeroplane? Or tell a mechanic how to fix your car? Of course y...

keep reading 'Eight harsh truths for clients about web design'

Adobe WorkflowLab: Worth keeping an eye on

Create a CSS image sprite based feature box

A few good practices for optimising your CSS

Fixing the 'read more' problem

Randomness

CSS 101 - Using images in headings

CSS 101 - Using images in headings

Today I stumbled on a blog with a gorgeous design and what appeared to be some nice code. I won't mention the site name in the interest of not upsetting anyone, but looking closer I noticed something I've often seen used for headings. Considering the job done on that site was excellent otherwise, this was very surprising. Using images for headings often provides the nice extra bling that standard fonts can't always provide. And it's fine as long as you do it properly - with CSS. Doing it the wrong way usually looks something like this: <h1><img src="my_portfolio.gif" width="150" height="100" alt="My Portfolio"><h1/> The problem here is obvious. Where's the heading? Semantically speaking there isn't one, so to fix this you simply set up your headings the normal way... <h1>My Portfolio<h1/> ...and then follow up with some CSS: h1 {width: 150px;height: 100px;text-indent:-9999em;background-image: url(my_portfolio.gif);} Text-indent simply moves the text -9999em's off screen so that it isn't visible on top of your nice graphic. The width and height are important (they need to match the image dimensions) otherwise the image will tile. You can of course use this technique on any HTML element, but when you want headings it's always better to use the appropriate tag (h1, h2, h3 etc...) with the heading text contained within, and let CSS take care of the rest. Too easy. Download the demo below. image_headi...

Keep reading 'CSS 101 - Using images in headings'

Topics

Login to That Web Guy Blog

Login

Not registered? | Forgot your Password? Cancel Login