Why this site looks better in Firefox
Thumbnail
Borrow my code

Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, and other help sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from coboldinosaur.com a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Dzone icon Reddit icon Facebook icon RSS Icon

COBOLdinosaur


Captions For Lists and Images


Submitted by: COBOLdinosaur on 2012-11-29 14:04:08

Member Site: http://COBOLdinosaur.com

One of the limits of using lists (ordered and unordered) is that they have no provision for a heading. You can do something like: <ul>This is a Title<li> etc... but it is invalid because the list containers can only contain List Items. One way commonly used to put a heading on a list is to put a paragraph or div ahead of the list. It is messy and ugly, but it validates.

The problem with that solution is that the elements are not bound to each other and therefore it can break unless you make it even uglier by putting a common wrapper around both elements, and then you have extra linefeeds to deal with.

There must be a better way. There is: <figure> and <figcaption> solve the problem; and several others as well.

THIS IS THE HEADING
  • First Item
  • Second Item
  • Third Item

The code looks like this:

The figure and figcaption tags can be used to wrap anything that needs a heading.... OR a title on the bottom like this:

  • First Item
  • Second Item
  • Third Item
THIS IS THE footer
*** Normally styling should be in a stylesheet, but to make things easier to follow I have put the properties inline.

The code looks like this:

If you want you can do it both top and bottom, all contained in a single component, however you will generate a validation error because the figure tag may not contain more than one figcaption:

THIS IS A CENTERED HEADING
  • First Item
  • Second Item
  • Third Item
This is a left aligned footer

Just a little code:

A nice way to use it is for images like this:

this is an image

All that took was:

The nice part about it is that the caption is locked to the image. The figure can be positioned and styled and the caption can be rendered with any affect that can be applied to any other text element so you can do something like:

this is image one
this is image two
this is image three

The styling can go in a class or multiple classes so you can develop a set of image presentations across a site.

The format is quick and clean; and the code is valid. This kind of structure is not likely to get broken by some renegade hack done with jquery or some other thing that messes up the Document Object.

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE
Want to talk about this page? Start a discussion OR Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE