Creating a 'Photo Box' in CSS

[ShawnMolloy]

I'd like to create a CSS container to neatly display a photo, a caption, and some tool links for maintenace, like "Edit" end "Delete".

The purpose of this photo box is to place within a repeating control, so that I can have any given number of boxes and they will wrap and flow seamlessly.

I am light with CSS, but I have a feeling that the secrect lies in the display property? Something like this...

<div> //images container 

<!-- image block (many!) -->
<span>
  My Image
</span>

<span>
  <img src="someImg.jpg"
</span>

<span>
  Edit | Delete
</span>
<!-- end image block  -->

</div>

Thanks,

Shawn Molloy
Seattle, WA

 

[Vragabond]

You say image block and then place it inside an inline element. Why span when div can work? Here's an alternative:

<dl>
 <dt><img src="myImage.jpg" alt="myImage" /></dt>
 <dd>Delete</dd>
 <dd>Edit</dd>
</dl>

Here be a nice example how to style it further:

http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm

 

[ShawnMolloy]

EXACTLY what I was looking for.

Thank you!!

Shawn Molloy
Seattle, WA