Erstellen Sie eine Fußzeile Block in css

Erstelle ich ein footer-Blocks für meine website. Ich bin kein Experte mit css. Ich bin auf der Suche, um einen block erstellen, mit Polsterung auf beiden linken und rechten Seite.

Anbei das Beispiel des footer-Blocks möchte ich erstellen: Erstellen Sie eine Fußzeile Block in css

Jedoch die Fußzeile block, dass ich, der geschaffen wird, die sich über den gesamten Bildschirm. Irgendeine Idee was falsch sein könnte ?

Hier ist mein css code : 

#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;
}

Hier ist die footer.html code

<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>

Dank

  • ich habe nicht inderstood sehr gut,aber ich denke, das Sie ersetzen möchten: padding: 1.2 em 0; mit padding: 0 1.2 em;
  • Könnte Sie liefern ein Turnschuh Ihrer bestehenden footer-html-mit diesem css? Klingt für mich dein footer ist nicht enthalten innerhalb eines Containers richtig.
  • Geben Sie die gleiche width wie der div oben.
  • Danke @MackieeE, werde ich prüfen, wenn es ist Teil des Behälters.
  • Poste deinen HTML-code. Vielleicht verwenden Sie ein Turnschuh?
  • Ist, dass alle CSS? Was über die CSS-Datei für #footer-bg und #footer und .copyright?
  • Vielen Dank. ES arbeitete. Vielen Dank für Ihre Einblicke und die Zeit
  • Keine probs,=]!

InformationsquelleAutor Kiran | 2013-08-22
  1. 3

    überprüfen Sie diese FIDDLE 

     #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;
}
    InformationsquelleAutor Manish Kumar
  2. 1

    Basiert auf meinem Verständnis der oben genannten, können Sie reduzieren viel und Holen Sie sich die Fußzeile aus dem Bild. Alles, was Sie wirklich brauchen, ist unten:

    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>

    Diesem würde etwas wie das Bild am Ende Ihrer Inhalte.

    • Ich denke, es ist, weil das container-element. Ich es beheben könnte. Vielen Dank für Ihre Zeit und Hilfe.
    • Nicht sicher, was für frameworks, die Sie verwenden, aber es war viel mehr HTML-Code als nötig sein sollte. Kein Grund mehr hinzuzufügen HTML, wenn Sie nicht haben, um. Aber happy coding!
    InformationsquelleAutor robooneus
  3. 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"

    }

    Und hinzufügen :

     #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;
    }

    Und Ihren html-code für die previousRow :

    <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>
    InformationsquelleAutor Ema.H
Schreibe einen Kommentar