asked on

BIgger height

Dear,
I want to have bigger height to overall div below. What to adjust?

            <li>
                <div class="imagesList-item-frame shadow"/>
                    <img src=<%=lb_pict5.Text %> onclick="pict_click5();" />
                    <div class="legend">
                        <input type="textbox" id="tb_p5_desc" style="height:20px; width:116px; border:inherit; background-color:#C5C4CC;" runat="server" /><label id="show5"></label>
                        <input type="text" id="tb_p5_desc2" style="height:20px; width:118px; border:inherit; background-color:#C5C4CC; display: none" value="TEST:" runat="server" />
                        <!---span>Some descriptions here</span><br /--->
                        <input type="button" id="butt_p5" onclick="openPopup5();" style="height:26px; width:97px" value="删除照片" runat="server" />
                    </div>
            </li>

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

Sorry, I adjusted already but the 6 div are not aligned properly below. What to adjust?
http://my-friend.co/RegRec2?id=18&user_abbr=mc2&readonly=n

HainKurt

try

ul.imagesList li img {
    /* width: 100%; */
    height: 200px;
}

ul.imagesList li {
    display: block;
    position: relative;
    float: left;
    width: 33%;
    height: 275px;
    box-sizing: border-box;
    padding: 3px;
    margin: 0;
}

Open in new window

Peter Chan

ASKER

I have the message prompt to field (highlighted) like

do you have any other ideas to show the prompt better?

HainKurt

put <br> between those element so they dont jump up and down...
or wrap each element by

<div>input here</div>
<div>title here</div>
<div>button here</div>
<div>message here</div>

Peter Chan

ASKER

I put more div like

            <li>
                <div class="imagesList-item-frame shadow"/>
                    <img src=<%=lb_pict6.Text %> onclick="pict_click6();" />
                    <div class="legend">
                        <div class="legend">
                            <input type="textbox" id="tb_p6_desc" style="height:20px; width:116px; border:inherit; background-color:#C5C4CC;" runat="server" /><label id="show6"></label>
                        </div>
                        <div class="legend">
                            <input type="text" id="tb_p6_desc2" style="height:20px; width:118px; border:inherit; background-color:#C5C4CC; display: none" value="TEST:" runat="server" />
                        </div>
                        <!---span>Some descriptions here</span><br /--->
                        <div class="legend">
                            <input type="button" id="butt_p6" onclick="openPopup6();" style="height:26px; width:97px" value="删除照片" runat="server" />
                        </div>
                    </div>
            </li>

Open in new window

but I still get same problem.

HainKurt

first of all you should open and close tags properly...
your code is missing </div> at the end

Member_2_248744

Greetings HuaMinChen, , , , I looked at your HTML and the CSS you have for that Info-Image Grid in the "imagesList" <ul>, , you have many UN-Needed elements in that and the inline-CSS is not good to use, and the other CSS seems to NOT fit the "GRID" display you need to have? ? ?
The Other CSS for that Entire Web page could be much , better and more up to date for 2017?

Here is what I did just for the "imagesList" grid (row and column) display, This works for me in firefox. I changed the <li> and removed the <div> you had in them, they did not seem to do any thing useful. I set the <li> to have the needed Border, and the needed Shadow, I used a more current display: inline-block; instead for the old float: left; for the <li> to stack horizontally and vertically in the rows columns.
I changed the <li> width to 138px instead of the 17%, which made no sense, since your page was not responsive anyway? ?

Here is the page code I used to build and test with -

<!DOCTYPE html>
<html>
<head id="Head1"><title>
	title
</title>
<style>
body {
margin 1px;
background-color:#1BA8E0;
}

#main1 {
border: 1px dotted blue;
max-width: 850px;
margin: 20px auto;
}

#imagesList {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

#imagesList li {
display: inline-block;
width: 138px;
height: 270px;
box-sizing: border-box;
padding:7px;
margin: 3px 2px;

-moz-border-radius: 7px;
border-radius: 7px;
border:solid 1px gray;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
vertical-align: top;
}

#imagesList li img{
width: 99%;
height: 125px;
margin-bottom: 4px;
}

#imagesList input[type=text]{
margin: 4px 0;
height:20px;
width: 97%;
background-color:#C5C4CC;
}

#imagesList input[type=button]{
height:26px;
width:97px
}

</style>
</head>
<body>
<div id="main1">
<div id="Dv1" style="text-align:left;background-color:#C5C4CC;">
  <div id="pict">
  
  <ul id="imagesList">
    <li>
      <img src="http://my-friend.co/RegRec2/t737.png" onclick="pict_click1();" />     
      <input name="tb_p1_desc" type="text" id="tb_p1_desc" value="??1" /><label></label>
      <input name="tb_p1_desc2" type="text" id="tb_p1_desc2"  /><label></label>
      <input name="butt_p1" type="button" id="butt_p1" onclick="openPopup();" value="????" />
    </li><li>
      <img src="http://my-friend.co/RegRec2/t738.png" onclick="pict_click2();" />
      <input name="tb_p2_desc" type="text" id="tb_p2_desc" value="??2" /><label></label>
      <input name="tb_p2_desc2" type="text" id="tb_p2_desc2" /><label></label>
      <input name="butt_p2" type="button" id="butt_p2" onclick="openPopup2();" value="????" />
    </li><li>
      <img src="http://my-friend.co/RegRec2/t742.png" onclick="pict_click3();" />
      <input name="tb_p3_desc" type="text" id="tb_p3_desc"  value="??2" /><label></label>
      <input name="tb_p3_desc2" type="text" id="tb_p3_desc2" /><label></label>
      <input name="butt_p3" type="button" id="butt_p3" onclick="openPopup3();" value="????" />
    </li><li>
      <img src="http://my-friend.co/RegRec2/mmexport1397823798318.jpg" onclick="pict_click4();" />
      <input name="tb_p4_desc" type="text" id="tb_p4_desc" value="???" /><label></label>
      <input name="tb_p4_desc2" type="text" id="tb_p4_desc2" /><label></label>
      <input name="butt_p4" type="button" id="butt_p4" onclick="openPopup4();" value="????" />
    </li><li>
      <img src="http://my-friend.co/RegRec2/IMG_0010.JPG" onclick="pict_click5();" />
      <input name="tb_p5_desc" type="text" id="tb_p5_desc" value="???" /><label></label>
      <input name="tb_p5_desc2" type="text" id="tb_p5_desc2" /><label></label>
      <input name="butt_p5" type="button" id="butt_p5" onclick="openPopup5();" value="????" />
    </li><li>
      <img src="http://my-friend.co/RegRec2/tt529.png" onclick="pict_click6();" />
      <input name="tb_p6_desc" type="text" id="tb_p6_desc" value="??3" /><label></label>
      <input name="tb_p6_desc2" type="text" id="tb_p6_desc2" /><label></label>
     <input name="butt_p6" type="button" id="butt_p6" onclick="openPopup6();" value="????" />
    </li>
  </ul>
    </div>

</div>
</div>
<script>
var labelText = 
   [["1Descpp","1MoreInfo"],
   ["2Descpp","2MoreInfo"],
   ["3Descpp","3MoreInfo"],
   ["4Descpp","4MoreInfo"],
   ["5Descpp","5MoreInfo"],
   ["6Descpp","6MoreInfo"]];
   
var inputs = document.getElementById("imagesList").getElementsByTagName("input");

var inCnt = 0;
for (var i = 0; i < inputs.length; ++i) {
  if (inputs[i].type != "button") {
    var num1 = 0;
	inputs[i].vCnt0 = inCnt;
	if (inputs[i].value == "") {
	  num1 = 1;
	  ++inCnt;
	  inputs[i].style.display = "none";
	  }
	inputs[i].vNum0 = num1;
    inputs[i].onfocus = function() {
	this.parentElement.getElementsByTagName("input")[1].style.display = "initial";
     var lb = this.parentElement.getElementsByTagName("label")[this.vNum0];
	 lb.innerHTML = labelText[this.vCnt0][this.vNum0];
    }
	inputs[i].onblur = function() {
     var lb = this.parentElement.getElementsByTagName("label")[this.vNum0];
	 lb.innerHTML = "";
    }
  }
}
</script>
</body>
</html>

Open in new window

AND I looked that your javascript in the JavaScript1.js and the ONBLUR code was so inefficient that I added my own javascript that will show the <label> when the input gets focus, but even if you do not use the javascript, the elements and CSS in the "imagesList" <ul> seem to do what you need?

Let me know if this looks like what you want to have? ?

Peter Chan

ASKER

Thanks all.

Hainkurt,
Please note that I have this line

<div class="imagesList-item-frame shadow"/>

Open in new window

HainKurt

Please note that I have this line

:) yes you are right... I am getting old I guess...

SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

look at this one :)

<div class="test" />

<div class="test">
  another div
</div>

Open in new window

https://jsfiddle.net/gapLv864/

Peter Chan

ASKER

Thanks to all.
I now have

            <li>
                <div class="imagesList-item-frame shadow">
                    <img src=<%=lb_pict6.Text %> onclick="pict_click6();" />
                    <div class="legend">
                        <div class="legend">
                            <input type="textbox" id="tb_p6_desc" style="height:20px; width:116px; border:inherit; background-color:#C5C4CC;" runat="server" /><label id="show6"></label>
                        </div>
                        <div class="legend">
                            <input type="text" id="tb_p6_desc2" style="height:20px; width:118px; border:inherit; background-color:#C5C4CC; display: none" value="" runat="server" /><label id="b_show6"></label>
                        </div>
                        <!---span>Some descriptions here</span><br /--->
                        <div class="legend">
                            <input type="button" id="butt_p6" onclick="openPopup6();" style="height:26px; width:97px" value="删除照片" runat="server" />
                        </div>
                    </div>
                </div>
            </li>

Open in new window

Hainkurt,
but I still do not see the benefits to have several div more, in above.

HainKurt

<img src=<%=lb_pict6.Text %> onclick="pict_click6();" />

Open in new window

this should be

<img src="<%=lb_pict6.Text%>" onclick="pict_click6();" />

Open in new window

not sure what was the question here :)

try using this

ul.imagesList li {
...
    width: 25%;
}

Open in new window

http://my-friend.co/RegRec2/StyleSheet1.css, Line 59

to fit 4 images per row at least...

Peter Chan

ASKER

Dear HainKurt,
I have no problem to the value of lb_pict6.Text but I only expect to not see the Text being moved up and down, when displaying the prompt message. What to adjust?

HainKurt

try getting rid of this css

ul.imagesList li:hover input {
  display: block !important;
  margin: 1px 1px 1px 1px;  >>> especially this one
}

Open in new window

http://my-friend.co/RegRec2/StyleSheet1.css, Line 94,97