ni bwat nyang lagi pada dmen belajar CSS, ada tutorial dikit bikin CSS bwat menu horizontal
seperti biasa kita butuh 2 file pendukung dalam proses styling layout, css dan html / halaman web
untuk CSS na:
<style type="text/css">
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}
.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
pasang style css di atas antara <HEADER></HEADER>
nah untuk di html na ke gini:
<div class="hovermenu">
<ul>
<li><a href="http://www.dremi.info">dremi.info Home Site</a></li>
<li><a href="http://www.dremi.info/tutorial">dremi.info Web 2.0 version</a></li>
<li><a href="http://www.dremi.info/blog">Inside Blog dr.emi</a></li>
<li><a href="http://www.dremi.info/forum">Photoshop and Webmaster Forum</a></li>
<li><a href="http://dremi468.blogspot.com">dr.emi's BlogSpot</a></li>
<li><a href="http://www.toserbatutorial.com">Toserba Tutorial</a></li>
</ul>
</div>
jadi kalo lengkapna ke gini broder:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Horizontal Hover Menu</title>
<style type="text/css">
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}
.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
</head>
<body>
<div class="hovermenu">
<ul>
<li><a href="http://www.dremi.info">dremi.info Home Site</a></li>
<li><a href="http://www.dremi.info/tutorial">dremi.info Web 2.0 version</a></li>
<li><a href="http://www.dremi.info/blog">Inside Blog dr.emi</a></li>
<li><a href="http://www.dremi.info/forum">Photoshop and Webmaster Forum</a></li>
<li><a href="http://dremi468.blogspot.com">dr.emi's BlogSpot</a></li>
<li><a href="http://www.toserbatutorial.com">Toserba Tutorial</a></li>
</ul>
</div>
</body>
</html>
