1

Web サイトのフッター ブロックを作成しています。私は の専門家ではありませんcss。左側と右側の両方にパディングがあるブロックを作成しようとしています。

添付したフッターブロックの例は、私が作成したいものです:ここに画像の説明を入力

ただし、作成したフッター ブロックは画面全体に広がっています。何が間違っている可能性がありますか？

ここに私のcssコードがあります:

#footer-row1{
    margin-top: 80px;
    padding: 1.2em 0;
    background: #000;
    bottom: 0;
    margin-right: -33px;
    font-family: "Fjalla One", Verdana, Geneva, sans-serif;
    font-size: 0.95em;
    text-transform: uppercase;
}

ここに footer.html コードがあります

<div id="footer-row1">
                    <div id="footer-bg">
                        <div id="footer" class="container_24">
                            <div class="copyright">
                              #COPYRIGHT#&COPY;{var name='copyright_year'} {var name='sitename'}. &nbsp;&nbsp;{var name='footer_menu'}
                          </div>
                        </div>
                    </div>
                </div>

ありがとう

4

3 に答える 3

3

このフィドルをチェックしてください 

 #footer-row1{
    margin-top: 80px;
    padding: 1.2em 0;
    background: #000;
    bottom: 0;
    margin-right: -33px;
    font-family: "Fjalla One", Verdana, Geneva, sans-serif;
    font-size: 0.95em;
    text-transform: uppercase;

}

.copyright{
    text-align: center;
    color: #FFF;
}
于 2013-08-22T14:33:20.567 に答える
1

上記の私の理解に基づいて、多くを削減して画像からフッターを取得できます。本当に必要なのは以下のとおりです。

CSS

footer {
    padding: 1.2em 0;
    background: #000;
    font-family: "Fjalla One", Verdana, Geneva, sans-serif;
    font-size: 0.95em;
    text-transform: uppercase;
    text-align:center;
    /* you probably need to add some extra styles here */
}

HTML

<div class="footer">
    #COPYRIGHT#&COPY;{var name='copyright_year'} {var name='sitename'}. &nbsp;&nbsp;{var name='footer_menu'}
</div>

これにより、コンテンツの下部に画像のようなものが配置されます。

于 2013-08-22T14:22:21.320 に答える
0

CSS：

#footer-row1{
        margin-top: 80px;
        padding: 1.2em 0;
        background: #000;
        bottom: 0;
        margin-right: -33px;
        font-family: "Fjalla One", Verdana, Geneva, sans-serif;
        font-size: 0.95em;
        text-transform: uppercase;

    //add
        text-align: center;
        display: block;
        width: 100%;
        clear: both; //because you have some float on the previous "row"

    }

そして追加：

 #footer-row1 a{ //for you link
        font-family: "Fjalla One", Verdana, Geneva, sans-serif;
        font-size: 0.95em;
        text-transform: uppercase;
        color: #3399FF; //blue for example
    }

    #footer-previousRow{ //the previous row with list items
        display: block;
        width: 100%;
        height: 260px;
    }

    #footer-previousRow ul.listItem{
        list-style: none;
        list-style-type: none;
        min-height: 36px;
        margin: 0;
        overflow: hidden;
        display: block;
        float: right;
    }

    ul.listItem li{
       color: #CCCCCC;
    }

そして、 previousRow の html コード:

<div class="footer-previousRow">
    <ul class="listItem">
        <li>Contact</li>
        <li>Social</li>
    </ul>
</div>

<div id="footer-row1"> // your actual code
                    <div id="footer-bg">
                        <div id="footer" class="container_24">
                            <div class="copyright">
                              #COPYRIGHT#&COPY;{var name='copyright_year'} {var name='sitename'}. &nbsp;&nbsp;{var name='footer_menu'}
                          </div>
                        </div>
                    </div>
                </div>
于 2013-08-22T15:22:45.517 に答える