DesignClup
Hoşgeldiniz. Bu site bir rosKing [ C-AptaiN ] & ProgramCity & Sizin-Siteniz Projesidir.
Yapım Aşamasındayız...
Css iLe üst menü yapımı
css ile üst menü yapımıPHP Kod:
<div id="gri">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
Yukarıda bir layer içerisine sıralı liste oluşturduk ve linklerimizi ekledik linklerimize birtane "class" var ismi aktif layerimizin adı da gri olsun ben renk renk yaptığım için renk ismi verdim css kodlarımızı yazmaya başlayalım
PHP Kod:
#gri ul {
margin:0;
padding:0;
list-style-type:none;
width:100%;
background:transparent url(img/menu_gri.png) top left repeat-x;
font-family:Verdana,Arial,sans-serif;
font-weight:bold;
font-size: 12px;
border: 1px solid gray;
height:30px!important;
height:32px; /*İE6 için*/
overflow:hidden;
}
UL elementimizden başladık boşlukları sıfırladık listemizinde simge göstermedik 100% genişlik verdik bir arka palan resmi verdik font özellikleri verdik 1 piksellik border uyguladık yükseklik verdik İE6 için ayrı bir yükseklik verdik ve taşmaları gizledik devam edelim
PHP Kod:
#gri ul li{
display:block;
float:left;
border-right: 1px solid gray;
}
LI elementimize blok görünümü verdik sola yasladık ve sadece sağ kısıma 1 piksellik border uyguladık devam edelim
PHP Kod:
#gri ul li a{
color:#333;
display:block;
float:left;
text-decoration:none;
padding:8px 20px 0 20px;
height:30px;
}
A elementine renk verip blok görünümü verdik sola yasladık linklerimiz deki yazılara çizgi koymasını istemedik ve üstten 8, sağdan ve soldan 20 piksel yazılarımzı ittik son olarak yükseklik verdik devam edelim
PHP Kod:
#gri ul li a:hover {
color:#000;
background: url(img/menu_gri.png) center -60px no-repeat;
}
Yukarıda A elementimizin üstüne gelince alıcağı rengi ve arka plan resmini verdik resime göre pozisyon uyguladık devam edelim
PHP Kod:
#gri ul li a:active, .menu #gri ul li a.aktif {
color:#fff;
background: url(img/menu_gri.png) center -30px no-repeat;
}
Yularıda linke tıklanınca ve en başta bizim atadığımız aktif etiketine renk verdik ve arka plan resmi verdik.
Bu son işlemimizdi. bu sefer... adım adım resim ekleyemedim kusura bakmayın onun yerine 5 renk ekledim bi şekilde telafisi olmuştur sanırım hoşcakalın...
Bugün 28 ziyaretçi (34 klik) kişi burdaydı!