2010-07-12 85 views
0

請注意,當談到網頁編碼時,我是一個初學者,所以請在我身上輕鬆一下!ASP菜單位置

我有一個簡單的母版頁,其頂部包含一個橫幅並在左側包含一個ASP菜單控件。我希望頁面居中對齊,因此我使用CSS屬性div「outer_div」:text-align:center margin-left:auto,margin-right:auto。

此「outer_div」包含具有CSS屬性的「menu」div(包含ASP菜單控件):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> 

現在三網融合

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

回答

2

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

+1冒險嘗試瞭解更多信息並簡化您正在做的事情,從而快速收回成本。 – NotMe 2010-07-12 16:23:40