Example files for this are a-fancy-heading.gif, image-replacement.
css, and image-replacement.html, located in the chapter 3 folder. In the CSS file, you??™ll
see rules created to define the dimensions of the heading (.aFancyHeading) and span
(.aFancyHeading span). The heading??™s position value is set to relative, and the span element
is then positioned in an absolute fashion, which ensures that it sits over the textbased
heading??™s content. The width and height values ensure that the span (and therefore
its background image) expands to fill its container. (Note that when used in conjunction
with links, it??™s useful to also set display: block within the CSS rule so that the entire area
becomes clickable and the cursor becomes a pointer??”this is because some versions of
Internet Explorer use the arrow pointer instead of the usual finger pointer. Alternatively,
set cursor to pointer in CSS.) The overflow: hidden property/value pair ensures text
doesn??™t peek out from behind the image??”an issue that sometimes occurs in Internet
Explorer or when text is resized. To deal with zoomed text in IE 7, it may also be necessary
to set a pixel font-size value for the heading that??™s smaller than the height of the image.
The following image shows a page using this technique with and without CSS.
Setting overflow to hidden can be an issue when this technique is used in conjunction
with linked replaced elements, such as linked mastheads and logos.
Pages:
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150