Need details to the way

Hi,
I want to have repeater control on the right the menu (each TAB sub-menu items) below

    <style type="text/css">
        #container{
            height:200px;
            background-color:black;
        }

...
                    </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>
    ...

and then center the div that is having both the menu and the repeater control inside, on the page. is there any demonstration to do this?

Hi HuaMin,

Thanks for your post.

This article show us how to create multi-level navigational menu with the ASP.NET Repeater control and CSS styles, you could refer to it.

Hope it will be helpful to you.

Best Regards,

Fei Han

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;
        }
...
	    <SeparatorTemplate>
	    </SeparatorTemplate>
	    <FooterTemplate>
		    <div class="headerFooter"></div>
	    </FooterTemplate>
    </asp:Repeater>
    <br />

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.

wmec

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.

  1. You should not post all your code here, only that small piece which is directly related to the issue.
  2. What the exact issue? Please show the screenshot of the current output and a picture of expected result.

Now the repeater does not appear on the right side of the several TABs (while each each TAB is having sub-items). This is what I expect to adjust.

Hi wmec,

wmec

to ensure the repeater above is aligned on the right of the TABs

According to your description and picture, I recommend to divide the page into two parts, we could use the first one to display menu and use the second one to display repeater. You could refer to the below sample to divide your page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #horizontalmenu {
            /*text-align: center;
          margin-left:120px;*/
            width: 90%;
            margin: auto;
            display:block;
            float:left;
        }

        #repcontainer{
            width:9%;
            display:block;
            float:left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="horizontalmenu">
            </div>
            <div id="repcontainer">
            </div>
        </div>
    </form>
</body>
</html>

Best Regards,

Fei Han

Usually alignment could be done using one of 2 techniques

  1. have a table <table><tr><td> first container here </td><td> second container here </td></tr></table>. 
  2. have containers such as <div> with float:left/right <div style="width:400px;float:left"> first container here </div><div style="width:400px;float:left"> second container here </div>

Thanks a lot to all.
Fei Han,
I expect to show the repeater on the right of the TABs (of which each is having sub-items). but using these

    <style type="text/css">
        #horizontalmenu {
          width:60%;
          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;
        }
...

        <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>

the repeater is still shown underneath the TABs. why?

Smirnov,

Can you advise why I encounter the problem, using the above codes?

Any help to this?

Leave a Reply