2016-07-21 46 views
0

这里是我的母版页是如何设计:ASP CSS页脚问题

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title>Title</title> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div id="container"> 
    <form id="form1" runat="server"> 
     <div id="header"> 
     <h1 class="Title">Title</h1> 
     <span class="TagLine">tagline</span> </div> 
     <div id="navigation"> 
     <table> 
      <tr> 
      <td><asp:Menu ID="m" runat="server" Orientation="Horizontal"> 
       <Items> 
        <asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem> 
       </Items> 
       </asp:Menu></td> 
      </tr> 
     </table> 
     </div> 
     <div id="body"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
     </asp:ContentPlaceHolder> 
     </div> 
     <div id="Footer"> 
     <p>footer</p> 
     </div> 
    </form> 
    </div> 
    </body> 
    </html> 

这是我的CSS:

body { 
     margin: 20px 20px 20px 20px; 
     padding: 0; 
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
     color: darkslategrey; 
     width: 960px; 
     background-color: #F8F8FF; 
     margin: 0; 
     height: 100%; 
     position: relative; 
    } 
    #container { 
     min-height: 100%; 
     position: relative; 
     height: 100%; 
    } 
    #header { 
     height: 120px; 
     overflow: hidden; 
    } 
    #Content { 
     margin: 5px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
    } 
    #Footer { 
     position: absolute; 
     background: #F8F8FF; 
     text-align: center; 
    } 
    #header .Title { 
     color: #2E2E2E; 
    } 
    #header h1 { 
     padding-top: 1em; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 170%; 
    } 
    h1 { 
     padding-top: 1em; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 100%; 
    } 
    #header .TagLine { 
     color: #2E2E2E; 
    } 
    .Menu li { 
     display: inline; 
     margin: 0px; 
    } 
    .Menu a { 
     text-decoration: none; 
     background-color: #BDBDBD; 
     padding: 5px; 
     color: White; 
     border-right: .5px solid White; 
     margin: 0px; 
    } 
    .Menu a:hover { 
     background-color: #BDBDBD; 
     padding: 5px; 
     margin: 0px; 
    } 
    .Menu { 
     text-align: justify; 
     font-size: 25px; 
    } 
    .menuhover { 
     color: #fff; 
    } 

这里有问题,我不能推测:

  • 我试图将页脚粘贴在底部,但是如果页面有很多内容应该仍然可以工作,这种方式也是如此。
  • 中心对齐整个页面和主页
+0

可能性 1-)含量{填充顶:1em的; //试图删除它 } 2-)body {padding:10px; // play with it} 分享你的意见,让我可以帮助你更多 –

+0

没有帮助。尝试从内容中删除填充并从css中删除#body。还是一样。我已经从最初的问题CSS中删除了相同的。 – Cannon

+0

#header h1&h1也有padding-top:1em试试这个也可能会这样做 –

回答

2

更新:试试这个

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Title</title> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="container"> 
     <form id="form1" runat="server"> 
      <div id="header"> 
       <h1 class="Title">Title</h1> 
       <span class="TagLine">tagline</span> 
      </div> 
      <div id="navigation"> 
       <table cellpadding="0" cellspacing="0" width="1000" align="center"> 
        <tr> 
         <td> 
          <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana" ForeColor="Black" Width="800px"> 
           <staticmenuitemstyle height="40px" /> 
           <dynamicmenuitemstyle cssclass="Menu" height="40px" horizontalpadding="25px" /> 
           <dynamichoverstyle cssclass="menuhover" /> 
           <statichoverstyle cssclass="menuhover" /> 
           <items> 
            <asp:menuitem text="Home" navigateurl="~/Default.aspx"></asp:menuitem> 
           </items> 
          </asp:Menu> 
         </td> 
        </tr> 
       </table> 
      </div> 
      <div id="body"> 
       <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
        <!-- Page-specific content will go here... --> 
       </asp:ContentPlaceHolder> 
      </div> 
      <div id="Footer"> 
       <p>footer</p> 
      </div> 
     </form> 
    </div> 
</body> 
</html> 

CSS:

<style type="text/css"> 

    body { 
     margin: 20px 20px 20px 20px; 
     padding: 0; 
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
     color: darkslategrey; 
     width: 960px; 
     background-color: #F8F8FF; 
     margin: auto; 
     padding:auto; 
     height: 100%; 
     position: relative; 
    } 
    #container { 
     min-height: 100%; 
     position: relative; 
     height: 100%; 
    } 
    #body { 
     padding: 10px; 
    } 
    #header { 
     margin: 10px 10px 0px 10px; 
     height: 120px; 
     overflow: hidden; 
    } 
    #Content { 
     padding-top: 1em; 
     margin: 5px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
    } 
    #Footer { 
     position: fixed; 
     background: #F8F8FF; 
     text-align: center; 
     bottom:0px; 

    } 
    #header .Title { 
     color: #2E2E2E; 
    } 
    #header h1 { 
     margin:0px; 
     padding:0px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 170%; 
    } 
    h1 { 
     padding:0px; 
     margin:0px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 100%; 
    } 
    #header .TagLine { 
     color: #2E2E2E; 
    } 
    .Menu li { 
     display: inline; 
     margin: 0px; 
    } 
    .Menu a { 
     text-decoration: none; 
     background-color: #BDBDBD; 
     padding: 5px; 
     color: White; 
     border-right: .5px solid White; 
     margin: 0px; 
    } 
    .Menu a:hover { 
     background-color: #BDBDBD; 
     padding: 5px; 
     margin: 0px; 
    } 
    .Menu { 
     text-align: justify; 
     font-size: 25px; 
    } 
    .menuhover { 
     color: #fff; 
    } 

</style> 
+0

中工作得很好。一个问题,但。什么是在中使用包装CSS内容。如果我删除这些标签,看起来会发生很大变化 – Cannon

+0