2016-08-22 11 views
1

私はちょっと心配していませんが、CSSに2つの背景イメージを組み込んだホームページを作り直そうとしています。私はトップイメージとボトムイメージの1つを使用しようとしています、そして、中央にリンクとイメージを持つテーブルがあります。しかし、何らかの理由で、私はそれをひとつの滑らかなイメージのように見せるためにすべて一緒に引っ張るのが難しいです。なぜ私のCSSは協力していませんか?

たとえば、私のコンテナクラス(以下に示す)は、コンテナdiv全体ではなくtopBoxクラスの周りに境界線を配置します。私はすべての3つのdivs(コンテナクラスから来る)の周りに1つの境界線を持っているように見えるように、その1つの画像。ここに私のHTMLとCSSがあります。

私は間違っていますか?ご協力いただきありがとうございます!

 #Container { 
 
     float:left; 
 
     width: inherit; 
 
     height: 400px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     border:1px solid #000000; 
 
     } 
 

 

 
     .boxTop { 
 
     position: relative; 
 
     left: 100; 
 
     top: 100; 
 
     width: inherit; 
 
     height: 95px; 
 
     background-image:  url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg); 
 
     background-repeat: no-repeat; 
 
     /*place background image css code here and remove line above*/ 
 
      background-position: left 0px top 0px; 
 
    background-size: 300px; 
 

 
     } 
 

 
     .box { 
 
     position: relative; 
 
     left: 100; 
 
     top: 100; 
 
     width: 350px; 
 
     height: 550px; 
 
     border:0px solid #000000; 
 
} 
 

 
     .boxBtm { 
 
     position: relative; 
 
     left: 100; 
 
     top: 100; 
 
     width: inherit; 
 
     height: 95px; 
 
     background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif); 
 
     /*place background image css code here and remove line above*/ 
 
     background-repeat: no-repeat; 
 
      background-position: left 0px bottom 0px; 
 
    background-size: 300px; 
 
     }
<div id="Container"> 
 
    <div class="boxTop"></div> 
 
    <div class="box"><table width="300px"> 
 
<tbody> 
 
<tr> 
 
<td> 
 
<table cellspacing="0" cellpadding="6"> 
 
<tbody> 
 
<tr> 
 
<td valign="top"><a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" /></a></td> 
 
<td valign="top"> 
 
<h3><a href="/your-health/healthy-lifestyles/become-a-member-sp-1672965733">Become a Member</a></h3> 
 
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td valign="top"><a href="/component/wrapper/?Itemid=203"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" /></a></td> 
 
<td valign="top"> 
 
<h3><a href="/your-health/healthy-lifestyles/classes-support">Classes &amp; Support</a></h3> 
 
<p>Learn more about the classes, support groups, and health screenings we offer.</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td valign="top"><a href="/component/hwdvideoshare/?task=viewcategory&amp;Itemid=166&amp;cat_id=5"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" /></a></td> 
 
<td valign="top"> 
 
<h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-tv">Watch the TV Segment</a></h3> 
 
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td valign="top"><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine"><img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" /></a></td> 
 
<td valign="top"> 
 
<h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">Read the Magazine</a></h3> 
 
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
</tbody> 
 
      </table></div> 
 
    <div class="boxBtm"></div> 
 
</div>

答えて

2

非常に簡単な答えは、単にID #Containerの絶頂を削除し、それがうまくいきます。 )

+0

はい、それはだった:あなたははるかに少ないコードで欲しい大まかなビジュアル。私がこの質問を投稿するとすぐに、それはそれが何であるかを理解しました。私はそれを削除することを忘れてしまった。お返事をありがとうございます! – kjkentner

2

具体的にはheightをコンテナに設定しているため、borderはその高さにしかなりません。高さを750ピクセルに設定すると、動作します。

#Container { 
 
    float: left; 
 
    width: inherit; 
 
    height: 750px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 1px solid #000000; 
 
} 
 
.boxTop { 
 
    position: relative; 
 
    left: 100; 
 
    top: 100; 
 
    width: inherit; 
 
    height: 95px; 
 
    background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg); 
 
    background-repeat: no-repeat; 
 
    /*place background image css code here and remove line above*/ 
 
    background-position: left 0px top 0px; 
 
    background-size: 300px; 
 
} 
 
.box { 
 
    position: relative; 
 
    left: 100; 
 
    top: 100; 
 
    width: 350px; 
 
    height: 550px; 
 
    border: 0px solid #000000; 
 
} 
 
.boxBtm { 
 
    position: relative; 
 
    left: 100; 
 
    top: 100; 
 
    width: inherit; 
 
    height: 95px; 
 
    background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif); 
 
    /*place background image css code here and remove line above*/ 
 
    background-repeat: no-repeat; 
 
    background-position: left 0px bottom 0px; 
 
    background-size: 300px; 
 
}
<div id="Container"> 
 
    <div class="boxTop"></div> 
 
    <div class="box"> 
 
    <table width="300px"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <table cellspacing="0" cellpadding="6"> 
 
       <tbody> 
 
       <tr> 
 
        <td valign="top"> 
 
        <a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733"> 
 
         <img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" /> 
 
        </a> 
 
        </td> 
 
        <td valign="top"> 
 
        <h3><a href="/your-health/healthy-lifestyles/become-a-member-sp-1672965733">Become a Member</a></h3> 
 
        <p>Join Healthy Lifestyles and enjoy the benefits of membership.</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td valign="top"> 
 
        <a href="/component/wrapper/?Itemid=203"> 
 
         <img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" /> 
 
        </a> 
 
        </td> 
 
        <td valign="top"> 
 
        <h3><a href="/your-health/healthy-lifestyles/classes-support">Classes &amp; Support</a></h3> 
 
        <p>Learn more about the classes, support groups, and health screenings we offer.</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td valign="top"> 
 
        <a href="/component/hwdvideoshare/?task=viewcategory&amp;Itemid=166&amp;cat_id=5"> 
 
         <img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" /> 
 
        </a> 
 
        </td> 
 
        <td valign="top"> 
 
        <h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-tv">Watch the TV Segment</a></h3> 
 
        <p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td valign="top"> 
 
        <a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine"> 
 
         <img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" /> 
 
        </a> 
 
        </td> 
 
        <td valign="top"> 
 
        <h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">Read the Magazine</a></h3> 
 
        <p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p> 
 
        </td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div class="boxBtm"></div> 
 
</div>

2

これがずっと簡単することができます - あなただけの1つのラッパーのdivではなく、3が必要です。 (のコンテンツをpのタグが含まれている場所にドロップすると、今のところこれは機能します)

- ありがとう

.box { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    border-radius: 0 0 9px 9px; 
 

 
    /* You can specify multiple background images like this: */ 
 
    background-image: url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 

 
    /* first position goes with the first image url and vice versa */ 
 
    background-position: top, bottom; 
 

 
    /* 130px padding on top to create room for the "lifestyles" logo 
 
    20px on the sides for breathing room 
 
    50px at the bottom to create room for the green gradient 
 
    tweak these values till you like the spacing */ 
 
    padding: 130px 20px 50px; 
 
}
<div class="box"> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
</div>

+0

ありがとう、ジャック。はい - 私は恐ろしいテーブルがどれくらいあるかを知っています。私はdivの柔軟性を好みますが、現在実行しているサイトでは古いコードを使用しています。しかし、今私はそれについて考えている、私は先に進んで、この特定のプロジェクトに使用するかもしれない。もともと私は両方のURLで行ったように私のCSSを使用しましたが、協力していませんでした。今私はバックグラウンドポジションオプションを使用していなかったのでそれが表示されます。しかし、いずれにしても、私はあなたのフィードバックに感謝します。他のヒントは、私はいつも開いている!すてきな一日を – kjkentner

関連する問題