Journals by RSS
Journals by EmailIn one of my help projects, I put together styles for the topic titles and headings that visually divides the sections of the topics. Size and font weight aren’t the only things available for making headings stand out and the structure of a help topic understandable for the user. Here’s the styling I used, as well as another style that may help headings visually noticeable.
These styles involve a background image, though a background color can do just as well. I created an image 1 pixel wide and about 20 high to tile horizontally across the heading. The image is a gradient from tan to white. Here is the CSS for the topic title:
h1 {
font-size: 14pt;
font-weight: normal;
font-style: normal;
border-top: 1px solid #dfd4b9;
border-bottom: 1px solid #dfd4b9;
width: 100%;
text-indent: 12pt;
color: #44536c;
white-space: nowrap;
margin-bottom: 12pt;
line-height: 150%;
background: top left url("images/h1.jpg") repeat-x;
}
The borders and the background image run the width of the document (width: 100% and the repeat-x attributes) to give a complete visual separation between sections. The margin of my document is zero, so the text-indent pushes the text inward; the white-space: nowrap attribute will keep the title all on one line so we don’t get strange indentation on a second line. The line height sets the spacing between the heading text and the borders.
A second way to get the heading to stand out would be to use a background image that is 1 pixel high and a few thousand pixels wide. The image would have a gradient running from left to right and have a repeat-y attribute in the CSS. Otherwise using the above styles, the heading would have a color gradient that would begin at the left edge of the page and thus help catch attention.
Part of the purpose of this kind of styling is not just to catch attention, but also to add some visual interest to the document.
Related posts (auto-generated):
5 Comments to 'Making Headings Stand out with CSS'
September 2, 2008
Thanks for the post. I’ve read several of your CSS posts, and it would be nice to see a screen shot or other example of the CSS code you provide. That might be an interesting way to show us exactly what you’re talking about.
I love your blog….
September 2, 2008
Paul, thanks for the suggestion. I’ll provide a screenshot in the next day or two.
By the way, for anyone trying out this style in a help topic, instead of the negative margin and text-indent, you can set your body margin to zero, then give your heading a width of 100% and some left padding. Just make sure to give all the rest of your text styles some left margins or they’ll run along the left side of the topic.
September 8, 2008
So it took me more than a day or two, but I’ve added the example image to the end of the post.
September 8, 2008
The way I understand it, all header elements [h1 h2 h3 h4 etc.]are by default block, i.e. 100% in width.. So unless we float them, one need not define a 100% width.. Or have I misunderstood?
Blockquotes,
September 9, 2008
Lakshmi, you’re right; I did that when I was trying to figure out why Firefox was putting margins on either side of my headings, keeping them from extending to the edge on both sides. That was before I realized that RoboHelp has a separate CSS file for Netscape-based browsers, so I had to make sure that one was kept up with the regular file. I’ve removed the width from my style sheet. Thanks for pointing that out.