使用母版页时更改内容占位符的样式

时间：2013-10-04 13:31:34

标签： html css

我有一个网站（VS2010，asp.net，VB），我正在使用母版页。我有几个其他页面，其中一个我想设置内容占位符的背景颜色。我正在使用样式表，并在.aspx页面上有以下代码。 （这只是测试代码）

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Dashboard2.aspx.vb" Inherits="Dashboard2" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="body_color">
<table id="mainDisplay">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
</asp:Content>

我尝试引用内容占位符的ID但不起作用。

以下是桌子的CSS，因为我水平和垂直居中。

#mainDisplay
{
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:900px;
    height:450px;
}

更新了代码以在aspx页面上显示所有内容

2 个答案:

答案 0 :(得分：2)

ContentPlaceHolder元素不会在客户端代码上呈现。查看生成的源代码并进行检查。您需要在ContentPlaceHolder中将样式应用于div。

示例：

<style>
    #placeHolderDiv {
        width: 1000px;
        height: 650px;
        background-color: #AAA;
    }
    #mainDisplay {
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 900px;
        height: 450px;
        background-color: #DDD;
    }
</style>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="placeHolderDiv">
        <table id="mainDisplay">
...

答案 1 :(得分：1)

解决方案＃1：CSS

如果这是一个CSS问题而且你很容易发现内容存在差距，那么你可能需要调整你为div设计样式的方式。尝试给出容器div（表中包含背景颜色的那个）这个类：

.container-div 
{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:100px;
}

这假设您希望容器div顶部有100px的间隙。

解决方案＃2：使用jQuery

更改背景

在内容页面的标记内添加脚本标记。在脚本标记内，放置一个jQuery代码来更改相应背景图层的类。以下示例假设您的背景

示例：

母版页HTML 

<body class="default-bg">
    <p>This is your content outside the ASP content place holder.</p>

    <asp:ContentPlaceHolder runat="Server" ID="ContentPlaceHolder1">
    </asp:ContentPlaceHolder>
</body>

内容页面HTML     

    <script>
        $(function(){
            $('.my-background-layer').removeClass('default-bg').addClass('alternate-bg');
        )};
    </script>



    <div>
        <table id="mainDisplay">
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
        </table>
    </div>
</asp:Content>

<强> CSS 

.default-bg {background:white;}
.alternate-bg {background:grey;}

请记住，ContentPlaceHolders仅用于替换母版页中的代码段。我遵循的一个好方法是在母版页的标题部分放置至少两个ContentPlaceHolders。

第一个用于默认的CSS和Javascript引用，第二个用于其他内容页面引用。如果您从内容页面中省略了这些ContentPlaceHolders，则母版页中的默认设置将生效。但是，如果要更改主要CSS或Javascript引用，则只需为该ContentPlaceHolder添加标记并为该内容页面添加代码。

如何实现jQuery

我认为你可能需要一些关于如何安装jQuery的速成课程，因为你提到你不喜欢javascript（你迟早要学习btw）。以下是体面指示的链接：

相关问题
最新问题