2

Web サイト (VS2010、asp.net、VB) があり、マスター ページを使用しています。他にもいくつかのページがあり、そのうちの 1 つで背景色をコンテンツ プレースホルダーだけに設定したいと考えています。スタイル シートを使用しており、.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 ページにすべてを表示するようにコードを更新

4

2 に答える 2

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">
...
于 2013-10-04T13:42:05.510 に答える
1

解決策 #1: CSS

これが CSS の問題であり、コンテンツの周りに単純にギャップを見つけている場合は、div のスタイル設定方法を調整する必要があります。コンテナ div (背景色を保持するテーブルの周りの 1 つ) にこのクラスを与えてみてください。

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

これは、コンテナ div の上部に 100 ピクセルのギャップが必要であることを前提としています。

解決策 #2: jQuery で背景を変更する

コンテンツ ページの タグ内にスクリプト タグを追加します。script タグ内に 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 は、マスター ページ内のコード セグメントのみを置き換えるように設計されていることに注意してください。私が従う良いテクニックは、マスター ページのヘッダー セクションに少なくとも 2 つの ContentPlaceHolder を配置することです。

1 つ目はデフォルトの CSS と Javascript の参照用で、2 つ目は追加のコンテンツ ページの参照用です。これらの ContentPlaceHolder をコンテンツ ページから除外すると、マスター ページの既定の設定が有効になります。ただし、メインの CSS または Javascript 参照のいずれかを変更する場合は、その ContentPlaceHolder のタグを追加し、そのコンテンツ ページのコードを追加するだけで済みます。

jQueryの実装方法

javascriptが嫌いだと言っていたので、jQueryのインストール方法について少し集中コースが必要かもしれないと思いました（遅かれ早かれそれを学ぶ必要があります）。まともな指示へのリンクは次のとおりです。

于 2013-10-04T13:50:46.910 に答える