1

テンプレートを使用するカスタム PHP CMS があります。レイアウトの中心的なコンテンツである boxmain と呼ばれるクラスを含む、サイトの全体的な外観を設定する layout.tpl があります。その中で、boxmain クラスを含む style.css ファイルを定義しました。

.boxmain { 
    background-color:#F5F5F5; 
    width:1025px;
    height:auto; 
    margin:0 auto; 
    font-size:11px;
    overflow: hidden;
    padding-top: 15px;
    padding-left: 5px;
    padding-bottom: 15px;
}

その上に、イメージ バナーのクラスがあります。これには、コンテンツとバナーの間にスペースを作成するための余白も含まれます。

div#banner {
    background: url("../images/banners/banner1.jpg")  repeat scroll center center rgb(0, 0, 0);
    width: 100%;
    height: 270px;
    z-index: 1;
    margin-bottom: 25px; 
    -webkit-box-shadow:  0px 2px 15px 2px ;
    box-shadow: 0px 2px 15px 2px ;
}

私がやりたいことは、スタイルシートを変更することなく、バナーとボックスメインのすべてのパディングとマージンを削除できるようにすることですが、代わりにテンプレートに含めることです。何らかの理由で、テンプレートでこれを行うと機能せず、Cufon が壊れるだけです。

<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>

したがって、子要素（基本的にはテンプレートのすべてのコンテンツ）を親要素（layout.tplで定義されたboxmain）の外に配置すると、マージンとパディングがクリアされるのではないかと考えていましたが、どうすればこれを行うことができ、それはうまくいくでしょうか？

テンプレートのコンテンツは基本的に、いくつかの div タグといくつかの画像です。

4

1 に答える 1

1

これは動作中のJSFiddleです。

<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>

<div id="banner">Banner content</div>
<div class="boxmain">Main content</div>

インライン スタイルはメインのスタイルシートを簡単に上書きするので、これは順序の問題だと思います。おそらく、インライン スタイルの後にメイン スタイルシートを含めます。これにより、機能しない理由が説明されます。

インラインも機能<style>しboxmainます

<div id="banner">Banner content</div>
<div class="boxmain">

    <style type="text/css">
    div.boxmain { margin: 0; padding; 0; }
    div#banner { margin: 0; padding: 0; }
    </style>

    Main content
</div>

したがって、$page_contentオーバーライドするスタイルを前に付けることも同様に行う必要があります。JSFiddle
を参照してください

免責事項: これは Firefox 16 のみでテストされています。

于 2013-01-23T23:29:34.967 に答える