TECHNICAL xhtml, css, textpattern and coding articles
Simple CSS Headings
(This article was originally at 4-ever.org)
Here is a simple way of creating typographically pleasing headings for web sites which does not involve Flash, Javascript or other voodoo - just plain CSS.
The (X)HTML
<h1>Simple Headings<img src="images/simplehead.gif" width="216px" height="36px" alt="" /></h1>
The CSS
For left-alignment:
h1 {position: relative; font-size:12px; margin: 1em 0; text-align: left; }
h1 img {position: absolute; top: 0; left: 0; }
For right-alignment:
h1 {position: relative; font-size:12px; margin: 1em 0; text-align: right; }
h1 img {position: absolute; top: 0; right: 0; }
For centre-alignment:
h1 {position: relative; font-size:12px; margin: 1em auto; text-align: center; width: 109px; }
h1 img {position: absolute; left: 0; top: 0; }
Centred does not work in IE but aligns nicely left instead.
Notes
- We can position the image within the h1 because the h1 has been give a position: relative.
- When centering, include the width of the image so it lines up nicely.
- The font-size is set so the text part of the h1 does not show when users increase their browser text-size. I have used px so that IE can't resize it. Remember that your h1 margins refer to the h1 text, not the image.
Is This Significant?
At first I thought my method could be used pretty well universally but I do web design for pleasure not for profit so was not thinking large-scale. People who regularly change their headings may prefer some other kind of image replacement technique and for daily change of headings a dynamic method is needed.
For smaller sites, however, we don't need such complicated code. For my purposes I do not see how reducing web page mark-up and adding extra css, scripts etc is worth the effort. It is easy to create an image for a heading and use simple CSS to position it. Because of all the buzz about sIFR etc, I think many people may have assumed there are no simple methods. So I hope my simple method has restored the balance somewhat.
As far as I can see there are no accessibility problems. The text shows through if images are turned off. I hope this helps. Enjoy!
Previous Comments
This article was previously at 4-ever.org. These comments were made there.
Christian Montoya commented
Yes, this method has been written about before, and I'm not sure why more designers don't use it for their image-replacement needs, but I think it has something to do with the fact that most designers are lazy and would rather just add in the header image through CSS and not have to put the image in the markup at all.
Peter commented
Christian: thanks for pointing that out. I haven't seen it written about but had wondered why because it is so obvious really.
db commented
Peter What a great site!! And a neat idea for using header-images PLUS header text!
There is one thing about the ability to re-size the text, though: you wrote, The font-size is set so the text part of the h1 does not show when users increase their browser text-size. however, in at least one browser (Firefox, which I'm using right now), all text is infinitely re-sizable so, eventually, if people really crank it up, the text will appear from behind the image. In the case of your in-touch page, though, the font-size is small enough that the text has to be made really jumbo-size before it shows from behind the images : ^ ) ....
Peter commented
You're perfectly right, Don, and it is a weakness, but I think for almost all practical purposes it won't be a problem. If people need their text that large, they probably won't see it anyway!