私はちょっと心配していませんが、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 & 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&Itemid=166&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>
はい、それはだった:あなたははるかに少ないコードで欲しい大まかなビジュアル。私がこの質問を投稿するとすぐに、それはそれが何であるかを理解しました。私はそれを削除することを忘れてしまった。お返事をありがとうございます! – kjkentner