CSS不适用于母版页

时间:2013-06-13 05:27:44

标签: asp.net css

对于我的生活,我无法弄清楚为什么我想申请的CSS不起作用,希望有人可以帮助我。

Index.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Index.master.cs" Inherits="IGS.Index" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta charset="utf-8" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; }
    ul.nav a { zoom: 1; }
    </style>
    <![endif]-->
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="container">
        <div class="header">
            <asp:ContentPlaceHolder ID="HeaderContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="sidebar1">
            <asp:ContentPlaceHolder ID="LeftNavBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="content">
            <asp:ContentPlaceHolder ID="MainContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="footer">
            <asp:ContentPlaceHolder ID="FooterContentBar" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

的Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="IGS._default"
    MasterPageFile="Index.Master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <title>Site Index</title>
</asp:Content>
<asp:Content ID="HeaderContentBar" runat="server" ContentPlaceHolderID="HeaderContentBar">
    Header
</asp:Content>
<asp:Content ID="LeftNavBar" runat="server" ContentPlaceHolderID="LeftNavBar">
    <ul class="nav">
        <li><a href="news.aspx">News</a></li>
        <li><a href="admin/default.aspx">Administration</a></li>
    </ul>
</asp:Content>
<asp:Content ID="MainContentBar" runat="server" ContentPlaceHolderID="MainContentBar">
    <h1>
        Latest News</h1>
    <asp:Repeater ID="newsRepeater" runat="server">
        <ItemTemplate>
            <div class="newsHeadline">
                <b>
                    <%# Server.HtmlEncode(Eval("newsHeadline").ToString())%></b>
                <div class="newsStory">
                    <%# Server.HtmlEncode(Eval("newsStory").ToString())%>
                </div>
                <div class="newsFooter">
                    Posted By:
                    <asp:HyperLink ID="newsSubmittedBy" runat="server" NavigateUrl='<%# string.Format("User.aspx?id={0}", Eval("id")) %>'
                        Text='<%# Server.HtmlEncode(Eval("newsSubmittedBy").ToString())%>' />
                    - Submitted By:
                    <%# Server.HtmlEncode(Eval("newsDate").ToString())%>
                </div>
                <div style="text-align: right;">
                    <asp:HyperLink ID="newsReadMore" runat="server" CssClass="newsReadMore" NavigateUrl='<%# string.Format("News.aspx?id={0}", Eval("id")) %>'
                        Text="Read More..." />
                </div>
                <hr />
        </ItemTemplate>
    </asp:Repeater>
    <p class="newsDaySelector">
        <asp:TextBox ID="TextBox1" runat="server" Width="30" Text="7"></asp:TextBox>
        days</p>
</asp:Content>
<asp:Content ID="FooterContentBar" runat="server" ContentPlaceHolderID="FooterContentBar">
</asp:Content>
编辑:多么不幸。我做了下面推荐的一切,但仍然无法正常工作。这非常古怪。该页面之前是部分样式的,所以它似乎至少正确地抓住了它。如果其他人有任何想法,我很乐意听到他们。

这是我的CSS。正如我所说,非常基本,它是半工作。主要问题是页脚不会沿底部运行,而是与内容区域的左侧对齐。

body
{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
.container
{
    width: 960px;
    background-color: #FFF;
    margin: 0 auto;
}

.header
{
    background-color: #ADB96E;
}

.sidebar1
{
    float: left;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content
{
    padding: 10px 0;
    width: 780px;
    float: left;
}

.footer
{
    padding: 10px 0;
    background-color: #6F7D94;
    position: relative;
    clear: both;
}

4 个答案:

答案 0 :(得分:1)

我不知道你把你​​的css文件放在哪里播种这是必须工作的东西

1- <link href="..css/main.css" rel="stylesheet" type="text/css" />
2- <link href="/css/main.css" rel="stylesheet" type="text/css" />
3-<link href="../css/main.css" rel="stylesheet" type="text/css" />

如果没有其中任何一个工作,那么步骤4是100%的方式来做它你只需要将你的css文件拖到你的头上,这将自动建立正确的链接到css,如果这没有帮助你需要检查所有你的所有css文件他的写得不对

我建议从步骤4开始,它是100%的方式来获取你的scc的写链接

答案 1 :(得分:0)

试试这个[我假设根目录下的css文件夹,css文件路径可能不正确。]

<link href="~/css/main.css" rel="stylesheet" type="text/css" />

而不是

<link href="css/main.css" rel="stylesheet" type="text/css" />

并将<!DOCTYPE放在<html>代码之前。

答案 2 :(得分:0)

当链接到母版页中的样式表时,使用asp.net链接而不是html链接总是好的。这可确保asp.net将解析根目录中的路径。您需要做的就是添加属性runat="server"

<link href="~/css/main.css" rel="stylesheet" type="text/css" runat="server"/>

现在,即使您的母版页与aspx页面不在同一目录中,也会正确加载css。

答案 3 :(得分:0)

您的代码似乎没有错误。只有我可以假设的可能性才是路径中的问题。 根据您的样式表位置使用以下一个:

/     -Site root
~/   -Root directory of the application

尝试添加:

runat="server"

也在你的道路上。

祝你好运!