Solved

Problem with css part

Posted on 2014-10-29
28
89 Views
Last Modified: 2015-09-10
Hi,
how to adjust the css codes below

    <style type="text/css">
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:90%;
          margin:auto;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }
        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }
        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }
        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main li:first-child ul, 
        /*ul.main > li:hover ul {*/
        ul.main li.selected ul {
          display: block !important;
          z-index: 100;
        }
        ul.main li:first-child ul {
	        z-index: 10;
        }
        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #80D0D9;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }
    </style> 
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>Test</b></label>
                                </div>
                                <!---span><%=lb_var1.Text %></span><br /--->
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>TestII</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>TestII 2</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>TestII 3</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label20" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label21" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label22" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <br /><br />
    <asp:Repeater ID="Repeater" runat="server">
	    <HeaderTemplate>
	    </HeaderTemplate>
        <ItemTemplate>
		    <asp:LinkButton ID="Link1" runat="server" Text='<%# Eval("row1") %>' BackColor="#57789E" Width="820px" 
                ForeColor="White" Font-Bold="true" Font-Names="Arial" style="line-height:33px" 
                ToolTip="Double-click the line to locate to the record" OnClick="bt_Click" />
        </ItemTemplate>
	    <SeparatorTemplate>
	    </SeparatorTemplate>
	    <FooterTemplate>
		    <div class="headerFooter"></div>
	    </FooterTemplate>
    </asp:Repeater>
    <br />

Open in new window

to ensure the repeater above is aligned on the right of the TABs, of which each TAB is having a few sub-menu items? I expect that the TABs with sub-items are the green part below, while the reapeater is the blue part.

https://dl.dropboxusercontent.com/u/40211031/t850.png
0
Comment
Question by:HuaMinChen
  • 15
  • 7
  • 4
  • +1
28 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40412433
Post the rendered HTML
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40412434
what do you mean? Thanks.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40412497
You've posted the .net code - post the rendered code as it appears in the View Source of the browser
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40412524
But I've already shown all the relevant codes within .aspx file.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40412528
You've posted some .net code and a nice picture of two boxes and a question that makes no sense in context
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40412639
Yes, I do expect to show the TABs on box 1 and the repeater on box 2. Is there any other help to this thread?
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40412646
I want to put the repeater at the position that is on right of the TAB menu. Is this unclear to what I expect to have?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40413551
Without the rendered HTML your question makes no sense.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40414908
Sorry, I don't know what "rendered HTML" mean?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40414925
View source in the browser and post the relevant HTML.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40415110
Hi,
But the codes above are already very clear and what I expect to see is, why the problem arises.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40415351
HuaMinChen2, this is going around in the same circle as your previous question http:Q_28544457.html.   It may be very clear in your own mind, but we can't see that. This is  a front end issue just as your previous question is.   That means your asp code is not what we need to see.  What is required is the output it produces.  

If you need to hide some private info, that is understandable. Just spend some time and hide or disguise that data.   Until that happens, we can't help you with your css issues.  

Based on what we see is being output as HTML you may need to adjust your asp logic, but there is no way to know until you post the rendered html.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40415377
Thanks. Here is the source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Refresh" content="120" /><title>
	Test
</title>
    <style type="text/css">
        body {
           padding-top: 100px;
           background-color: #4278A8;
        }
        * {
          padding: 0;
          margin: 0;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }

        #demo {
            margin: 30px 0 50px 0;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
    
        #demo .wrapper {
            display: inline-block;
            width: 180px;
            margin: 0 3px 0 0;
            height: 20px;
            position: relative;
        }
    
        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background: #F9F9F9;
            border: 1px solid #AAA;
            border-bottom: 1px solid #777;
            color: #282D31;
            font-weight: bold;
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .8s;
            text-align: center;
        }
    
        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: red;
            -webkit-transition-delay: 0s, 0s, 0s;
        color:#fff
        }
    
        #demo .content:hover ~ .parent {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            z-index: 0;
        }
    
        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .5s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #777;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
        }
    
        #demo .wrapper:active .content {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
        #demo .content:hover {
            height: 123px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
    
    
        #demo .content ul {
            background: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    
        #demo .content ul a {
            text-decoration: none;
        }
    
        #demo .content li:hover {
            background: #eee;
            color: #333;
        }
    
        #demo .content li {
            list-style: none;
            text-align: left;
            color: #888;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            padding-left: 10px;
            border-top: 1px solid #ccc;
        }
    
        #demo .content li:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .button
        {
            background: url(/pict/app-spotlight.png);
            background-size: 36px 36px;
            background-repeat: no-repeat;
            background-position: 0px 2px; 
            cursor:pointer;
            border: none;
            width:36px;
            height:36px;
        }
        .body {
            background-color:#BBAEBF;
            font-family: 'Segoe UI';
        } 

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_reg
        {
            width: 36px;
            height: 30px;
            font-weight:bold;
        }    
        .lb_log{
            top: 30px;
            left: 1185px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
        }    
        .left {
             position:absolute;
             left:10px;
             border:Groove 1px #ccc;
             width:55px;
             right:10px;
        }

        .right {
             position:absolute;
             left:60px;
             border:none 1px #c00;
             width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
            display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
            width: 70%;
        }
        .dia {
            display:none;
        }

        #container{
            height:200px;
            background-color:black;
        }
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:60%;
          /*margin:auto;*/
          display:block;
          /*float:left;*/
        }
        #repcontainer {
            width:15%;
            display:block;
            float:left;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main li:first-child ul, 
        /*ul.main > li:hover ul {*/
        ul.main li.selected ul {
          display: block !important;
          z-index: 100;
        }

        ul.main li:first-child ul {
	        z-index: 10;
        }

        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #80D0D9;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }

    </style> 
</head>
<body>
    <form method="post" action="./" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="_TSM_HiddenField_" id="_TSM_HiddenField_" value="ZaMfZ6yYhPPHZ1NeEf8j6-t902-6pHpn2MehV0eep-I1" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="CQtmMZpX4gCzia3zTbdRt8ZZI53myS7ZSD+Nk062m4iqRBh+bWRBrU1W4uczFI0QhjfDocTRTDVpl7k+HGNCUDKItPpGWJheyoAVq+5eR9QRqRevCsI8FunJiYnNA+E7B+xtOPwwFR4d/zC0zO1cNmjDOVc2O0Xz8gg0JwoscfjksvP+elcfMkEDZmob6XJcvRHiviMOHNH6UuJmJtOlRhGQhMIA+QrjHsgp+mvB9pfwB8ehBHl04Px7Rj8yDuGmPkRbiQHDORKPBCl8v0OJp+a/4SscpWC2u9O3EzDo6eOex4xdg6JVy9Q7Nkw6O/Im6e9bFitT1oTWgReNjsKhdWPZK++xZqUaQaZWzPogohoCNn8bKk9FSqD+KhSIjXFhDE6cqlqfd9qA/DbmAHVTftByBJjhfiHwew3fV+dfsCIDpLflKEEkf6WysctjBuMJJlX8750wb7kjGH6+9p0cnQ==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/Start/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZFMHky7-waqj18vFhp23U9ewBVIqV9r9rU1JAyizeMJ_lEH2N69uKKumMDzyD1TdHw2&amp;t=635418424260000000" type="text/javascript"></script>


<script src="/Start/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1LaNeQpnb_mrNlSBOpxnwoUOH2ouW076uIdZ6KmeUBHqXOdIT8dC2fKqlx4fDbJ6HsRJcFo85G6_JKLdtCBvpxmSr6GESXkFRwBnonrQv81Zl0&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/Start/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScNkrFh9tnhyFns-1yXIrkVn3Y0ZYUujYkJUoOUui-Wu4R03BO1XbNXsiR6CPrJcOWtJu2MuDFS3bw9whEg-SzQHcnUXPAboOEighqa7pO9UA0&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/Start/default.aspx?_TSM_CombinedScripts_=True&amp;v=ZaMfZ6yYhPPHZ1NeEf8j6-t902-6pHpn2MehV0eep-I1&amp;_TSM_Bundles_=&amp;cdn=False" type="text/javascript"></script>
<script src="/Start/ScriptResource.axd?d=XGoPW3Unw0ILT0eb9sSUa93m2vF_PgIJ9qH_KK5Ed71MfMRAaalXlruh-SvVhLaNTwNDdFTEUUOKqtV5kqg_SuWJ7aQogBxVj7ws7pRQCs0bVZr-unciUfWjPZnDcjLkzKojJFD5u2H0j6nCkuPWpQ2&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/Start/ScriptResource.axd?d=uvA9ANM76Fbpm1FfUlagnX2IUZjvJzEwiK11efD0W9hRRzhN1KtPcorq0swMGmLfUQ8whq8NC37P4_RK9-GwnIbquHRveKJxC1Ks106veijeaN9nArOf6SyaGGELK4vdmYx9Sc_cNUQPKkVp0Kz3WQ2&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
null;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="479C339B" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ww9pkcYLfBQQju2CuNiwNwS+TNXI/t9/v0zl3l2uSE+2zPPLqfesrY6GXeWHbReDt2e/oB5Pf7UjwQ+2tx3ENVZAxs7nkBcyNhRVGJj+Dv4+GTq8gtkms6ORhKOUrvf00QXZCn1NID+Flh1T8Q+syBk4HwFcsx+Eadj9mbiQNYEDrVdepXWMhGTavXTpsIsFy7sCbQearJKaAHJXS/P+i7R6ToP3XCqgePQLv34p0jxzW/Dzk0RGU0n5xNyuezWTffL2W+Z3UcYbfkBiBzpxZ43mbTd5yVzTSfLsAtSBPoeJXXhuIiGjh19lwIVPllqlf3bojLGQUq28VdubaULdmashwrI7QvgVf/yESjCRvvnHzaEP9LoNjTPe3Oc5BiZddQurDFm9YwcEFizYnX/plYOrQ3SRTTz1DhFxy3gR3k9uVdt4RZPqZxijfgh2h81a7WPQUWamD2EHrU0HivFOb5O/wM2rXh/JFr532bUMP1fV5kfoUbgwj8rjr6ltNT3gWrYPn3ASpYjEsNfdpk30D/zH0A7TcdN9R1va2DxOT+lbnSZVrF94TxE8MuOduTDkqzPz2xgtZu4G0ZdNjFrBBjiYJuAE4VbeOic2pv98cSBcriDUmr6wZkYmCJWWeRPqf3BwaRw+HwHibm+/gXooR9wGE9wQRd2wBfL5tHMLzvH3ldOEFe/bn0l+bpdkm5R32iNETPpdwMfoyOkI5aQqgA==" />
</div>
    <div style="background-color:#8E6ACC; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: #8E6ACC; right: 0%;">
                <table width="100%">
                    <tr>
                        <td align="right" >
                            <a id="lb_reg" class="lb_reg" href="javascript:__doPostBack(&#39;lb_reg&#39;,&#39;&#39;)" style="color:White;font-family:Arial Unicode MS;font-size:10pt;font-weight:bold;">注册</a>
                               &nbsp;|&nbsp; 
                            <a id="lb_user_acc" class="lb_log" href="javascript:__doPostBack(&#39;lb_user_acc&#39;,&#39;&#39;)" style="color:White;font-family:Arial Unicode MS;font-size:10pt;font-weight:bold;">登录</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:#7BD4C9; position: fixed; left: 0; right: 0; top: 10px; border-radius:6px; width: 63%; height:67px; margin:auto;">
                <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl04', 'form1', [], [], [], 90, '');
//]]>
</script>

                <table width="100%">
                    <tr style="height:8px;"></tr>
                    <tr>
                        <td style="width:8px;" ></td>
                        <td align="left" >
                            <div style="background-color:#9FC2CC; left:0; width: 60%; border-radius:11px;" >
                                <span id="Label2" style="display:inline-block;color:#F0B411;font-family:Arial Unicode MS;font-size:16pt;font-weight:bold;width:3px;"></span>
                                <span id="Label1" style="color:#F0B411;font-family:Arial Unicode MS;font-size:19pt;font-weight:bold;">楼盘快速搜索</span>
                                <input name="tb_searchtext" type="text" id="tb_searchtext" style="color:#5637D4;background-color:White;font-family:Arial Unicode MS;font-size:13pt;font-weight:bold;width:280px;" />
                                <input type="hidden" name="TextBoxWatermarkExtender3_ClientState" id="TextBoxWatermarkExtender3_ClientState" />
                                <span id="Label3" style="display:inline-block;color:#F0B411;font-family:Arial Unicode MS;font-size:19pt;font-weight:bold;width:1px;"></span>
                                <input type="button" name="bt_search" onclick="" class="button"/>
                            </div>
                        </td>
                        <td >
                            <div style="background-color:white; width: 14.5%; border-radius:4px;" >
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:8px;" ></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="horizontalmenu">
        <ul class="main">
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13"><b>Detail</b></label>
                                </div>
                                <input name="tb_p1_desc2" type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span></span><br /--->
                                <input name="butt_p1" type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8"><b>Detail</b></label>
                                </div>
                                <input name="tb_p2_desc" type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="butt_p2" type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4"><b>Detail</b></label>
                                </div>
                                <input name="Textbox1" type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button1" type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5"><b>Detail</b></label>
                                </div>
                                <input name="Textbox2" type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button2" type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7"><b>DetailII 2</b></label>
                                </div>
                                <input name="Textbox4" type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button4" type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9"><b>DetailII 3</b></label>
                                </div>
                                <input name="Textbox5" type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button5" type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10"><b>Detail</b></label>
                                </div>
                                <input name="Textbox6" type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button6" type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11"><b>Detail</b></label>
                                </div>
                                <input name="Textbox7" type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button7" type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12"><b>Detail</b></label>
                                </div>
                                <input name="Textbox8" type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button8" type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14"><b>Detail</b></label>
                                </div>
                                <input name="Textbox9" type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button9" type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15"><b>Detail</b></label>
                                </div>
                                <input name="Textbox10" type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button10" type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16"><b>Detail</b></label>
                                </div>
                                <input name="Textbox11" type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button11" type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17"><b>Detail</b></label>
                                </div>
                                <input name="Textbox12" type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button12" type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18"><b>Detail</b></label>
                                </div>
                                <input name="Textbox13" type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button13" type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19"><b>Detail</b></label>
                                </div>
                                <input name="Textbox14" type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button14" type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label20"><b>Detail</b></label>
                                </div>
                                <input name="Textbox15" type="textbox" id="Textbox15" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button15" type="button" id="Button15" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label21"><b>Detail</b></label>
                                </div>
                                <input name="Textbox16" type="textbox" id="Textbox16" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button16" type="button" id="Button16" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label22"><b>Detail</b></label>
                                </div>
                                <input name="Textbox17" type="textbox" id="Textbox17" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button17" type="button" id="Button17" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23"><b>Detail</b></label>
                                </div>
                                <input name="Textbox18" type="textbox" id="Textbox18" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button18" type="button" id="Button18" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="repcontainer">
        
	        
		        <a id="Repeater_Link1_0" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl01$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座</a>
            
	        
		        <a id="Repeater_Link1_1" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl03$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4A室</a>
            
	        
		        <a id="Repeater_Link1_2" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl05$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4B室</a>
            
	        
		        <a id="Repeater_Link1_3" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl07$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4C室</a>
            
	        
		        <a id="Repeater_Link1_4" title="Double-click the line to locate to the record" href="javascript:__doPostBack(&#39;Repeater$ctl09$Link1&#39;,&#39;&#39;)" style="display:inline-block;color:White;background-color:#57789E;font-family:Arial;font-weight:bold;width:820px;line-height:33px">太古城一期三座4D室</a>
            
		        <div class="headerFooter"></div>
	        
    </div>
    <span id="lb_msg" style="color:#E01B84;font-size:Large;"></span>  
    <br />
    <span id="lb_pict1" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict2" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict3" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict4" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict5" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    <span id="lb_pict6" class="dia" style="color:DarkBlue;font-family:Times New Roman;font-size:11pt;font-weight:bold;"></span>
    
    
    

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender3_ClientState","WatermarkText":"NotShown","id":"TextBoxWatermarkExtender3"}, null, null, $get("tb_searchtext"));
});
//]]>
</script>
</form>
</body>
</html>

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 58

Expert Comment

by:Gary
ID: 40416013
Even with your HTML I still have no idea what you are wanting.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40416740
when running the page, the repeater now is not shown on the right of TABs. this is the problem.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40416741
Your original question said you wanted it to the right.
Where should it be?
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40416842
I expect repeater to be shown like
https://dl.dropboxusercontent.com/u/40211031/t850.png

and to the above, the green one is having TABs inside, while blue one having repeater inside.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40417104
This is very confusing.  

How does this
squarestranslate to the visual output of the code you provided.  
site screenshot
It looks like you have the gray area as a nested ul from an li parent in the vertical menu. Is that supposed to fly out on hover or click?  

Is the gray area in your coding supposed to represent the blue box in your diagram?  Is the green box in your diagram supposed to represent the vertical menu?
0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 40417441
HuaMinChen,

Sometimes a more realistic picture is better.  Take a screenshot of your web browser, paste it into Paint or similar program and move the objects where you want them.

Based on what I think you want, is this is it:
pic
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40418080
Thanks all.
Scott,
OK, the highlighted area in bottom-left corner below, is the repeater list
https://dl.dropboxusercontent.com/u/40211031/t852.png

and I do expect it to be shown in the empty red area on the right. how to adjust the codes above?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40418116
Part of the issue here is the code is not valid.   Paste your rendered code http://validator.w3.org/ and check out the errors.

Assuming you make no changes to the code, the cheating way would be to move the div#repcontainer to after the closing form tag.  Then add css to float it right and a negative top margin.
#repcontainer{
  float:right;
  margin-top:-250px;
}

Open in new window

If it were me, I would clean up the code to validate. It looks like there are some closing tags missing and once fixed, this cheating solution may not work.

The the gray area (nested UL) is static, I would also remove it from the vertical  navigation and simply make it nested divs.  You can float the divs left and give them some margin and you are good.
<div id="middle">'
   <!-- start repeating div box -->
    <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
        <!-- end repeating div box -->
 <!-- start repeating div box -->
    <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
        <!-- end repeating div box -->
 <!-- start repeating div box -->
    <div class="imagesList-item-frame shadow">
                            <img src= onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6"><b>DetailII</b></label>
                                </div>
                                <input name="Textbox3" type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input name="Button3" type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="Remove" />
                            </div>
                        </div>
        <!-- end repeating div box -->
</div>

Open in new window

Your end result would look like this
<div id="header"></div>
<div id="container">
       <div id="left_nav_verticle"></div>
        <div id="middle_repeating_divs"></div>
     <div id="right_content"></div>
</div>

Open in new window

If you stick with that, it will be much easier. Inside the container, you can float each child div to the left and give it some right margin.
That is basically what any of the css grids do.  You might want to think about using a grid like http://getbootstrap.com/ or http://foundation.zurb.com/ to make your life easier.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40418838
where is the relevant css codes, to the codes below?

<div id="header"></div>
<div id="container">
       <div id="left_nav_verticle"></div>
        <div id="middle_repeating_divs"></div>
     <div id="right_content"></div>
</div>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40418839
do you know, what I need is, to re-position the whole repeater list into the empty area highlighted above (within my last screenshot)?
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40419108
Any other help?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40419176
>where is the relevant css codes,
That is just a suggested skeleton layout.

Below is how I would achieve this using bootstrap.  The css in the style tag I added only to show visually what is going on. I wouldn't use that for production.  

http://jsbin.com/wutuya/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  <style>
  #header{height:60px;background-color:purple;color:white}
  #left_nav_verticle{background-color:violet;}
  #middle_repeating_divs{background-color:gray;}
  #right_content{background-color:blue;color:gray;}
  .box{text-align:center;background-color:#999;border: 1px solid rgba(86,61,124,.2);}
  </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="header">header</div>
<div id="container" class="row">
  <div id="left_nav_verticle" class="col-xs-3">
    <!-- place your left navigation here -->
    left
  </div>
  <div id="middle_repeating_divs" class="col-xs-6">
     <!-- place your repeater here -->
     <!-- simulate repeater -->
    <div class="col-xs-4  box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
    <div class="col-xs-4 box">box</div>
  </div>
  <div id="right_content" class="col-xs-3">
     <!-- place your right side content here -->
    right
  </div>
</div>
</body>
</html>

Open in new window


http://getbootstrap.com/ and the examples http://getbootstrap.com/getting-started/#examples and how to
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40420950
Sorry, using these codes
    <style type="text/css">
        #container{
            height:200px;
            background-color:black;
        }
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:60%;
          /*margin:auto;*/
          display:block;
          float:left;
        }
        #repcontainer {
            width:15%;
            display:block;
            float:left;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 170px;
        }
        ul.main {
          width: 160px;
		  position: relative;
        }
        ul.main > li {
          line-height: 20px;
          background: #B849AE;
          color: white;
          box-sizing: content-box;
          padding: 10px;
        }
        ul.main li:first-child ul, 
        /*ul.main > li:hover ul {*/
        ul.main li.selected ul {
          display: block !important;
          z-index: 100;
        }

        ul.main li:first-child ul {
	        z-index: 10;
        }

        a {
          color: white;
        }
        ul.main ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
          width: 600px;
          background-color: #80D0D9;
          font-size: 0;
        }
        ul ul li {
          display: inline-block;
        }
        ul ul li img {
          width: 140px;
        }
      #header{height:60px;background-color:purple;color:white}
      #left_nav_verticle{background-color:violet;}
      #middle_repeating_divs{background-color:gray;}
      #right_content{background-color:blue;color:gray;}
      .box{text-align:center;background-color:#999;border: 1px solid rgba(86,61,124,.2);}
    </style> 
    ...
    <div id="container" class="row">
    <div id="left_nav_verticle" class="col-xs-3">
        <ul class="main">
            <li>
                <a href="#">热门消息</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict1.Text %> onclick="pict_click1();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label13" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="tb_p1_desc2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span><%=lb_var1.Text %></span><br /--->
                                <input type="button" id="butt_p1" onclick="openPopup();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label8" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="tb_p2_desc" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="butt_p2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict3.Text %> onclick="pict_click3();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label4" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox1" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button1" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label5" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox2" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button2" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">租房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label6" runat="server"><b>照片描述II</b></label>
                                </div>
                                <input type="textbox" id="Textbox3" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button3" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label7" runat="server"><b>照片描述II 2</b></label>
                                </div>
                                <input type="textbox" id="Textbox4" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button4" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label9" runat="server"><b>照片描述II 3</b></label>
                                </div>
                                <input type="textbox" id="Textbox5" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button5" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label10" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox6" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button6" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">买房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label11" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox7" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button7" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label12" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox8" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button8" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label14" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox9" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button9" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label15" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox10" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button10" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">超值租房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label16" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox11" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button11" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label17" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox12" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button12" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox13" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button13" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox14" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button14" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">超值买房</a>
                <ul>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label20" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox15" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button15" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label21" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox16" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button16" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label22" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox17" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button17" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23" runat="server"><b>照片描述</b></label>
                                </div>
                                <input type="textbox" id="Textbox18" style="height:20px; width:116px; border:inherit; background-color:#F0FAF9;" runat="server" /><br/><br/>
                                <!---span>Some descriptions here</span><br /--->
                                <input type="button" id="Button18" onclick="openPopup2();" style="height:23px; width:97px" value="删除照片" runat="server" />
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="middle_repeating_divs" class="col-xs-6">
        <asp:Repeater ID="Repeater" runat="server">
	        <HeaderTemplate>
	        </HeaderTemplate>
            <ItemTemplate>
		        <asp:LinkButton ID="Link1" runat="server" Text='<%# Eval("row1") %>' BackColor="#57789E" Width="820px" 
                    ForeColor="White" Font-Bold="true" Font-Names="Arial" style="line-height:33px" 
                    ToolTip="Double-click the line to locate to the record" OnClick="bt_Click" />
            </ItemTemplate>
	        <SeparatorTemplate>
	        </SeparatorTemplate>
	        <FooterTemplate>
		        <div class="headerFooter"></div>
	        </FooterTemplate>
        </asp:Repeater>
    </div>
    </div>
    ...

Open in new window


I still get the same problem like
https://dl.dropboxusercontent.com/u/40211031/t853.png
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40423594
Any other help?
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now