左列不显示

时间:2012-07-17 14:17:57

标签: css asp.net-mvc asp.net-mvc-2

我想在我的MVC项目中使用此template

但左列没有在index.aspx中显示。 感谢您帮我找到错误。

的site.css

body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: red;}

    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }

    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin-left: 200px; /*Set left margin to LeftColumnWidth*/
    }

    #leftcolumn{
    float: left;
    width: 200px; /*Width of left column*/
    background: #C8FC98;
    }

     #footer{
     clear: left;
     width: 100%;
     background: black;
     color: #FFF;
     text-align: center;
     padding: 4px 0;
     }

     #footer a{
     color: #FFFF80;
     }

的Site.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head id="topsection" runat="server">
 <link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" /> 
    <title>
    <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
     </head>
   <body>
    <asp:ContentPlaceHolder ID="pageHeadPlaceHolder" runat="server">
        <div id="pageHead">
        <p>Head</p>
        </div>
    </asp:ContentPlaceHolder>
        <div id="mainContainer">
            <asp:ContentPlaceHolder ID="leftColPlaceHolder" runat="server">
                <div id="leftcolumn">
                    <ul>
                        <li>Home</li>
                        <li>Contact Us</li>
                        <li>About Us</li>
                    </ul>
                    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
                </div>
            </asp:ContentPlaceHolder>
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            <div id="contentwrapper">
                <div id="contentcolumn">
                    <p>
                        test</p>
                </div>
                </div>
            </asp:ContentPlaceHolder>
        </div>
      <asp:ContentPlaceHolder ID="pageFooterPlaceHolder" runat="server">
        <div id="footer">
        </div>
     </asp:ContentPlaceHolder>
    </body>
    </html>

的Index.aspx

   <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"   Inherits="System.Web.Mvc.ViewPage" %>

   <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
          Home Page
   </asp:Content>

   <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h2><%: ViewData["Message"] %></h2>
   <p>
            To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
   </p>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="leftColPlaceHolder" runat="server"></asp:Content>

更新图片

image updated

2 个答案:

答案 0 :(得分:0)

我看不到您的Site.Master中包含的css文件。尝试添加对它的引用,或者某些内容(或者特定css的路径):

<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />

答案 1 :(得分:0)

您检查过HTML输出吗?如果左列代码不存在那么它不是CSS问题。看起来您正在使用空白内容标记覆盖主列中的左列代码。尝试从index.aspx中删除以下内容。

<asp:Content ID="Content3" ContentPlaceHolderID="leftColPlaceHolder" runat="server"></asp:Content>

如果您打算替换master中的内容,您只需要在index.aspx中声明它。