Displaying Images

19 Nov 2006 > 4 Comments

Creating a <div> based Template using CSS (Part: 4)

The <img> tag doesn’t actually contain anything. Images are displayed by using the src (source) attribute, accompanied with some alternate text using the alt attribute.

XHTML

In XHTML the <img> tag must be closed.

Note: I’m using XHTML markup.

<img src="images/image.jpg" alt="my image" />

HTML

In HTML <img> has no closing tag

<img src="images/image.jpg" alt="my image">

Images in block level elements

Because images display as inline elements, it’s recommended that you enclose them in a block level element such as a <p> or a <div>.

<p><img src="images/image.jpg" alt="my image" /></p>

<div><img src="images/image.jpg" alt="my image" /></div>

I’m displaying images in my template inside <div> tags, plus I’m including some accompanying text below the image as a paragraph, like so:

<div><img src="images/yoda.jpg" alt="picture of Yoda" /><p>yoda</p></div>

It’s possible to target the image <div> in the CSS, like this:

div div {text-align: center;}

However, if you have other nested divs (for instance, later on, I’ll nest a <div> to style a horizontal rule <hr />), you’ll be better taking advantage of classes.

Using a class selector

I can create a .class selector in the stylesheet, and add the class attribute to the image <div> tag:

Markup

<div class="image"><img src="images/yoda.jpg" alt="Yoda" /><p>yoda</p></div>

CSS

.image {text-align: center;}

That’s exactly what I intend to do next, in order to float: the image right; and left;

Adding the float property to the image div

Create two classes; one called .imgfl (image float left), and .imgfr (image float right), and —as in the example above— add them too your image divs using the class attribute.

Markup

<div class="imgfl"><img src="images/yoda.jpg" alt="Yoda" />
<p>use the force<br /> and float left</p></div>

<p>The luminous branch was concealed within the dark grove of the
moon goddess Diana, and grew -like mistletoe- upon a certain tree that,
according to Virgil (from whose epic the myth comes), was actually two
trees. Only the worthy were able to sever the golden branch, and when
severed, another would grow back in its place.</p>

<div class="imgfr"><img src="images/yoda.jpg" alt="Yoda" />
<p>use the force<br /> and float right</p></div>

<p>The luminous branch was concealed within the dark grove of the
moon goddess Diana, and grew -like mistletoe- upon a certain tree that,
according to Virgil (from whose epic the myth comes), was actually two
trees. Only the worthy were able to sever the golden branch, and when
severed, another would grow back in its place.</p>

CSS

.imgfl {float: left;}

.imgfr {float: right;}

Here’s the result:

Using an image as a hyperlink

To transform the image into a link enclose the img element in an anchor tag () and use the <dfn title="hypertext reference">href</dfn> attribute.

<div>
<img src="images/yoda.jpg" alt="Yoda" /><p>yoda</p></div>

To remove the image border add the type selector img to the stylesheet, using the property border-style:, with the value of none;

img {border-style: none;}

And that about wraps it up, I think

< Back to everything
Keep going… >

Related Posts

• text-indent: -9999px; not working
• Creating a <div> based Template using CSS (part 1 - 12)
• Bullet images for list items
• Sheepdip Wordpress Theme
• Styling the Background and Foreground