Css Design Ve Hakkında Herşey

Menü Gizleme Kodu

Kod:

Siteyi Ortalama Kodu

Kod:

Arka Plan Yapma Kodu

Kod:

kaydırma çubuğu ( sayfa içeriğinin tabloyu bozmasını istemiyorsanız kullanın)

Kod:

<div style="overflow: auto; width: 300px; height: 200px">yazı buraya</div>

sayaç vs. gibi ekstraların yazı boyutunu küçültme kodu

Kod:

gerekli yerleri kendinize göre değiştiriniz...

text menü kodu

Kod:

<div class="menu">
<ul>
<li><a href="siteadı.tr.gg">sayfanızın adı</a></li>
</ul>
</div>

arkadaşlar köprü eklediğiniz yazıların altının çizilmemesi için

Kod:

not : menü butonlarını resimlede yapabilirsiniz

FİREFOX ve İE vs. site ortalamak için

tasarımın üzerine

Kod:

tasarımın altına

Kod:

</td></tr></table></div>

Bu tip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayıcısı tarafında desteklenen(IE6 ve öncesi dahil) açılır menü yapılabilir. Aslında javascript’e ihtiyaç olmamasına karşın IE7′den önceki sürümler için javascript kodu gerekmektedir.

Açılır menü yapmak için daha önceki menü örneklerinde olduğu gibi sıralanmamış listeleri(<ul>) kullanacağız. Buradaki fark alt kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış liste olarak eklenmesidir.

Kod:

1. <ul id="menu" >
2. <li><a href="#">Anasayfa</a></li>
3. <li><a href="#">Haberler</a>
4. <ul>
5. <li><a href="#">şžirket Haberleri </a></li>
6. <li><a href="#">Yurt içi Haberleri </a></li>
7. <li><a href="#">Yurt dışı Haberleri</a></li>
8. </ul>
9. </li>
10. <li><a href="#">Ürünler</a>
11. <ul> <li><a href="#">Tencere</a></li>
12. <li><a href="#">Tava</a></li>
13. <li><a href="#">Ütü</a></li>
[img] 14. <li><a href="#">Tost Makinesi </a></li>
15. <li><a href="#">El Süpürgesi </a></li>
16. </ul>
17. </li>
18. </ul>

lk olarak satır başı boşluklarını ve imgeleri kaldıralım.

Kod:

1. ul {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 150px;
6. }

Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması için kullanılır.

Kod:

1. ul li {
2. position: relative;
3. }

Bir sonraki adımda da ikincil açılan menüleri konumlandırmak olacaktır. Her birinci linke karşılık gelen ikincil açılır menüler ilkinin sağına konumlandırılmalıdır. Bunun için soldan 149px değeri verilir. 1 piksel sola kaydırılır ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasın. Ayrıca ikincil linklerin ilk sayfa açıldığında görünmemesi için display:none özelliği atanır.

Kod:

1. li ul {
2. position: absolute;
3. left: 149px;
4. top: 0;
5. display: none;
6. }

Açılır menü yapısını oluşturmuş olduk şimdi linkleri güzelleştirip menü haline getirmek için önceki menüleri yaparken uyguladığımız kodları uygulayalım. Linklerin kendine has alanlarını tanımlamak için display:block özeliğini kullanalım. Linklerin altındaki çizgiyi kaldırmak için text-decoration:none özelliğini kullanalım. Linkler arasına mesafe vermek için padding verelim. Birde bir zemin rengi tanımı ver kenarlık tanımı yapalım. Üstteki linkin alt kenarlığı ile alttaki linkin üst kenarlığı üst üste bineceğinde alt kenarlık değerini sıfırlayalım.

Kod:

1. ul li a {
2. display: block;
3. text-decoration: none;
4. background-color: #E2E2E2;
5. padding: 5px;
6. border:1px solid #000;
7. border-bottom:0;
8. }

Bu kodu yazdığımızda IE linkler arasına boşluk koyacaktır(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:

Kod:

1. /* IE. gizle */
2. * html ul li { float: left; height: 1%; }
3. * html ul li a { height: 1%; }
4. /* IE den gizleme sonu */

En alttaki çizgimiz eksik kalmaması için ilk link ul’sinin alt kenarlık tanım yaparız.

Kod:

1. ul {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 150px;
6. border-bottom: 1px solid #00;
7. }

Birincil menü görünümü tamamlandı ancak ikincil menüler görünmüyor. İkincil menüleri göstermek için:

Kod:

li:hover ul { display: block; }

Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da IE7′den öncesi bu kodu desteklemez.

Internet Explorer 7. versiyonuna kadar :hover pseudo sınıfını sadece linklerde (<a>) uygulanmasını destekler diğer elementlerde bu özelliğin kullanımını desteklemez.

Peki menümüz böyle mi kalacak hayır. IE6 ve altı için bir javascript kodu yazacağız.

Kod:

1. startList = function() {
2. if (document.all&&document.getElementById) {
3. navRoot = document.getElementById("menu");
4. for (i=0; i<navRoot.childNodes.length; i++) {
5. node = navRoot.childNodes[i];
6. if (node.nodeName=="LI") {
7. node.onmouseover=function() {
8. this.className+=" over";
9. }
10. node.onmouseout=function() {
11. this.className=this.className.replace(" over", "");
12. }
13. }
14. }
15. }
16. }
17. window.onload=startList;

Bu çözümü bize kazandıran arkadaşlara teşekkürü bir borç biliriz ve linkini de yazarız.

Ayrıca aşağıdaki kodu da eklemeliyiz.

Kod:

1. li:hover ul, li.over ul{ display: block; }

Ayrıca kod daki

Kod:

<ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu")

; aynı olmasına dikkat edelim.
örnek ndir

KODLARIN KULLANIŞ BİÇİMİ;

Css design tasarım kullanıyorsanız still.css kodunu tasarım ayarlarından css tagı olmayan yere yapıştırın diğer kodu ise tasarım üstüne yapıştırın.

Eğer css design kullanmıyorsanız still.css yazan kodun en başına

Kod:

ve sonuna

Kod:

</style>

kodu ekleyerek diğer kodla beraber istediğiniz yere yapıştırın..

YORUMLARINIZI ESİRGEMEYİN..

STİLL.CSS KODU

Kod:

#MainMenu
{
width:100%;
height:38px;
background: url('https://img.webme.com/pic/s/samanyolu35/bmid_040.gif');
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 0 0 0 ;
padding:0;
}
#tab a
{
background:#000000 url('https://img.webme.com/pic/s/samanyolu35/bright_040.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('https://img.webme.com/pic/s/samanyolu35/bleft_040.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
font-weight:bold;
line-height:38px; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:#000000;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid #330066;
background: url('https://img.webme.com/pic/s/samanyolu35/bmid_040.gif');
color:#000000;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0 ;
padding:0;
display:block;
border:0px solid #000000;
color:#000000;
background:url('https://img.webme.com/pic/s/samanyolu35/bleft_040.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:38px;
background:url('https://img.webme.com/pic/s/samanyolu35/bright_040.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid #000000;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000000
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000000;
font-weight:bold;
}

Kod:

STİLL.CSS KODU

Kod:

#MainMenu
{
border-left:0px solid #9AB6D2; border-right:0px solid #9AB6D2; border-top:0px solid #9AB6D2; border-bottom:3px solid #9AB6D2; height:27px;
background: #FFFFFF;
margin:0;

}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 1px 0 0 ;
padding:0;
}
#tab a
{
background: url('http://www.fileden.com/files/2007/6/19/1190933/bright_115.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_115.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:27px; padding-left:22px; padding-right:22px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
border-left:0px solid #9AB6D2; border-right:0px solid #9AB6D2; border-top:0px solid #9AB6D2; border-bottom:3px solid #9AB6D2; position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
background: #FFFFFF;
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
padding:0;
display:block;
border:0px solid ;
color:#FFFFFF;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_115.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none; margin-left:0; margin-right:1px; margin-top:0; margin-bottom:0
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:27px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_115.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF; padding-left:22px; padding-right:22px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid ;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000000
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000000;
font-weight:bold;
}

Kod:

STİLL.CSS KODU

Kod:

#MainMenu
{
height:36px;
background: #FFFFFF url('http://www.fileden.com/files/2007/6/19/1190933/bmid_113.gif');
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background: url('http://www.fileden.com/files/2007/6/19/1190933/bright_113.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_113.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:36px; padding-left:22px; padding-right:22px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#FFFFFF;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid ;
background: #FFFFFF url('http://www.fileden.com/files/2007/6/19/1190933/bmid_113.gif');
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0px solid ;
color:#FFFFFF;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_113.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:36px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_113.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF; padding-left:22px; padding-right:22px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid ;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#FFFFFF
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#FFFFFF;
font-weight:bold;
}

Kod:

_________________

En son samanyolu35 tarafından 15 Tem 2008 22:51 tarihinde değiştirildi, toplam 7 kere değiştirildi

Başa dön

samanyolu35
samanyolu35.tr.gg

Offline

Yardımsever

Konum: izmir
=> Mesaj yolla

26 Hzr 2008 12:31
Mesaj konusu:

STİLL.CSS KODU

Kod:

#MainMenu
{
height:37px;
background: #FFFFFF;
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background: url('http://www.fileden.com/files/2007/6/19/1190933/bright_109.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_109.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:37px; padding-left:25px; padding-right:25px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid ;
background: #FFFFFF;
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0px solid ;
color:#FFFFFF;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_109.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:37px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_109.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF; padding-left:25px; padding-right:25px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid ;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000000
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000000;
font-weight:bold;
}

Kod:

STİLL.CSS KODU

Kod:

#MainMenu
{
height:37px;
background: #FFFFFF url('http://www.fileden.com/files/2007/6/19/1190933/bmid_104.gif');
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_104.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_104.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:37px; padding-left:15px; padding-right:25px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#FFFFFF;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid ;
background: #FFFFFF url('http://www.fileden.com/files/2007/6/19/1190933/bmid_104.gif');
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0px solid ;
color:#FFFFFF;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_104.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:37px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_104.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF; padding-left:15px; padding-right:25px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid ;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#FFFFFF
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#FFFFFF;
font-weight:bold;
}

Kod:

STİLL.CSS KODU

Kod:

#MainMenu
{
width:100%;
height:28px;
background: #FFFFFF;
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 3px 0 0 ;
padding:0;
}
#tab a
{
background:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_011.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_011.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000099;
font-weight:bold;
line-height:28px; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:#000000;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid #330066;
background: #FFFFFF;
color:#000099;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
padding:0;
display:block;
border:0px solid #000000;
color:#000099;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_011.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none; margin-left:0; margin-right:3px; margin-top:0; margin-bottom:0
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:28px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_011.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000099; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid #000000;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000000
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000000;
font-weight:bold;
}

Kod:

_________________

En son samanyolu35 tarafından 11 Tem 2008 18:31 tarihinde değiştirildi, toplam 1 kere değiştirildi

Başa dön

samanyolu35
samanyolu35.tr.gg

Offline

Yardımsever

Konum: izmir
=> Mesaj yolla

26 Hzr 2008 12:33
Mesaj konusu:

STİLL.CSS KODU

Kod:

#MainMenu
{
width:100%;
height:22px;
background: #FFFFFF url('../images/bmid_021.gif');
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 3px 0 0 ;
padding:0;
}
#tab a
{
background:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_021.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_021.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#006600;
font-weight:bold;
line-height:22px; padding-left:18px; padding-right:18px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:#000000;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#000099;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid #330066;
background: #FFFFFF url('../images/bmid_021.gif');
color:#006600;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
padding:0;
display:block;
border:0px solid #000000;
color:#006600;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_021.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none; margin-left:0; margin-right:3px; margin-top:0; margin-bottom:0
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:22px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_021.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#006600; padding-left:18px; padding-right:18px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid #000000;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000099
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000099;
font-weight:bold;
}

Kod:

STİLL.CSS KODU

Kod:

#MainMenu
{
height:29px;
background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_053.gif');
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_053.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_053.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:29px; padding-left:15px; padding-right:45px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:#FF9300;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#FFFFFF;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid ;
background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_053.gif');
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0px solid ;
color:#FFFFFF;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_053.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:29px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_053.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF; padding-left:15px; padding-right:45px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid #FF9300;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#FFFFFF
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#FFFFFF;
font-weight:bold;
}

Kod: