5

私のウェブサイト christianselig.com では、私のフッターは about.html ページ (http://christianselig.com/about.html) を除くすべてのページに表示されますが、何らかの理由でトップ付近に表示されます。

ページは 2 つのフロート div (左に 1 つ、右に 1 つ) で構成されており、div が両方をラップしています。関連する CSS と HTML は以下で見つけることができます。

HTML:

<div class="footer-wrapper">
            <div class="footer">
                <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

CSS:

.footer-wrapper {
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #ccc;
    margin: 15px auto 0 auto;
    overflow: hidden;
    padding: 8px 0 5px 0;
}

    .footer {
        color: #808080;
        clear: both;
        font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
        font-size: 0.7em;
        width: 900px; 
    }

        .copyright {
            float: left;
            margin: 0 0 5px 60px;
        }

        .footer ul {
            float: right;
            margin: 0 60px 5px 0;
        }

        .footer li {
            display: inline;
            padding-right: 12px;
        }

            .footer li:last-child {
                padding-right: 0;
            }

        .footer a {
            color: #808080;
            text-decoration: none;
        }

        .footer a:hover, .footer a:active {
            text-decoration: underline;
        }

どんな助けでも大歓迎です！

4

2 に答える 2

2

あなたの問題は内部にありlr-wrapperます。あなたの2つの要素は幅全体left-sideをright-side埋めず、他のフローティング要素が収まるように間にスペースを残しています。

他のすべての要素が下に留まるようにするには、フッターの前に a を追加する必要がありclearます。フッター div のすぐ上にこれを追加することで実行できます。

<div style="clear: both;"></div>

または、これをcssに追加することで正しい方法で行うことができclearfix、フローティングを壊すために何かが必要なときにクラスを適用することができます:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

詳細については、http: //html5boilerplate.com/を参照してください。

于 2012-09-13T22:39:48.717 に答える
1

必要なのは、既存のスタイルとともに以下を追加することだけです。

.lr-wrapper { overflow:hidden; }

より詳しい情報

于 2012-09-13T22:40:50.087 に答える