Image with textual description

How to create image with textual description, and keep it simple? Maybe some nice text decoration? If you are wondering about that, this is the article for you, and it’s not even very long and difficult.

The code

To keep it simple, let’s say you have a container or some other DIV where you want your image to display. This way we will not define the width and height of our DIV.IMAGE, but will use the width and height of specified container. Pay attention to the fact that this article covers only one image with description and not an image gallery. Here is the code.

<div class="image">
	<img src="clouds.jpg" alt="Image"/>
	<p>Lorem ipsum ...</p>
</div>

With our DIV.IMAGE we will create a placeholder for our image and text (we will put the text inside a paragraph, although you can use something else depending on styles you want to use on your page. For example, you could also use <small>...</small> (if you want your image description text to display as other portions of your web page).)

Into our DIV we will put the image and just after that our paragraph. How will we decorate our image with text? Take a look at the CSS now.

The CSS

.image img{
	border:1px solid #CCC;
	padding:1px;
}
.image p {
	background-color:#CCC;
	padding:10px;
	margin-top:5px;
	font-size:1.1em;
}

Because we used a width and height (if needed) of the CONTAINER (or any DIV before DIV.IMAGE), we do not need to define the width and height of DIV.IMAGE (this DIV will use maximum size of 100%). This way you could define padding to the paragraph (for more precise styling of the paragraph) without worry that Firefox will scramble the elements.

We will create a border around image with border:1px solid #CCC; and remove the border from the image 1px with padding:1px;. This should work both in Firefox and IE.

Now, let’s style up the paragraph. We will give the paragraph a background-color:#CCC; and, as I said, we will also use padding:10px; to remove the paragraph from it’s borders. (Remember that if you wish to create a paragraph of fixed width and you wish to use padding, Firefox will add padding to the overall width, while IE will subtract the padding).

Now, you know that there are default values for almost everything, so the paragraph is not an exception. Without applying the margin-top:5px; the paragraph would use the default top margin which is more than ours. And, don’t forget, we should also define the font-size.

The example

Take a look at our example