1

良い一日。

私は 960 グリッド レイアウトを使用しており、960 幅を超える背景ラッパーとして機能する 2 つの div が作成され、次にテキストと画像で構成される 3 列のコンテンツとして使用されます。

私の問題は、背景とコンテンツの両方で高さを 100% に設定しようとしましたが、画像とテキストが背景ラッパーに重ならないように拡張されないことです。

何か不足していますか？よろしくお願いいたします。

    <div id="contentMain" class="container_12">
        <div class="sub3 grid_4">
            <h2>Graphic Design</h2>
                <hr>
                    <p><span>I specialize in designing different graphic materials aimed to catch your target audience and bring more business to you.</span></p>
                    <div class="frameImg">
                        <img src="images/graphicdesign_image.jpg" alt="graphic design" />
                    </div><!-- end of framImg -->
        </div><!-- end of sub1 -->

        <div class="sub3 grid_4">    
            <h2>Web Design</h2>
                <hr>
                    <p><span>I can give life into your existing website and wow your visitors. When I work for a company, I always make sure they are happy with the results. I strive to think creatively for my clients, making myself a mirror of many faces.</span></p>
                    <div class="frameImg">
                        <img src="images/web_image.jpg" alt="web design" />
                    </div><!-- end of framImg -->
        </div><!--end of sub2 -->

        <div class="sub3 grid_4">    
            <h2>Motion Effects</h2>
                <hr>
                    <p>I am familiar with creating sophisticated motion graphics and cinematic visual effects using Adobe After Effects. I transform moving images for delivery to theaters, living rooms, personal computers, and mobile devices.</p>
                    <div class="frameImg">
                        <img src="images/motioneffects_image.jpg" alt="motion effects" />
                    </div><!-- end of framImg -->
        </div><!--end of sub3 -->

    </div><!-- end of contentMain -->

    <div class="clear"></div> <!-- Important! -->


#contentMainBackground {
    background:url("../images/body_bg.jpg") repeat;
    min-height:290px;
    height:auto !important;
    height:290px;
    width:100%;
    position:absolute;
}
#contentMain {
    min-height:290px;
    height:auto !important;
    height:290px;
4

2 に答える 2

0

http://blueprintcss.org/

強く推奨されるフレームワークです。複数のプロジェクトで使用しています。

このような面倒な CSS ハックを回避できます。

于 2011-12-06T01:56:28.947 に答える
0

12 列のグリッドにコンテナ div を用意して、その最上位のコンテナ要素に背景を適用してみませんか?

<div id="wrapper">

<div id="contentMain" class="container_12">
        <div class="sub3 grid_4">
            <h2>Graphic Design</h2>
                <hr>
                    <p><span>I specialize in designing different graphic materials aimed to catch your target audience and bring more business to you.</span></p>
                    <div class="frameImg">
                        <img src="images/graphicdesign_image.jpg" alt="graphic design" />
                    </div><!-- end of framImg -->
        </div><!-- end of sub1 -->

        <div class="sub3 grid_4">    
            <h2>Web Design</h2>
                <hr>
                    <p><span>I can give life into your existing website and wow your visitors. When I work for a company, I always make sure they are happy with the results. I strive to think creatively for my clients, making myself a mirror of many faces.</span></p>
                    <div class="frameImg">
                        <img src="images/web_image.jpg" alt="web design" />
                    </div><!-- end of framImg -->
        </div><!--end of sub2 -->

        <div class="sub3 grid_4">    
            <h2>Motion Effects</h2>
                <hr>
                    <p>I am familiar with creating sophisticated motion graphics and cinematic visual effects using Adobe After Effects. I transform moving images for delivery to theaters, living rooms, personal computers, and mobile devices.</p>
                    <div class="frameImg">
                        <img src="images/motioneffects_image.jpg" alt="motion effects" />
                    </div><!-- end of framImg -->
        </div><!--end of sub3 -->

    </div><!-- end of contentMain -->

</div>

    <div class="clear"></div> <!-- Important! -->

それとも、代わりに body タグに背景を適用しますか?

于 2011-12-06T03:54:14.060 に答える