administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Thumbnail CSS »

FERDY CHRISTANT - MAY 18, 2004 (02:42:42 PM)

Eagle-eyed readers may have noticed the look of the thumbnail in my last post; it has a light-gray border around it, surrounded by a bottom-right shadow.

This effect is created using CSS. Whenever I want this effect to apply to one of the images I publish, I simply use the following markup:

<div class="thumbnail">
<img src="url to image here" alt="image description here" />
</div>

Here's an example:

lion

Only problem I encounter so far is that I cannot break to the next line below the image easily, all the markup after the thumbnail div seems to flow next to the image, like the text you are reading now. As a dirty fix I could add <br/> tags, but this is obviously not the way to go. Any of you CSS experts know how to prevent this from happening?

Here's the CSS I'm using:

.thumbnail {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.thumbnail img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

This technique is taken from an ALA article.

Comments: 3

COMMENT: JAKE homepage

MAY 19, 10:29:33

comment » Look in to the "clear" property. Something like

img{

clear:both;

}

"Should" work.

Jake «

COMMENT: FERDY CHRISTANT emailhomepage

MAY 19, 19:56:21

comment » Thanks Jake, that actually works! I'll explain the implementation details in the next blog entry. «

COMMENT: NOTIHING emailhomepage

NOV 10, 07:35:00 AM

comment » 08 01 19 15 30 29 28 27 24 23 22 21 20 19 18 17 16 01 02 03 04 05 07 08 10 11 26 10 «

CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.