0

私はおそらくここで露骨な何かを見逃していますが、これは私を狂わせています。

問題のページは、このテストサイトのホームページです。

  • ヘッダーIDは比較的配置されており、その中の要素を絶対的に配置しようとしています（2人の写真と、それらの写真の横にあるテキスト＃bodyad1と＃bodyad2）。

  • 問題は、彼らが働くことを拒否し、体に対して、＃headerの外側に絶対的に配置されることになるということです。

奇妙なことに、私はすでに別の要素をヘッダーの完全に内側に配置していて、それは機能します（リボンの写真）。ただし、他の2つの要素を挿入すると、ヘッダーが壊れます。すべてのヘッダーコンテンツがページの下部に移動します。

何かご意見は？

<div id="bodyad1">
    <img src="images/person1.png" alt="">
    <div id="bodyad1-text">
        <h3>—Featured Story—&lt;/h3>
        <p>John Smith</p>
        <h2>Toronto Criminal Lawyer</h2>
</div>

<div id="bodyad2">
    <img src="images/person2.png" alt="">
    <div id="bodyad2-text">
        <h3>—Featured Story—&lt;/h3>
        <p>John Smith</p>
        <h2>Toronto Criminal Lawyer</h2>
    </div>
</div>

<div id="adlogo">
    <img src="images/advocatedaily-logo.png" alt="Advocate Daily dot com Logo">
    <h2>Ontario's Legal News</h2>
</div>
 <div id="adsash"></div>

<div class="clear"></div>

CSS（はい、自分のスタイルをより簡潔にすることができると思います）

/*header*/
#header {
  display: block;
  border-bottom: 1px solid #9e0505;
  position: relative;
}
/*   Featured Lawyer Body Shots   */

#bodyad1 {
    display:block;
    position: absolute;
    width: 220px;
    height: 94px;
    bottom: 0px;
    left: 60px;
}

#bodyad2 {
    display:block;
    position: absolute;
    width: 220px;
    height: 94px;
    bottom: 0px;
    right: 60px;

}

#bodyad1 img{
    float:right;
    display:block;
}

#bodyad1-text {
    height:94px;
    float:right;
}

#bodyad1-text  h3 {
    font: italic 10px helvetica, arial, sans-serif;
    color: #666;
    text-align: right;
}

#bodyad1-text  p {
    font: normal bold 11px helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #cd1713;
    text-align: right;
}

#bodyad1-text  h2 {
    font: normal bold 11px helvetica, arial, sans-serif;
    color: #666;
    text-align: right;
}

#bodyad2 img {
    float:left;
    display:block;
}

#bodyad2-text {
    height: 94px;
    float: left;
}

#bodyad2-text  h3 {
    font: italic 10px helvetica, arial, sans-serif;
    color: #666;
    text-align: left;
}

#bodyad2-text  p {
    font: normal bold 11px helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #cd1713;
    text-align: left;
}

#bodyad2-text  h2 {
    font: normal bold 11px helvetica, arial, sans-serif;
    color: #666;
    text-align: left;
}
4

1 に答える 1

1

終了divタグが欠落していたことが判明しましたが、インデントスタイルのために実際に閉じたように見せました。

投稿するのはかなりばかげたことです。続ける。

@pebblありがとうございます。

于 2013-02-21T15:14:27.500 に答える