CSS Tips & Tricks(1)

Images with captions

HTML doesn't have an element that allows to insert an image with a
caption. But there are many ways to realize such effect, and the following is
just one of them.
<div id="captioned_image">
<p><img src="images/Hopetoun_falls.jpg" width="180"
height="135" alt="Hopetoun falls" /></p>
<p>A more steady-state view of nature</p>
</div>

The CSS stylesheet for formatting:

A more steady-state view of nature
#captioned_image {
float: right;
width: 28%;
border: 1px silver solid;
margin: 0.5em;
padding: 0.5em;
}

#captioned_image p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
padding: 0;
}

There is one problem here, and that is that the image may be too wide. In this case, the image is 180 px wide and
the div is 28% of the surrounding text. So if you make the window narrower, it may be that the image overflows
the div (try it!).

Couple of ways to fix the problem:

add a minimum width to the div

add a width to the img
edit the size of every image before inserting into your web page (not so welcomed).

Add a minimum width

If you know the width of all images in the document, you can add a minimum width to the div, like min-width:
150px; (in this case we know the minimum width of all images) to the rule div.captioned_image.

Add a image width

Another way is to scale the image itself. Add the following rule:
#captioned_image img {
width: 100%;
}
Display the caption on top
#captioned_image p {
display: table-cell;
width: 100%;
}

#captioned_image p + p {
display: table-caption;
caption-side: top;
}

Exercise files: click here.

Image Replacement
You have the following HTML:
<div>
<span>Welcome</span>
</div>

Or you have this:

<h1>Welcome</h1>

And you want to show an image instead of showing the text "Welcome", let's say an image of the text
"Welcome" written in a fancy font face. For example:

There are several ways of doing this. Here is one way:

div#welcomeImg {
background: url("cssimages/welcome.gif") no-repeat;
height:42px;
}

#welcomeImg span {display:none;}

Then your HTML code should be modified as:

<div id="welcomeImg"><span>Welcome</span></div>

The declaration block display:none; inside the span rule makes anything placed inside span disappear.

Exercise: I have 3 different <h1> headers,

<h1>Home</h1>
<h1>Demo</h1>
<h1>Tour</h1>

and I want to specify different images for different headers using image replacement technique. I
have the part of the image replacement CSS as following:
h1.imgReplace {
height:<YOU SPECIFY THE HEIGHT>;
background-repeat:no-repeat;}
 h1.imgReplace span {
display:none;}

I have images home_icon.gif, demo_icon.gif, and tour_icon.gif. I want to replace the text "Home"
with home_icon.gif, and so on so forth. I need to both change my XHTML code little bit (may be
add id or class attributes to <h1> tag) and write rest of my CSS. Please help me write rest of CSS
for implementing the image replacement, and the necessary modification to current XHTML code
to implement the image replacement effect.

Files provided to you: exer1.zip

Think about it, why do we need image replacement. Give a few example of possible usage for
image replacement.

Other image replacement techniques

The following method eliminates the span by setting height of the parent element to 0 and overflow to hidden,
which hides the text. Then it uses top padding to force the element to the height of the image in the background.
#ID_OF_ELEMENT {
padding: HEIGHT_OF_IMAGEpx 0 0 0;
overflow: hidden;
background-image: url("URL_OF_THE_IMAGE");
background-repeat: no-repeat;
height: 0px !important; /* for most browsers */
height /**/:HEIGHT_OF_IMAGEpx; /* for IE5.5's bad box model */
}

Replace the ID_OF_ELEMENT, HEIGHT_OF_IMAGE, and URL_OF_THE_IMAGE with corresponding id,

height value of image, and image url in your case.

The following method uses the CSS text-indent property to shift contained text outside the visible element
window.
#ID_OF_ELEMENT {
text-indent: -9999px;
overflow: hidden;
}

Replace the ID_OF_ELEMENT with the id of the element you want to apply this image replacement techniuqe
for.

Controlled Drop Caps

In the following example the first letter "N" of the word "Nature" is replaced by an image of "N" in a nice font
face and bigger font-size.

ature, in the broadest sense, is equivalent to

the natural world, physical universe, material
world or material universe. "Nature" refers to
the phenomena of the physical world, and also to life in
general. The term generally does not include
manufactured objects and human interaction unless
qualified in ways such as, e.g., "human nature" or "the
 whole of nature". Nature is also generally distinguished
from the supernatural. It ranges in scale from the
subatomic to the galactic.

The technique we use here is the same we used for the image replacement. See the following example code:
#dropcap_n {
display:block;
float:left;
width: 62px;
height:56px;
margin-right:5px;
background-image:url("cssimages/dropcap_n.gif");
background-repeat:no-repeat;
}
#dropcap_n span {display:none;}

The HTML code looks like:

<p><span id="dropcap_n"><span>N</span></span>ature, ....</p>

Exercise files: exer2.zip

2007 Mehmud Abliz