closeSitedeki bazı videolar Youtube'ta yaptığım bir hata nedeniyle çalışmamaktadır..

Ali MengŁ | Kişisel Web Sayfasi

Menu Kategori Basliğina İcon Eklemek

Uzun Bir aradan sonra Bir Dersle daha karsınızdayım arkadaslar.Bu Dersimizde Menulerin Kategori Başlıgı kısmında Değiştirilebilir İcon Eklemeyi Göstericem.

Örnek olarak hazırladığım Bir Kategori Basliği Asağıdadir.


(Boyutlar ; 240x32)



Arkadaslar Önce Bir Katman Oluşturalim.Katmanimizin İsmine mavibaslik adini veriyorum.Siz İstediğiniz Bir isim takabilirsiniz.Css Kodlariyla Beraber Katman Kodlari Asağıdadir.

Görünüm ;

Kod;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
-->
</style>
<div id="mavibaslik"></div>


Gördüğünüz gibi Basliğimizin temeli oluştu.Şimdi içinde bir class oluşturuyoruz. Classin ismini maviicon olarak ayarliyorum.Siz Baska bir isim verebilirsiniz.Classin boyutlarini height; 32px width;32px  olarak ayarliyorum.Classi Katman içerisinde sola yatirmak içinde float:left; kodunu kullaniyorum.Katmanin Sol kısmından uzakliği içinde margin-left:10px; değerini veriyorum.Simdi bu islemlere göre önizlemeyi ve kodumuzu görelim.

Görünüm ;

Kod;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
.maviicon {
    float: left;
    height: 32px;
    width: 32px;
    margin-left: 10px;
}
-->
</style>
<div id="mavibaslik">
  <div class="maviicon"></div>
</div>

Gördügünüz gibi İconun geliceği yer küçük bir kare halini aldi.Benim kullandiğim ve size önerdiğim iconfinder sitesinden katmanimiza uygun icon bulalim ve yerine yerleştirelim.

Ekleyeceğim icon :  http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png

Bu kısım çok kolaydir üzerinde fazla durmayacağım.Mavi icon adli classmiza resmin kodunu ekliyoruz.
<img alt="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png" src="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png">

Görünüm ;

Kodlar ;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
.maviicon {
    float: left;
    height: 32px;
    width: 32px;
    margin-left: 10px;
}
-->
</style>
<div id="mavibaslik">
  <div class="maviicon"><img alt="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png" src="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png"></div>
</div>


Şimdi Kategori İsmini Yerleştirelim.Burada Padding Kodlarini kullanicaz.Bir Class oluşturalim. ben ismini maviyazi olarak belirledim.Bu classi mavi baslik katmanin içine açıyoruz.Ayni mavi icon classi gibi.Ardindan font değerini ve Yazi boyutunu ayarliyoruz.Ben Yazi Stilini Verdana Olarak ayarladim. Yazi büyüklüğünüde 16px; olarak ayarladim. Yazinin sol kısımdan uzakliği için 60px üst kısımdan uzakliği için 6px değerini verdim. Şimdi kodu ve görünümü görelim.

Görünüm ;

Kod ;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
.maviicon {
    float: left;
    height: 32px;
    width: 32px;
    margin-left: 10px;
}
.maviyazi {
    font-family: Verdana;
    padding-left: 60px;
    padding-top: 6px;
    font-size: 16px;

}
-->
</style>
<div id="mavibaslik">
  <div class="maviicon"><img alt="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png" src="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png"></div>
  <div class="maviyazi">Baslik &#304;smi Buraya</div>
</div>


Ve İşte Katmanimiz ;

http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png
Baslik İsmi Buraya




Bu sayfa hakkındaki son yorum:
Yorumu gönderen::31.05.2015, 04:32 (UTC)
webdesignr
webdesignr
Kapalı

Arkadaslar Sitemizde tasarım yaptırabilirsiniz hemde çok ucuz fiyata ve bir kaç tane bedava tasarımlarda var

Yorumu gönderen::20.12.2013, 14:33 (UTC)
hamitdemir94
hamitdemir94
Kapalı


Yorumu gönderen: Mucur, 21.04.2013, 23:10 (UTC):
Kardeş ellerine sağlık sağol.

Yorumu gönderen::08.08.2011, 10:23 (UTC)
ceblog
ceblog
Kapalı

Saol.

Yorumu gönderen::29.06.2011, 22:09 (UTC)
bab-hunk
bab-hunk
Kapalı

Güzel Anlatım Olmuş..Sağol

Yorumu gönderen::17.05.2011, 12:15 (UTC)
altin-eglence
altin-eglence
Kapalı

Güzel Anlatım Teşekkürler

Yorumu gönderen: Ömer KARAHAN, 16.05.2011, 17:57 (UTC):
Slm kardeş ben akpinarweb.tr.gg sayfasının sahibiyim wwebw-alimengu-sukru-dizayn bana özel tasarım lazım çift menülü-mavi renkli vs. tasarımdan hepiniz çok iyi anlıyorsunuz sitelerinize herzamn giriyorum ücretli olur olmaz bana çift menülü bir tasarım lazım lifelist'in mavi gri tasarımı gbi yardımvcı olabilirseniz
omerkarahan@live.com
facebook.com/karahan40

Yorumu gönderen::16.05.2011, 16:35 (UTC)
mustafatoraman
mustafatoraman
Kapalı

güzel çalışma emeğine sağlık

Yorumu gönderen::16.05.2011, 15:36 (UTC)
wwebw
wwebw
Kapalı

Teşekkürler.

Yorumu gönderen::15.05.2011, 16:49 (UTC)
erkinunlu
erkinunlu
Kapalı

Evet Güzel Anlatım Olmuş..Eline Sağlık

Yorumu gönderen::15.05.2011, 14:09 (UTC)
sukru-dizayn
sukru-dizayn
Kapalı

Her Zamanki Gibi. Güzel Dememe Gerek Yok Sanırım Herkes Anladı



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Bugün toplam 21 ziyaretçi sitemizi dolaştı.
http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=de510918aee37d99078ff98e1f31074c56421665b926a44a75
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=