Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 144
  • Last Modified:

Problem with css part

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
HuaMinChen
Asked:
HuaMinChen
  • 15
  • 7
  • 4
  • +1
1 Solution
 
GaryCommented:
Post the rendered HTML
0
 
HuaMinChenBusiness AnalystAuthor Commented:
what do you mean? Thanks.
0
 
GaryCommented:
You've posted the .net code - post the rendered code as it appears in the View Source of the browser
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
HuaMinChenBusiness AnalystAuthor Commented:
But I've already shown all the relevant codes within .aspx file.
0
 
GaryCommented:
You've posted some .net code and a nice picture of two boxes and a question that makes no sense in context
0
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
GaryCommented:
Without the rendered HTML your question makes no sense.
0
 
HuaMinChenBusiness AnalystAuthor Commented:
Sorry, I don't know what "rendered HTML" mean?
0
 
GaryCommented:
View source in the browser and post the relevant HTML.
0
 
HuaMinChenBusiness AnalystAuthor Commented:
Hi,
But the codes above are already very clear and what I expect to see is, why the problem arises.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
GaryCommented:
Even with your HTML I still have no idea what you are wanting.
0
 
HuaMinChenBusiness AnalystAuthor Commented:
when running the page, the repeater now is not shown on the right of TABs. this is the problem.
0
 
GaryCommented:
Your original question said you wanted it to the right.
Where should it be?
0
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
slightwv (䄆 Netminder) Commented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
Any other help?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>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
 
HuaMinChenBusiness AnalystAuthor Commented:
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
 
HuaMinChenBusiness AnalystAuthor Commented:
Any other help?
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 15
  • 7
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now