CODEWITHSUNDEEP
htmlasp.netcss
wootscootinboogie
wootscootinboogie

Reputation: 8695

Dynamically adding pictures inside div

I've got a drop down list which is going to dynamically add image elements inside of a div with a class name of DrugNameCard and an id of testDiv. With all of the attempts below, the HTML isn't listening to the CSS. What am I missing here?

CSS - various failed attempts

body {
}.DrugNameCard
{
    height:3.85in;
    width: 2.625in;
    border: 5px solid black;
    padding-right:.25in;
    padding-left:.25in;
    padding-top:.25in;

}
img  div.DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}


img > div.DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}
img > .DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}
img  .DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}
img #testDiv
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}

HTML

    <select name="DropDownList2" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;DropDownList2\&#39;,\&#39;\&#39;)&#39;, 0)" id="DropDownList2">
    <option selected="selected" value="-1">Select picture to add</option>
    <option value="Images/bandAid.jpg">BandAid</option>
    <option value="Images/Confusion.jpg">Confusion</option>
    <option value="Images/sadFace.jpg">Depression</option>
    <option value="Images/sleepiness.jpg">Sleepiness</option>

</select>
    <br />
    <div id="testDiv" class="DrugNameCard">

    <img src="Images/Confusion.jpg" /><img src="Images/sleepiness.jpg" /><img src="Images/sadFace.jpg" /></div>
    <input type="submit" name="btnSubMitDrugName" value="Submit Drug Name" id="btnSubMitDrugName" />

Upvotes: 0

Views: 70

Answers (2)

JDB
JDB

Reputation: 25810

I think you've got the element selectors backwards. Should be:

.DrugNameCard img
{
    height:.64in;
    width: .64in;
    padding-left: .1in;
}

Upvotes: 1

haim770
haim770

Reputation: 49095

You're reversing the CSS selectors.

  img > div.DrugNameCard

The above line actually means: all the div with DrugNameCard class that are direct children of an img element, while in fact what you need is the opposite:

  div.DrugNameCard > img

Upvotes: 2

Related Questions