CSS kullanarak dikey menü yapım örneği :

Kod kısmındaki kırmızı renkli satırları inceleyiniz.

<!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-9" />
<title>Div Dikey Menü</title>
<style type="text/css">
#menu {
 float: left;
 width: 147px;
 background-color: #CF3;
}
#menu ul {
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}
#menu ul li {
 width: 145px;
}
#menu ul li a {
 border: 1px solid #999;
 display: block;
 width: 141px;
 text-decoration: none;
 padding: 2px;
 text-align: center;
}
#menu ul li a:hover {
 background-color: #6C0;
}
</style>
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="index.html">Ana Sayfa</a></li>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
    <li><a href="link3.html">Link 3</a></li>
  </ul>
</div>
</body>
</html>

Yatay menü yapım örneği:

Kod kısmı dikey menü ile çok benzer, tek farkı mor olarak belirtilen float:left; komutudur.

<!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-9" />
<title>Div Yatay Menü</title>
<style type="text/css">
#menu {
 float: left;
 width: 580px;
 background-color: #CF3;
}
#menu ul {
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}
#menu ul li {
 width: 145px;
 float:left;
}
#menu ul li a {
 border: 1px solid #999;
 display: block;
 width: 141px;
 text-decoration: none;
 padding: 2px;
 text-align: center;
}
#menu ul li a:hover {
 background-color: #6C0;
}
</style>
</head>

<body>
<div id="menu">
  <ul>
    <li><a href="index.html">Ana Sayfa</a></li>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
    <li><a href="link3.html">Link 3</a></li>
  </ul>
</div>
</body>
</html>

Sprite Kullanımı ile ilgili basit bir örnek:

Gerekli resim dosyası sprite.png, kod kısmında yeşil olarak belirtilen yerlere dikkat ediniz.

 
<!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-9" />
<title>Css İle Düğme Yapımı</title>
<style type="text/css">
.dugme1 {
 background-image: url(sprite.png);
 background-repeat: no-repeat;
 height: 28px;
 width: 66px;
 display:inline-block;
 background-position: -1px -1px;
 font-size: 12px;
 text-align: center;
 padding-top: 13px;
 text-decoration: none;
}
.dugme1:hover {
 background-image: url(sprite.png);
 background-repeat: no-repeat;
 height: 28px;
 width: 66px;
 display:inline-block;
 background-position: -71px -1px;
 color: #333;
}
.nesne {
 background-image: url(sprite.png);
 background-repeat: no-repeat;
 background-position: -2px -48px;
 display: inline-block;
 height: 55px;
 width: 155px;
 padding-left:60px;
}
</style>
</head>

<body>
<a href="Googlehttp://www.google.com">Google</a> <a href="Yahoohttp://www.yahoo.com">Yahoo</a> Düğme görünümlü köprü...<br />
<span>Resimli Yazı, arkaplanında bir resim var</span><br />
<br />
<img src="sprite.png" align="absmiddle" border="1"/> Orijinal Resim
</body>
</html>
Reklamlar