ASP 菜单位置答案

【问题标题】：ASP Menu PositionASP 菜单位置
【发布时间】：2010-07-12 13:28:42
【问题描述】：

请注意，我是网页编码的初学者，所以请放轻松！

我有一个简单的母版页，其中包含顶部的横幅和左侧的 ASP 菜单控件。我希望页面居中对齐，所以我有带有 CSS 属性的 div“outer_div”：text-align:center margin-left:auto, margin-right:auto。

此“outer_div”包含“menu”div（包含 ASP 菜单控件），它具有 CSS 属性：text-align:left。但是，我无法将菜单控件放置在外部 div 的左侧，我似乎只能将其放置在屏幕的最左侧或中心。

我已经粘贴了 .master 和 CSS 相信。我想我犯了一个简单的错误——但事实证明要找到它并不简单！非常感谢任何帮助，

罗伯...

<body>
<div id="outer_div" class="bxcen cenx">
    <form id="form1" runat="server">
    <div id="header">
        <asp:Label ID="lblHeader" runat="server" CssClass="header_image" Width="1024px" Height="121px"></asp:Label>
        <div id="branding">
            <span id="companyName" class="redText">Arcadia</span>&nbsp;<br />
            <span id="slogan">Reference Data Load Manager</span>
        </div>
    </div>
    <div id="divTopPanel">
        <asp:Label ID="lblPageName" runat="server" CssClass="top_panel" Width="1024" Height="30"></asp:Label>
    </div>
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    <div id="holder">
        <div id="menu" class="left_align">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2"
                Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Vertical"
                StaticSubMenuIndent="10px" StaticDisplayLevels="5">
                <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <DynamicMenuStyle BackColor="#B5C7DE" />
                <DynamicSelectedStyle BackColor="#507CD1" />
                <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticSelectedStyle BackColor="#507CD1" />
            </asp:Menu>
        </div>
        <div id="content" align="left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</div>

现在是 css...

body
{
    font-family: Verdana;
    font-size: small;
    background-color: #808080;
}

#standard
{
    font-family: Verdana;
    font-size: small;
    background-color: #FFCC99;
}


#menu {
    background-color: #FDA343;
    position:relative;
    left:0px;
    top:0;
    width: 161px;
}

#content
{
    width: 600px;
    float: left;
    text-align: left;
}

.button
{
    font-family: Verdana;
    font-size: small;
    background-color: #6699FF;
    color: #FFFFFF;
}

.top_panel
{
    background-color: #FDA343;
    font-family: Tahoma;
    font-size: large;
    text-align: center;
}

.header_image
{
    background-color: #B5C7DE;
    font-family: Tahoma;
    font-size: large;
    text-align: left;
    vertical-align: middle;
    background-image: url('Images/SmallOrangeRig.jpg');
    color: #FFFFFF;
}

.cenx
{
    text-align: center;
}
.ceni
{
    clear: both;
}
.bxcen
{
    margin-left: auto;
    margin-right: auto;
    border: none;
    padding: 0;
}

.left_align
{
    text-align:left;
}


#branding {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1000;
    text-align: left;
    color: #9f0f0e;
    font-family: "Arial", Courier, monospace;
}

#companyName {
    color: #FFF9E9;
    font-size: 40px;
}

【问题讨论】：

标签： asp.net css

【解决方案1】：

我的 CSS 过于复杂。我拿起了 David Powers 的一本名为“CSS 入门”的好书。第 11 章给出了一个简单的两列布局页面的示例 CSS。由此，我能够构建我需要的东西。

基本的css是：

#wrapper {
  width: 760px;
  margin: 0 auto;
}
#sidebar {
  width: 220px;
  padding: 10px;
  float: left;
}
#mainContent {
  margin-left: 240px;
}

对我的问题产生真正影响的是浮动。

【讨论】：

+1 冒险学习更多知识并简化您正在做的事情会很快收回成本。