Tag Archives: css

Membuat Table Zebra Hover

Leave a reply
Table Zebra Hover

Table Zebra Hover

Table Zebra Hover adalah table dengan 2 warna barisnya selang seling yang ketika disorot / highlight dengan mouse pointer akan berubah warna barisnya.

Sebenarnya kita dapat membuat table zebra hover ini baik dengan CSS maupun javascript. Namun di sini kita akan gunakan CSS, karena secara performance lebi baik.

Berikut ini struktur HTML untuk membuat tablenya.

<body>
<table id="table-a">
	<thead>
	<tr><th>Header 1</th><th>Header 2</th>	<th>Header 3</th></tr>
	</thead>
	<tbody>
	<tr><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td></tr>
	<tr><td>Item 2A</td><td>Item 2B</td><td>Item 2C</td></tr>
	<tr><td>Item 3A</td><td>Item 3B</td><td>Item 3C</td></tr>
	<tr><td>Item 4A</td><td>Item 4B</td><td>Item 4C</td></tr>
	<tr><td>Item 5A</td><td>Item 5B</td><td>Item 5C</td></tr>
	</tbody>
</table>
</body>

Untuk presentasinya kita buat dengan coding CSS sehingga table akan berbentuk zebra (2 warna) dan ketika barisnya di highlight / hover akan berubah warna.

#table-a
{	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	width: 500px;
	text-align: center;
	border-collapse: collapse;
}
#table-a th
{	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
#table-a td
{	padding: 8px;
	background: #e8edff;
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#table-a tr:hover td
{	background: #d0dafd;
	color: #339;
}

Kita dapat memodifikasi tabel zebra hover ini dengan mengembangkan struktur dan presentasinya.

Membuat Menu Horisontal Dengan CSS

Leave a reply
menu horisontal

Menu horisontal

Mengapa dengan CSS? mengapa tidak dengan JavaScript?

Pada prinsipnya loading CSS lebih cepat dari pada JavaScript. Inilah alasannya mengapa kita lebih mengutamakan menggunakan CSS ketimbang JavaScript. JavaScript memang bisa melakukan operasi apa saja dalam website, tapi performance CSS masih lebih baik. Jika bisa dilakukan dengan CSS kenapa harus JavaScript.

Menu horisontal atau dropdown menu umumnya terdapat pada setiap website. Menu digunakan untuk memudahkan kita melakukan navigasi content dalam sebuah website.

Untuk membuat menu horisontal, pertama kita tulis struktur HTML-nya berikut ini.

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About</a>
  	<ul>
      <li><a href="">The Team</a></li>
      <li><a href="">History</a></li>
      <li><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
  	<ul>
      <li><a href="">Cozy Couch</a></li>
      <li><a href="">Great Table</a></li>
      <li><a href="">Small Chair</a></li>
      <li><a href="">Shiny Shelf</a></li>
      <li><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
  	<ul>
      <li><a href="">Online</a></li>
      <li><a href="">Right Here</a></li>
      <li><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>
</body>

Setelah itu kita buat presentasinya dengan CSS berikut ini.

ul {
	font-family: Arial, Verdana;
	font-size: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	display: block;
	position: relative;
	float: left;
}
li ul {
	display: none;
}
ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 15px;
	background: #2C5463;
	margin-left: 1px;
	white-space: nowrap;
}
ul li a:hover {
	background: #617F8A;
}
li:hover ul {
	display: block;
	position: absolute;
}
li:hover li {
	float: none;
	font-size: 14px;
}
li:hover a {
	background: #617F8A;
}
li:hover li a:hover {
	background: #95A9B1;
}

Menu dropdown horisontal ini juga dapat bekerja dengan baik di browser MSIE.

Membuat Layout Website

Leave a reply
layout2kolom

Layout 2 kolom

Hal pertama dalam pembuatan sebuah website adalah membuat layout website. Ada 2 cara pembuatan layout website, yakni: dengan struktur table dan dengan struktur div.

Contoh coding layout website dengan struktur table:

<table width="80%" border="1" cellspacing="0" align="center">
<tbody>
<tr>
<td colspan="2" align="center">HEADER GOES HERE</td>
</tr>
<tr>
<td align="center" width="24%" height="245">
LEFT CONTENT GOES HERE</td>
<td align="center" width="76%">
RIGHT CONTENT GOES HERE</td>
</tr>
<tr>
<td colspan="2" align="center">FOOTER GOES HERE</td>
</tr>
</tbody>
</table>

Contoh coding layout website dengan struktur div:

<div id="page">
<div id="header">
<h1>HEADER GOES HERE</h1>
</div>
<div id="leftcontent">
<h3>LEFT CONTENT GOES HERE</h3>
</div>
<div id="rightcontent">
<h2>RIGHT CONTENT GOES HERE</h2>
</div>
<div id="footer">
<h4>FOOTER GOES HERE</h4>
</div>
</div>

Coding layout website dengan struktur table terlihat lebih banyak dibandingkan dengan struktur div, dengan kata lain struktur table lebih kompleks daripada struktur div. Tabel jauh dari clean code dan mengandung semantik. Semantik dari table adalah menampilkan data (data table). Struktur table yang lebih kompleks akan mempengaruhi development time dan maintenance website nantinya . Coding yang lebih banyak tentu akan mempengaruhi kinerja website pada saat loading.

Dengan struktur div kita akan dapat lebih banyak mengatur presentasinya dengan CSS. Dengan memisahkan struktur dan presentasi akan memudahkan coding dan maintenance website.

@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	text-align: center;
}
#page {
	border: 3px solid #c0c0c0;
	margin: 0 auto;
	width: 960px;
	height:1000px
	text-align: left;
}
#header {
	border: 3px solid #c0c0c0;
	height: 192px;
}
#leftcontent {
	border: 3px solid #c0c0c0;
	float: left;
	width: 192px;
	height: 700px;
}
#rightcontent {
	border: 3px solid #c0c0c0;
	float: left;
	width: 756px; /*kurang 12px*/
	height: 700px;
}
#footer {
	border: 3px solid #c0c0c0;
	clear: left;
	height: 100px;
}

Kita dapat mengembangkan website ini dengan mudah dengan modifikasi html maupun CSS-nya.