-1

現在、多くのフォーラムや投稿を読んでいますが、私の問題を正確に把握しているものは何もないようです。ページの下部に幅 100% のフッター (WordPress の空白のテーマを使用) がありますが、心配する必要はありません。HTML 5 フック内にある "foot" div 内に 3 つの div があります。その内側のdiv「足」を同じ幅にして、その上のラッパーと同じままにして、ラッパー@ 960px幅と同じ幅に見えるようにします。これを実現する方法を見つけるのに苦労しています。http://newsite.dramanonotebook.comで、私のコードと css を見ることができます。私が望むものを実現するためにページ/フッターのテンプレートを変更する必要があるとしても、あなたが最善の解決策だと思うものを教えてください.

<footer>ユーザーウィンドウの幅を拡大するために幅を100％にし、幅<div id="foot">を960pxに制限したいと考えています。これがキャッチです。<div id="foot">上記のサイトの残りの部分と垂直方向の位置合わせを維持したいと考えています。<div id="wrapper"></div>を指しています。

<div id="wrapper" class="hfeed">
<header>

<div id="branding">
</header>
<div id="container">
<div id="main" class="clearfix">
<!-- I have removed all the bloat in the middle to keep to my issue at hand -->
</div>
<div class="clear"></div>
</div> <!-- end of container div -->
</div> <!-- end of wrapper div -->
<footer> <!-- what I was referring to by HTML hook, my apologies "element"-->
<div id="foot">
    <div id="left-footer">
        <div id="trustwave_img">
            <script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?code=5d243334f2474482a03b5e1f5d5fe4f5"></script>
        </div>
    </div>
    <div id="center-footer">

    </div>
    <div id="right-footer">

    </div>
</div>
</footer>

以下は、私が現在持っている関連する CSS です。必要な場所に到達するために改善し、途中で何かを学ぶのに役立つ賢い人々がここにいると確信しています:)。

body {
  font-size: 16px;
  font-family: Tahoma, Helvetica, Verdana;
  color: #424242;
  line-height: 1.4em;
  background: #fdffd0;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  Position: relative;
  background: #fff;
  padding: 0 10px;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;  

}
#container {
  position: relative;
  overflow: hidden;
  clear: both;
    padding-bottom: 40px;
}
footer {
  clear:both;
  width: 100%;
  height: 150px;
    border-top: 1px solid #eee;
    background-color: #A4EDA1; /*#9BE398;*/
    opacity: .8;
}
footer #foot {
    width: 960px;
    height: 150px;
    margin-left: 127px;
    position: relative;
}
#left-footer {
    width: 241px;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}
#center-footer {
    width: 496px;
    margin-left: 365px;
    height: 100%;
}
#right-footer {
    width: 240px;
    float: right;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

ありがとう、ジム

4

2 に答える 2

1

#footマージンオートで中央に配置します。

footer #foot {
    width: 960px;
    height: 150px;
    margin: 0 auto;
    position:relative;
}
于 2013-02-24T11:29:46.457 に答える
0

margin: 0 auto;要素に対して が機能しない理由は、その要素#footに内部<div>s を絶対に配置しているためです。それらを絶対に配置すると、ドキュメントのデフォルト フローから除外され、マージンとフロートは適用されなくなります。

必要なのは削除することだけです...

position: absolute;
top: 0;
left: 0;

...#left-footerおよび#right-footerセレクターから。

その要素に 3 列のフッターを作成する場合、 child ごとに異なるフロート、マージンなどを指定する必要はありません<div>。代わりに、次を使用します。

footer {
    overflow: hidden; /* Used to clear floats */
    width: 100%;
}
footer > div {
    box-sizing: border-box; /* To define the total width (padding plus border, if any) at the specified width and not more */
    float: left;
    width: 33%;
}

p/s: あなたの CSS にはいくつかの問題があります - 要素のフロートをクリアする必要はなく<footer>(意味がありません)、positionプロパティのスペルが#wrapper. また、投稿した HTML コードで適切に閉じられていませ<div id="header">ん。

于 2013-02-24T12:30:02.303 に答える