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
[code lang=”html”]
<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>
[/code]
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
Comments
akhirnya ini lah yang paling gampang.,,,,,