Advanced Search

Return to Snippet

Revision: 63565
at May 17, 2013 03:58 by COBOLdinosaur
Initial Code 
<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>
Initial URL 
http://coboldinosaur.com/pages/Captions_for_Lists_and_Images.html
Initial Description 
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.
Initial Title 
Captions For Lists and Images
Initial Tags 
css, html, images
Initial Language 
HTML