Question

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

我有一个简单的母版页，顶部有一个横幅，左侧有一个ASP菜单控件。我希望页面中心对齐，所以我有div“outer_div”与CSS属性：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;
}

Answer 1

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

基本的CSS是：

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

使我的问题真正发挥作用的是浮动。

ASP菜单位置

1 个答案: