Question

我正在尝试使用垂直菜单栏创建母版页，内容应显示在菜单栏旁边。就像普通的网页左侧有垂直菜单栏，内容侧有。

但内容被推到侧栏下方。如何解决这个设计问题？请帮忙。随附的是屏幕截图。

我的母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Layout.master.cs" Inherits="FMS.UIWebUsers.Layout" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../../css/navigationMenu.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="menu12">
            <ul>
                <li>
                    <div class="bt1">
                        <span class="ht11">»&nbsp;</span>
                        <span class="hw12">Navigation Menu</span>
                    </div>
                </li>
                <li><a title="Home" href="#">Home</a></li>
                <li><a title="Photos" href="#">Photo Gallery</a></li>
                <li><a title="Events" href="#">Events Calendar</a></li>
                <li><a title="Forum" href="#">Community</a></li>
                <li><a title="Articles" href="#">Article Directory</a></li>
                <li><a title="Link Directory" href="#">Link Directory</a></li>
                <li><a title="Download" href="#">Freeware Download</a></li>
            </ul>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>

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

垂直菜单栏的CSS

#menu12 {
width: 178px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}       
#menu12 li {
border-bottom: 1px solid #90bade;
margin: 0;
width: auto;
}
#menu12 li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
#menu12 li a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;
background-color: #FF7C3E;
color: #fff;
}
.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif;  
font-size : 10px; 
text-align : left; 
font-weight : bold; 
color : #ffffff; 
background-color : #8AA1B6; 
padding-top : 3px; 
padding-bottom : 4px; 
padding-left : 4px; 
border-left: 5px solid #FF7C3E;
display : block; 
}
.ht11 {
font-size : 10px; 
font-weight: bold;
color : #000;  
font-family : Verdana, Arial, Helvetica, sans-serif; 
text-decoration : none; 
}   
.hw12 {
font-size : 11px; 
font-weight : bold; 
color : #ffffff; 
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none; 
}

我的网页代码

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Layout.Master" CodeBehind="WebForm1.aspx.cs" Inherits="FMS.UIWebUsers.WebForm1" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h2><%: Title %>.</h2>
    <h3>Your application description page.</h3>
    <p>Use this area to provide additional information.</p>
</asp:Content>

内容占位符因垂直菜单栏而下降

0 个答案: