0

私はこのサイトを持っています: www.canalonesbastimar.com IE7 の電話番号の下に facebook ボタンを配置しようとしていますが、できません.. コンテナーの相対位置と facebook ボタンの絶対位置を使用しています..

<div class="tel-fb">
    <div class="telicon my-icons-telicon" style="float: left"></div>
    <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
      <div itemprop="telephone" class="telephone">
        <a href="tel:+622585749">622 585 749</a>
      </div>
      <div itemprop="telephone" class="telephone">
        <a href="tel:+636740393">636 740 393</a>
      </div>
    </div>
    <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>


  .tel-fb {
    float: right;
    display: inline-block;
    position: relative;
    z-index: 99;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      position: absolute;
      top: 250px;
      right: 3px;
    }
  }

アップデート：

最後に、Facebook のようなボタンのラッパーを追加しました。

<head>
<style type="text/css">
.tel-fb {
  float: right;
  display: inline-block;
  position: relative;
  z-index: 99;
}

#tel {
  float: right;
}

#tel a {
  font-size: 29px;
  color: #009846;
  font-weight: bold;
}

.wrapper {
  position: absolute;
  top: 50px;
}
.jander {
  background: red;
}
.zero {
    margin-left: 50px;
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
}
.one {
  position: absolute;
  top:50px;
}
</style>
</head>
<body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=151887748332358";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="zero">

    <div class="wrapper">
      <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>
<div class="one">jfklas</div>
</div>
    <div class="tel-fb">
      <div class="telicon my-icons-telicon" style="float: left"></div>
      <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
        <div itemprop="telephone" class="telephone">
          <a href="tel:+622585749">622 585 749</a>
        </div>
        <div itemprop="telephone" class="telephone">
          <a href="tel:+636740393">636 740 393</a>
        </div>
      </div>
    </div>
</body>
4

1 に答える 1

0

.fb-likeクラスcssの括弧内に配置したため、クラスのcssはどれも機能していません.tel-fb。

したがって、この;

.tel-fb {
    float: right;
    display: inline-block;
    position: relative;
    z-index: 99;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      position: absolute;
      top: 250px;
      right: 3px;
    }
  }  // <--- Notice bracket here putting .fb-like and #tel inside .tel-fb

これのはずです;

.tel-fb {
  float: right;
  display: inline-block;
  position: relative;
  z-index: 99;        
}

#tel {
  float: right;
}

#tel a {
  font-size: 29px;
  color: #009846;
  font-weight: bold;
}

.fb-like {
  position: absolute;
  top: 250px;
  right: 3px;
}

#telCSS もクラス内にあることに注意してください。tel-fbつまり、CSS もおそらく機能しません。

于 2013-10-01T08:38:07.457 に答える