Posted By

COBOLdinosaur on 05/17/13

Tagged

Versions (?)

Last Edited at 05/17/13 03:58am

Statistics

Viewed 887 times

Favorited by 0 user(s)

Related snippets

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: <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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<figure style="width:110px;float:left;margin:10px;text-align:center;
                    background-color:white;border:1px solid black;
                    border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
    <img src="../images/cd100.jpg">
    <figcaption>this is image one</figcaption>
</figure>
<figure style="width:110px;float:left;margin:10px;text-align:center;
                    background-color:white;border:1px solid black;
                    border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
    <figcaption>this is image two</figcaption>
    <img src="../images/cd100.jpg">
</figure>
<figure style="width:110px;float:left;margin:10px;text-align:center;
                    background-color:white;border:1px solid black;
                    border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
    <img src="../images/cd100.jpg">
    <figcaption>this is image three</figcaption>
</figure>