Tulisan ini mungkin bisa menjadi jawaban bagi Anda yang bertanya tentang tampilan menubar horizontal dengan sintaks list html. Seperti yang kita ketahui, sintaks list selalu dimulai dengan kode <ol> atau <ul>, dan di dalamnya terdapat item-item yang dimulai dengan kode <li>. Trik ini mencoba memaparkan tampilan list dengan model horizontal, bukan vertikal. Keadaan ini biasanya digunakan untuk membuat menubar utama yang terdapat pada sebuah website. Saya sempat mengakali pembuatan menubar dengan menyusun <div> secara horizontal. Tetapi sepertinya cara ini tidak biasa dilakukan. Sebut saja untuk themes wordpess, hampir setiap menubar yang digunakan oleh theme wordpress menggunakan perintah list. Perintah list yang di representasikan dalam bentuk list secara horizontal. Nah berikut ini saya tuliskan listing sintaks html dan css untuk membuat menubar secara horizontal dengan menggunakan List
Contoh Tampilan
<html>
<head>
<style type="text/css">
.menubar {
color : black; font-size:16px; font-weight:bold;
}
.menubartes ul {
list-style-type:none;
margin:0;
padding:0;
}
.menubartes li {
display:inline;
}
.menubartes li a {
text-decoration:none;
margin-right:6px;
padding: 10px; background-color:#dddddd;
}
</style>
</head>
<body>
<div class="menubartes">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
Dari Listing program di atas, perintah “display:inline;” berperan penting dalam menampilkan list secara horizontal.
Sumber : http://www.w3schools.com/css/css_navbar.asp
Isaninside : Yogyakarta November 2011
Related Post :
Tentang Isaninside - Muhammad Ihsan Zul
Isaninside - Muhammad Ihsan Zul, Seorang suami dari Rizka Irma Septiani dan bekerja sabagai Dosen di Politeknik Caltex Riau (PCR). Lulusan Pendidikan Teknik Elektronika FT UNP [Padang] tahun 2009 dan menyelesaikan pendidikan Pasca Sarjana di UGM tahun 2012. Ilmu untuk dibagi bukan dipamerkan. Let's Share!
akhirnya ini lah yang paling gampang.,,,,,