0

asp.net VB のツリー ビュー コントロールに厄介な問題があります。メニューを分岐すると、コンテンツ ページ領域が押し下げられます。

さまざまなセクションを分離するための適切な div を作成しました

マスターページは非常に基本的です:-

<!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 runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">

    <div id="wrapper">

    <div id="header">

    <h1>This is header</h1>

    </div>

       <div id="nav">
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
               ImageSet="BulletedList2" ShowExpandCollapse="False">
            <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
            <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" 
                HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px" />
            <ParentNodeStyle Font-Bold="False" />
            <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" 
                HorizontalPadding="0px" VerticalPadding="0px" />
        </asp:TreeView>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    </div>


    <div id="content">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>


    <div id="footer">
    <p>This is footer</p>
    </div>

    </div>
    </form>
</body>
</html>

CSS は次のとおりです。

body {


}
#wrapper{
    margin:0 auto;
    width:780px;
}


#nav{

    width:100px;
    border:1px solid black;
    padding:5px;


}


#header{

    height:100px;
    background:blue;
    color:white;
    float:left;
    width:100%;
}

#content{
    margin-left:110px;
    border:1px solid black;
    background:yellow;
    float:left; 

    width:600px;

}


#footer{
    height:200px;
    background:pink;
    clear:both;

}

Treeview はコンテンツ ページを押し下げるだけで、テーブルを使用する以外はすべて試したような気がします。

4

1 に答える 1

0

float と z-index 属性を適切に使用する必要があると思います。

nav{width: 100px; height: 100px; float: left; z-index: 1;}
于 2012-04-24T13:00:52.417 に答える