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>
Tarık BAĞRIYANIK 
