Place Icons To The RIGHT of Headings
So many sites use icons in their headings to give that extra sense of polish to their design. I do it here on my front page. It’s easy enough—add some padding to the left of your heading and set a non-repeating background image positioned to the left of it and voila!
But what if you want the icon to sit to the right of the heading text, as in this example? If you give padding to the right of the heading and set a non-repeating background image positioned to the right you’ll see your icon flush right with the edge of your container, rather than at the end of your text. What to do? Let me show you.
Our Friend The Span
Simply add a span to your heading text, so that we have a hook that is only as large as the content within it, like this:
<h1>Heading Text</h1>
Add A Dash Of CSS
In your stylesheet, say something along the lines of this:
h1 span {
padding-right:40px;
background:url(backtround_image.gif) no-repeat center right;
}
And That’s A Wrap!
Pretty simple, huh? But it can add a nice effect. Check it out on Greenopia, a wonderful new site I have had the pleasure of working on these last couple of weeks which promotes Green living. It is in the beta stage, and still being designed, developed, and debugged, but it’s still pretty sweet.
May 1st, 2006 at 3:02 am
Pretty cool design there Mani. I like the color combinations. :-)
Just a note here - the site shows up with horizontal scrollbar on the home page, while the inner pages sport both horiz and vertical scroll. I know the site’s still under development, but am noting this just in case.
Btw its perfect in IE of course. ;-)
Cheers,
Jai
May 1st, 2006 at 8:17 am
Jai: I’m surprised, and at the same time not surprised.
I’m surprised because I haven’t seen the scrollbars on firefox or ie for the pc, and my team mates haven’t seen them in their browswers on the mac.
I’m not surprised because this is a challenging project, in terms of the css. It’s a drupal site with tons of strange code spread across many stylesheets. Then there have been a few designers and coders with limited css knowledge working in there before I got brought on board. It was one of those projects that was a bit stressful just to get a handle on the code.
Finally, it is definitely in big time beta phase. I’m sure over time, the problems will all get worked out.
By the way, I’m assuming this is an early version of Firefox, like last time?
May 2nd, 2006 at 10:56 am
Well as I did lastime, I checked it on:
Firefox 1.1 on XP and Firefox 0.93 on Win2k.
Anyways, I’ll leave the bug testing alone, sorry if I’m being a nitpicker. :-)
Cheers,
Jai
May 2nd, 2006 at 3:24 pm
Your background image was right-aligned because heading tags are block-level elements (just like DIVs, they span 100% of the available width).
You can simplify your solution by losing the SPAN tags and setting the H2 to “display: inline;”! :)
Simplified CSS:
h2 {
background: url(images/h2.gif) no-repeat right center;
display: inline;
padding-right: 40px;
}
Enjoy!
May 2nd, 2006 at 4:40 pm
Brian: I realize that headings are block level elements! ;o)
The reason that I do not use this simple solution is that, although it will work to put icons to the right of headings, in setting headings to display as inline you lose several important heading functionalities - headings will no longer sit on their own line, and you will lose padding and margin settings on them as well.
May 2nd, 2006 at 4:57 pm
Darn… and here I thought I was being so clever. :) The test page I threw together only included the tag, the image, and the heading text. Now that I have added text after the heading I see the error of my idea.
May 5th, 2006 at 6:54 pm
You’re a wonderful designer!