0

ウェブサイトを構築していて、ページの下部に 3 つの広告があります。それらは表示されますが、独自の行にあります。フローティング div の作成から div の削除まで、あらゆることを試しました。しかし、CSS のどの部分で、これらのボックスがページを横切ることができないのかがわかりません。

3 つのボックスのコードは次のとおりです。

<div class="wrapper margin-bot1">
    <div class="bg-3">
        <div class="indent">
            <div class="wrapper margin-bot">
                <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
                <img src="http://www.webstertoolbox.com/media/wysiwyg/images/logo_archilume.png" alt="" width="150" height="41" />
            </div>
            <ul class="ul-1">
                <li><a href="moreARCHI.html">Made in USA </a></li>
                <li><a href="moreARCHI.html">Expert Domestic Tech Support</a></li>
                <li><a href="moreARCHI.html">High-end installations</a></li>
                <li>Robust features</li>
            </ul>
            <a class="button-1 margin-left" href="more.html">Click to Order Now!</a>
        </div>
    </div>
    <div class="bg-3">
        <div class="indent">
            <div class="wrapper margin-bot">
                <img  src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
                <a href="moreGEN.html"> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/GenLume-Logo.png" alt="" width="103" height="41" /></a>
                <div class="extra-wrap">&nbsp;</div>
            </div>
            <ul class="ul-1">
                <li><a class="test123" href="moreGEN.html">Quick solutions</a></li>
                <li><a href="moreGEN.html">Turn-key applications</a></li>
                <li><a href="moreGEN.html">Certified</a></li>
                <li><a href="moreGEN.html">Competitive pricing</a></li>
            </ul>
            <a class="button-1 margin-left" href="moreGEN.html">Click to Order Now!</a>
        </div>
    </div>
    <div class="bg-3">
        <div class="indent">
            <div class="wrapper margin-bot">
                <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
                <div class="extra-wrap">
                    <h4>DuraLume</h4>
                    <h5>Series</h5>
                </div>
            </div>
            <ul class="ul-1">
                <li><a href="more.html">Expert Domestic Tech Support</a></li>
                <li><a href="more.html">Made in USA </a></li>
                <li><a href="more.html">Custom solutions</a></li>
                <li><a href="more.html">On-site Engineers</a></li>
            </ul>
            <a class="button-1 margin-left" href="more.html">Click to Order Now!</a>
        </div>
    </div>
</div>

CSS を正しく表示する方法がわかりませんが、実際のサイトはhttp://www.webstertoolbox.com/にあります。

Big バナーの下を見ると、ArchiLume、GenLume、および DuraLume のボックスがページを垂直に下って表示されます。それらをページ全体に表示したい。

誰かが私が間違っていたこととそれを修正する方法を教えてもらえますか?

ありがとう、フランク G.

4

2 に答える 2

1

.cms-homeクラスは、他のページ レイアウトに影響を与えないようにします。スタイルシートに追加します。

.cms-home .wrapper {
    overflow: visible; //For big banner
}
.cms-home .bg-3 {
    overflow: visible;
    width: 33%;
    display: inline-block;
}
于 2013-07-31T06:00:15.937 に答える
1

非常に簡単かつ迅速に修正できます。128 行目の homeads.css という名前の css ファイルを変更するだけです。

.bg-3 
{
    background: url(../images/bg-4.png) left top no-repeat;
    width: 33%;  // Changed this from 100% to 33%
    height: 322px; //Changed from 268px to 322px
    overflow: hidden;
    float: left;  // Added the float left
}

乾杯、サノス

編集:上記の変更を行った後、さらにいくつかの変更を追加して、少しずれてしまういくつかのことを修正する必要があります。右の境界線などは表示されなくなります。以下は、それを修正するために必要な変更です。

homeads.css の 33 行目:

.main 
{
    width: 950px; // Reduced this to match with the parent's width
    padding: 0;
    margin: 0 auto;
    position: relative;
}

sceleton.css の 25 行目:

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 
{
    float: left;
    display: inline;
    //margin-left: 5px;    Remove these 2
    //margin-right: 5px;   Remove these 2
}

EDIT2:最初のボックスが少し押し下げられています。これは、最初のボックスに div <-> がなく、2 番目と 3 番目のボックスに余分な div があるために発生します。

<div class="wrapper margin-bot">
    <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt=""><a href="moreGEN.html"> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/duralume.gif" alt="" width="103" height="41"></a>
    <div class="extra-wrap">&nbsp;</div> // THIS IS THE EXTRA DIV
</div>

ここには 2 つの選択肢があります。

1）divを追加します

<div class="extra-wrap">&nbsp;</div>

最初の箱へ

2) ボックス 2 と 3 からその div を削除します。

于 2013-07-31T05:47:14.283 に答える