Spalten in Fußzeile

Question

Ich versuche, die Fußzeile von this Website als Teil eines Schulprojekts zu replizieren. Bisher habe ich wie dies meine divs herausgefunden, dass strukturiert sein sollte:

<div class="wrapper"> 
     <div class="top-side">...</div> 
     <div class="content">...</div> 
     <div class="footer"> 
      <div class="footer-col"> 
       <h4>Column header</h4> 
       <ul> 
        <li>list item1</li> 
        <li>list item2</li> 
       </ul>      
      </div> 
     </div> 
    </div> 

Und die CSS ich verwendet habe, ist:

.wrapper .footer { 
    bottom:0; 
    width:100%; 
    margin: 5px; 
    color: #FFFFFF; 
    background-color: black; 
} 

.footer .footer-col { 
    display: block; 
    float: left; 
    margin: 0 20px 0 0; 
    width: 20%; 
} 

.footer .footer-col ul { 
    list-style: none; 
    display: inline; 
    overflow: hidden; 
} 



.wrapper .footer .clear { 
    clear: both; 
} 

Dies ist meine gesamte Code so weit. Ich kann nicht herausfinden, was mehr zu meinem CSS hinzugefügt werden sollte, damit dies so funktioniert, wie es gewünscht wurde, die linke Ausrichtung jedes Elements in jeder Spalte und die fett gedruckten Header für jede Spalte. (Ich habe diesen Teil mit <h4> gelöst)

Irgendwelche Tipps?

Answer 1

Wenn Sie die gleiche footer der Website replizieren wollen, die Sie gesagt haben, denke ich, ein guter Weg, es zu tun ist, eine ähnliche HTML-Struktur als auch zu replizieren.

In diesem Fall überprüfen Sie den Code mit dem Browser-Inspektoren und Sie werden sie es 5 Gruppen von h4 + ul Listen Überschrift.

Here's a hint to do it in a JSFiddle I've made.

CSS

.container {overflow: hidden; background: #000; color: #fff; } 
.footer-tab { float: left; width: 20%; font-family: Arial; } 

ul { padding-left: 0; } 
ul li { list-style: none; margin: 10px 0; font-size: 12px; } 
ul li a { font-weight: bold; } 

ich nicht den ganzen Code gemacht hat, aber man kann sehen, wie ich glaube, eine bessere Struktur, es zu erreichen.