Yatay Css Menüleri Hazırlamak
Bu yazımda yatay bir css menüsü hazırlayacağız. CSS ile ilgili geniş bilgiyi ASP.NET Framework 3.5 kitabı içerisinde bulabilirsiniz.
Öncelikle sayfanıza bir adet < div>
tagı ekleyiniz ve içerisine aşağıdaki html taglarını yerleştiriniz.
|
<div>
<ul>
<li><a href="Yazilim.aspx">Yazılım Kitaplarımız< /a>< /li>
<li><a href="Sistem.aspx">Sistem Uzmanlığı Kitaplarımız< /a>< /li>
<li><a href="Grafik.aspx">Grafik Kitaplarımız< /a>< /li>
<li><a href="Office.aspx">Office Kitaplarımız< /a>< /li>
<li><a href="Veritabani.aspx">Veritabanı Kitaplarımız< /a>< /li>
< /ul>
< /div>
|
body
{
font-family: Verdana;
font-size: medium;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
text-transform: none;
color: #FF0000;
text-decoration: underline;
}
#yatayMenu
{
margin:10px 0px 0px 0px;
padding: 5px 0px 6px 0px;
background-color: #818181;
}
#yatayMenu ul {
margin: 0px;
padding: 0px;
}
#yatayMenu li {
display: inline;
}
#yatayMenu a {
padding: 5px 15px;
text-decoration: none;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
#yatayMenu a:hover
{
background-color: #8C8C8C;
}
|
Şimdi de source kısmından< div>
|
<div id="yatayMenu">
<ul>
<li><a href="Yazilim.aspx">Yazılım Kitaplarımız< /a>< /li>
<li><a href="Sistem.aspx">Sistem Uzmanlığı Kitaplarımız< /a>< /li>
<li><a href="Grafik.aspx">Grafik Kitaplarımız< /a>< /li>
<li><a href="Office.aspx">Office Kitaplarımız< /a>< /li>
<li><a href="Veritabani.aspx">Veritabanı Kitaplarımız< /a>< /li>
< /ul>
< /div>
|
|
#yatayMenu
{
margin:10px 0px 0px 0px;
padding: 5px 0px 6px 0px;
background-color: #818181;
}
|
Bu bölümde menünüze ait temel görüntüler belirtilir. Aslına bakarsanız burada yapılan
|
Margin:
|
Menümüzün çevresindeki bölümlere olan uzaklığını belirledik. Menümüz üstündeki tagdan 10 px aşağıda olacak ama solundaki, altındaki veya sağındaki tagdan herhangi bir şekilde uzakta olmayacaktır.
|
|
Padding:
|
Genellikle Margin ile karıştırılır. Margin verdiğiniz tag ile çevresindeki nesnelere ulan uzaklık belirtilirken padding ile
in içerisindeki nesnelerin
’in sınırlarına olan uzaklıkları belirtilir. Yani menümüzün içerisindeki menü elemanları
tagının sınırlarına üstten 5px, sağdan 0px, alttan 6px, soldan 0px uzaklıkta olacaktır.
|
|
Background-color:
|
Arkaplan rengini belirttik.
|