BayuBayu’s Blog

Tutorial HTML dan CSS : Membuat daftar link pada footer

Tutorial kali ini, berupa studi kasus bagaimana cara membuat footer seperti yang terlihat pada banyak situs-situs pada umumnya. Seperti gambar berikut ini:

Tampak sederhana kan. Tetapi yang difokuskan disini adalah penyusunan daftar link pada footer. Dalam kasus ini, penggunaan unordered list (tag <ul></ul>) lebih dianjurkan untuk struktur yang lebih semantik.

Langsung saja, berikut ini kodenya:

kode html:

<div id="footer" class="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<p class="copyright">Copyright &copy; 2009. Company Name. All Rights Reserved</p>
</div>

Penyusunan menu terlihat menggunakan unordered list. supaya link-link menu tersebut bisa berbaris sejajar, maka itu adalah tugasnya css..

Berikut ini kode CSS nya:

body {
font-family:Verdana;
font-size:11px;
}#footer {
background:#38393A;
color:#A5A5A5;
padding:25px 0px;
text-align:center;
}#footer a {
color:#cecece;
text-decoration:none;
}#footer ul {
padding:0px;
margin:0px;
}#footer ul li {
display:inline;
padding:0px 9px;}

Mudah kan

Menambahkan garis di sela-sela link

Contoh berikutnya adalah menambahkan garis di sela-sela link. Banyak juga situs yang memakai desain seperti ini, seperti gambar berikut ini.

Pada css, kita hanya perlu menambahkan style border-right untuk tiap-tiap list item.
Alhasil, link yang paling kanan juga bakal menampilkan garis di sebelah kanannya. hal ini kurang bagus, karena itu tambahkan 1 selector kelas lagi bernama .last khusus untuk link yang paling kanan.

#footer ul li
{
display:inline;
padding:0 9px;
border-right:solid 1px #cfcfcf;
}
#footer ul li.last {
border-right:none;
}


kode html nya menjadi seperti berikut:

<div id="footer" class="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li class="last"><a href="#">FAQ</a></li>
</ul>
<p class="copyright">Copyright &copy; 2009. Company Name. All Rights Reserved</p>
</div>

Mudah kan… Segitu dulu tutorial kali ini