CODEWITHSUNDEEP
htmlcss
SOFuser123
SOFuser123

Reputation: 105

displaying labels on top of elements in fieldset

I am trying to display labels below the elements using fieldset. I am doing this inside handlebars template. I loop through images and their names and display names below the image. I am unable to do it. Please help.Below is the way i need to display

IMG1                     IMG2

image1 name             image2 name



<fieldset style="text-align: center;border:1px solid #CCC;display:inline;padding- top:0.25em;vertical-align:middle;">
   <legend class="devHealth"> Temperature</legend>{{#tempdevicesHealth}}
   <img style="width:50px;height:50px;margin: 0 30px;" src="{{DeviceImg}}"      alt="{{Hovertxt}}" title="{{Hovertxt}}"/>
  <br/>
   <label style="font-weight: bold">{{DeviceTitle}}</label>{{/tempdevicesHealth}}</fieldset>

Upvotes: 2

Views: 453

Answers (1)

Satyam Koyani
Satyam Koyani

Reputation: 4274

Set image and image title in the table: jsfiddle.net/XP5ZV

Change css as per your requirement and if you want to add more images then add one more column to the table.

HTML

<fieldset style="">
<legend class="devHealth">Temperature</legend>
    <table>
        <tr>
            <td>
                <img style="" src="http://lorempixel.com/50/50" alt="{{Hovertxt}}" 
                    title="{Hovertxt}"/>
            </td>
            <td>
                <img style="" src="http://lorempixel.com/50/50" alt="{{Hovertxt}}" 
                    title="{Hovertxt}"/>
            </td>
        </tr>
        <tr>               
           <td>
                <label style="">{{Title}}</label>
            </td>
            <td>
                <label style="">{{Title}}</label>
            </td>
        </tr>  
    </table>
</fieldset>

CSS

.fieldset{
    border:1px solid #CCC;
    display:inline;
    padding-top:0.25em;
    vertical-align:middle;
    text-align: center;
}

.label{
    position:absolute;
    display: inline;
    left: auto;
    margin-left: 50px;
    font-weight: bold;
    text-align: center;
}
.img{
    width:50px;
    height:50px;
    margin-left:30px;
    margin-right:30px;    
}

fieldset table tr td label {
    font-weight: bold;
    text-align: center;
}

Upvotes: 3

Related Questions