04-10-2007, 11:33
CSS ile ilgili 2. dersim, bu kez bir menü yapacağız. Menümüzün listeleme ve alt nesne özellikleri de olacak.
Öncelikle style bilgilerini girelim:
Burada her nesne için kod tanımlaması yaptık, style bilgilerini sisteme tanıttık. Şimdi tek yapmamız gereken bu bilgileri html kodları içinde kullanmak, aynen böyle:
CSS kodlarındaki resim adreslerini değiştirmenizi öneririm, imageshack'e güvenilmez :yes:
Hadi iyi çalışmalar...
![[Resim: menuforumaskeiz5.jpg]](http://img101.imageshack.us/img101/9629/menuforumaskeiz5.jpg)
Öncelikle style bilgilerini girelim:
Kod:
<style>
/* temel */
#Menu_fme_aorgun ul {
list-style: none;
margin: 0;
padding: 0;
}
#Menu_fme_aorgun {
width: 150px;
}
#Menu_fme_aorgun li {
display:inline;
}
/* menu */
#Menu_fme_aorgun li a:link, #Menu_fme_aorgun li a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 0.6em;
font-weight: bold;
color: White;
height: 12px;
display: block;
background: url(http://img374.imageshack.us/img374/7254/bckmenuel6.gif);
padding: 5px 0 6px 20px;
}
#Menu_fme_aorgun li a:hover {
color: #ACD373;
background: url(http://img374.imageshack.us/img374/7254/bckmenuel6.gif) 0 -23px;
padding: 5px 0 6px 20px;
}
/* Alt Menu */
#Menu_fme_aorgun li li a:link, #Menu_fme_aorgun li li a:visited {
font-weight: normal;
background: url(http://img524.imageshack.us/img524/7609/bcksubmenuqi5.gif);
padding: 2px 0 3px 30px;
}
#Menu_fme_aorgun li li a:hover {
background: url(http://img524.imageshack.us/img524/7609/bcksubmenuqi5.gif) 0 -17px;
padding: 2px 0 3px 30px;
}
/* 2 Alt Menu */
#Menu_fme_aorgun li li li a:link, #Menu_fme_aorgun li li li a:visited {
background: url(http://img122.imageshack.us/img122/8743/bcksubsubmenuia8.gif);
padding: 0 0 1px 40px;
}
#Menu_fme_aorgun li li li a:hover {
background: url(http://img122.imageshack.us/img122/8743/bcksubsubmenuia8.gif) 0 -13px;
padding: 0 0 1px 40px;
}
</style>Kod:
<div id="Menu_fme_aorgun">
<ul>
<li><a href=http://www.forumaske.net>ForuMaskE.NeT</a></li>
<li><a href="deneme.html">nesne 1</a></li>
<li><a href="deneme.html">nesne 2</a></li>
<li><a href="deneme.html">nesne 3</a></li>
<li><a href="deneme.html">nesne 4</a>
<ul>
<li><a href="deneme.html">alt nesne 1</a></li>
<li><a href="deneme.html">alt nesne 2</a></li>
<li><a href="deneme.html">alt nesne 3</a></li>
<li><a href="deneme.html">alt nesne 4</a>
<ul>
<li><a href="deneme.html">2 alt nesne 1</a></li>
<li><a href="deneme.html">2 alt nesne 2</a></li>
</ul></li>
<li><a href="deneme.html">alt nesne 5</a></li>
</ul></li>
<li><a href="deneme.html">nesne 5</a></li>
<li><a href="deneme.html">nesne 6</a></li>
<li><a href="deneme.html">nesne 7</a></li>
</ul>CSS kodlarındaki resim adreslerini değiştirmenizi öneririm, imageshack'e güvenilmez :yes:
Hadi iyi çalışmalar...