CSS不适用于母版页 [英] CSS won't apply from Master Page
问题描述
对于我的一生，我无法弄清楚为什么我尝试应用的CSS无法正常工作，希望有人可以帮助我.
For the life of me I cannot figure out why the CSS I am trying to apply won't work and hoping someone can help me out.
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>
多么不幸.我做了以下建议的所有操作，但仍然无法正常工作.这是非常古怪的.该页面之前曾进行过部分样式设置，因此至少看起来似乎正确地对其进行了抓取.如果其他人有任何想法，我很想听听他们的想法.
How unfortunate. I did everything recommended below and it still isn't working. It is very bizzare. The page was being partially styled before so it was seemingly grabbing it correctly at least. If anyone else has any ideas I'd love to hear them.
这是我的CSS.正如我所说的，这是非常基本的，并且只能奏效.主要问题是页脚不会沿着底部运行，而是与内容区域的左侧对齐.
And here is my CSS. As I said, very basic and it is half working. Main issue is the Footer won't run along the bottom, but is aligned to the left side of the content area.
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;
}
推荐答案
链接到母版页中的样式表时，始终最好使用asp.net链接而不是html链接.这样可以确保asp.net将解析您根目录中的路径.为此，您所需要做的就是添加属性 runat ="server" .
When linking to stylesheets in your masterpage, its always good to use the asp.net link instead of html link. This ensures that asp.net will resolve the paths from your root directory. All that you need to do for this is add the attribute runat="server".
<link href="~/css/main.css" rel="stylesheet" type="text/css" runat="server"/>
现在，即使您的母版页与aspx页不在同一目录中，css也将正确加载.
Now even if your master page is not in the same directory as the aspx page, the css will get loaded correctly.
这篇关于CSS不适用于母版页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
