2

Ok。これは本当に奇妙で、似たようなものを探すのに数え切れないほどの時間を無駄に費やしてきました. コードを追加しますが、ビジュアルも必要になるので、私の言いたいことを示すためにいくつかのトリミングされた画像を含めます。

私の目標: シンプル。フッターの上端から約 25 ピクセル下に、フッターの水平ナビゲーション バーを押します。(フッターには静的な背景画像があります) 使用されるコード: #footer ul {margin:25px} 結果: 変更なし。

は？だから私はそれで遊んだ...いくつかのバリエーションを試しましたが、何もうまくいきませんでした. 今、回避策を見つけました...マージンの代わりにパディングを使用しました...しかし、マージンが機能しないことが気になったので、どこかでコードを台無しにしていないかどうかを調べ続けました。

ボディにフロートを使っていたのですが、キャンセルしました。検証はすべて問題ありませんでした。そのため、誤って Firebug に出くわしました (以前は使用したことがなく、その方法はまだわかりません) が、目的のないクリックで奇妙なことに気付きました... フッター ul をクリックすると、フッターとコンテンツが重なっているボックスが表示されます強調されました。そのため、マージンが存在するように見えましたが、ナビリストを押し下げる代わりに...ナビリストを静的に保ち、コンテンツに拡張しました。

は？そこで、ちょっとした実験をしました。何が起こっているのかを正確に把握するために、コンテンツとフッターと ul の div の周りに明るい境界線を作成しました。(私のコンテンツ セクションには、コンテンツ (左にフローティング)、サイドバー (右にフローティング)、および両方を含む contentWrapper の 3 つの div があります)。

ボーダーをオンにすると、「outerContent」div が折りたたまれていることに気付きました。エリアの高さのわずか 20% 程度です。それで、いくつかの（長い）調査の後、オーバーフロー自動修正を思いつきました。そして、私はまだそれをよく理解していませんが、うまくいきました. contentWrapper がフッターに合わせて拡張され、フッター ul が必要な場所に移動しました。それで問題は解決しましたよね？うーん...正確ではありません。

私のプレビューはうまくいったので、戻って境界線を削除し、残りの書式設定を行うことができました. もう一度プレビューしたときだけ... フッター ul は最初の場所に戻っていました。フッターの最上部の端。

境界線をもう一度作成しました... div は問題ないように見えましたが、そのマージンを確保するために contentWrapper がフッターのわずかに上に押し出された点が異なります。今、本当に奇妙なことは、フッターの周りに境界線を配置すると... ulマージンが機能することです。外すと… ULは元の場所に戻ります。

なんと#$@%!? 回避策 (パディング) は知っていますが、自分が犯した間違いをさらに悪化させ、今後も繰り返し繰り返すことを心配しています (この後、別の Web サイトを作成する必要があります)。誰かが私が物事を台無しにするために何をしたかを理解できれば...それは大歓迎です。

#contentWrapper {
    overflow: auto;
    padding: 20px 10px;
}
#content {
    float: left;
    width: 660px;
}
#content h1 {
    padding: 0 0 20px;
}
#content h2 {
    padding: 20px 0 10px;
}
#content p {
    line-height: 160%;
    text-align: justify;
}
#content img {
    float: left;
    margin-right: 10px;
}
#content ul {
    line-height: 160%;
    list-style: disc outside url("../images/Bullet-artsy1.png");
    margin: 0 0 10px 325px;
    padding: 10px 0;
}
#content .info {
    margin: 5px 0 10px 250px;
}
#rightSide {
    float: right;
    line-height: 140%;
    padding: 0 10px;
    width: 220px;
}
#rightSide h2 {
    margin-top: 10px;
    padding-bottom: 10px;
}
#rightSide p {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 16px;
    text-align: justify;
}
#rightSide img {
    display: block;
    margin: 5px auto;
}
#footer {
    background-image: url("../images/TCS-Footer1b-plain-230px h.png");
    background-repeat: no-repeat;
    clear: both;
    height: 230px;
}
#footer ul {
    list-style: none outside none;
    margin: 25px;
    text-align: center;
}
#footer ul li {
    display: inline;
    margin: 30px 0;
}
#footer ul li a {
    color: #E8FAFF;
    padding: 30px;
}
#footer p {
    color: #E8FAFF;
    text-align: center;
}
#footer img {
    bottom: -60px;
    position: relative;
    right: -900px;
}

このサイトはアクティブではありませんが、私が話していることを示す画像付きのワード ドキュメントをアップロードしました。これは一時共有へのリンクです: http://temp-share.com/show/dPf3UCobW

おそらく私が間違っていた場所を教えてくれるすべての人に前もって感謝します。

4

3 に答える 3

0

まず、余白が消えないようにするには、#footer ul要素の余白をパディングに変更するか、要素に 1 ピクセルのパディングを追加します#footer。

このフィドルでは、パディングを 1px に設定し#footer、高さを 2px 減らして補正しています。

フィドル

#footer ul {
    list-style: none outside none;
    padding: 40px;
    text-align: center;
}

また

#footer {
    background-color: #DDDDDD;
    background-repeat: no-repeat;
    clear: both;
    color: #808080;
    font-size: 12px;
    height: 228px;
    padding: 1px;
}

CSS を見ると、デフォルトではブロック要素ではないため、タグのパディング設定<a>が期待どおりに機能しません。これを css に追加して、正しくパディングします。

#footer ul li a { 
    display: inline-block;
 }

同様に、ul liインラインブロックにする必要があります。

それで ...

#footer ul li {
    display: inline-block;
    margin: 30px 0;
}
#footer ul li a {
    display: inline-block;
    color: #E8FAFF;
    padding: 30px;
}

基本的に、親要素と子要素を含めて上下のマージンが接する場合、最大のマージンが使用されますが、マージンは最も外側の要素の外側に押し出されることに注意してください。

于 2013-07-19T07:35:55.143 に答える
0

これは今後の参考用です。上記の Dom Day を補完するために、次のリンクを追加したかっただけです。私はまだこのイベントを概念化するのに苦労していますが、2 つのリンクの間で、「ダミーのマージンの隣接/崩壊」サイトに相当するものを見つけるまで、それを調査するのに役立ちます. www.w3.org/TR/CSS2/box.html - Web ページの下部付近にある詳細。

于 2013-07-19T23:37:19.540 に答える