Posted By

COBOLdinosaur on 05/17/13


css html images

Versions (?)

Who likes this?

2 people have marked this snippet as a favorite


Captions For Lists and Images

 / Published in: HTML


One of the limits of using lists (ordered and unordered) is that they have no provision for a heading. You can do something like:

    This is a Title
  • 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.

  1. <figure style="width:110px;float:left;margin:10px;text-align:center;
  2. background-color:white;border:1px solid black;
  3. border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
  4. <img src="../images/cd100.jpg">
  5. <figcaption>this is image one</figcaption>
  6. </figure>
  7. <figure style="width:110px;float:left;margin:10px;text-align:center;
  8. background-color:white;border:1px solid black;
  9. border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
  10. <figcaption>this is image two</figcaption>
  11. <img src="../images/cd100.jpg">
  12. </figure>
  13. <figure style="width:110px;float:left;margin:10px;text-align:center;
  14. background-color:white;border:1px solid black;
  15. border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
  16. <img src="../images/cd100.jpg">
  17. <figcaption>this is image three</figcaption>
  18. </figure>

Report this snippet  

You need to login to post a comment.