Geri git   Van.GEN.TR Forum | Yerel Van Forumu > Bilgisayar > CSS

CSS CSS nedir, CSS örnekleri, çözümleri

Cevapla
 
Konu Araçlarý Stil
Alt 24/04/07, 00:15   #1
gokhanaygun
Tuðgeneral
 
gokhanaygun - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Apr 2007
Bulunduðu yer: VAN
Yaş: 37
Mesajlar: 924
Tecrübe Puanı: 26 gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold
Standart CSS ile Menü Oluþturmak V - Resimli Menüler

Arkaplan Resmi kaydýrmaca" ile Resimli Menüler
Arkaplan Resmi kaydýrmaca tanýmlamasýný cemsid‘den aldým. CSS ile menü yapýmý serimize devam ediyoruz. CSS ile yapýlan bir çok menü örneði mevcut biz burada bunlarý katagorize edip her bir katagoriye bir örnek yaparak mantýðýný anlatmaya çalýyoruz, mantýðýný anladýktan sonra CSS ile yapýlan tüm menüleri yapabileceðimize inanýyorum.

CSS menülerinin vazgeçilmezi sýrasýz listeleri(<ul>) kullanarak her bir linkin iki resimi bulunan(bir normal hali, diðeri fare imlecinin üzerine gelince görünecek resim) menü oluþturacaðýz.

Bu menü sayfa yüklenmeden yüklendiði için javascript ile yapýlan rollover menülerden avantajlýdýr ve Internet Explorer’da Temporary Internet Files > Settings > ‘Every visit to page.’ seçeneði seçili olan kullanýcýlar için biçilmiþ kaftandýr. Ayrýca CSS ile yapýlan menülerdeki avantajlara(kolay ekleme ve düzenleme, esnek yapý vb.) sahiptir tabi ki.

Bu metod cemsid’inde açýkladýðý gibi arkaplan resmi(background-image) kaydýrarak yapýlýyor. Genelde bu tip menüler resim içeren veya anti-aliased metinlerin kullanýldýðý durumlarda kullanýlýr.

<ul id="menu" >
<li id="elma"><a href="#" title="Elma">Elma</a></li>
<li id="armut"><a href="#" title="Armut">Armut</a></li>
<li id="muz"><a href="#" title="Muz">Muz</a></li>
<li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>
Görüldüðü gibi diðer menü baþlangýcýndan farký olmayan-bir ek hariç- bir kodlama. Hariç olan ek her menu elemanýna bir id atamamýz. Çünkü her menü elemaný için bir resim tanýmlamasý yapacaðýz. Manav dükkaný açýyoruz

þžimdi menümüzü oluþturan resimi hazýrlamaya geldi sýra. Menü resmini oluþtururken bir normal halini ve hemen altýna fare imleci üzerine geldiðindeki halini koyup resmi kaydedeceðiz. Bu iþlem için Photosohop, Firefowrk, PaintShopPro vb. programlar kullanabilrisiniz.



Menüdeki margin, padding ve imgeleri kaldýralým. Boyutlarýný ve konumunu tanýmlayalým:

ul#menu {
height: 54px;
width: 500px;
margin: 0;
padding: 0;
position: relative;
}


Menümüzü yatay olarak sýralamak için

ul#menu li {
list-style: none;
position: absolute;
}


Menü elemanlarýnýn yükseklikleri sabit olduðu için hepsine ortak tanýmlama yapýyoruz, hepsini kendine has kapsama alaný olmasý için blokladýk(display:block) ve konumlandýrdýk(postion:relative).

ul#menu li a {
height: 54px;
display: block;
position:relative;
}
Her menü elemaný için kendi geniþliði ve arkaplan resmindeki(menu.jpg) yerini belirleyelim.

#elma a{
width:130px;
background: url(images/menu.jpg) 0 0 no-repeat;
}
#armut a{
width:142px;
background: url(images/menu.jpg) -130px 0 no-repeat;
}
#muz a{
width:120px;
background: url(images/menu.jpg) -272px 0 no-repeat;
}
#kivi a{
width:108px;
background: url(images/menu.jpg) -392px 0 no-repeat;
}
ve tüm menü elementlerinin soldan konumu belirleyelim.

#elma {left: 0px;}
#armut {left: 130px;}
#muz {left: 272px;}
#kivi {left: 392px;}


Resimler üzerindeki metinleri kaldýrmak için

ul#menu li a {
text-indent: -9999px;
text-decoration: none;
}


Menümüz tamam. þžimdi de rollover efekti vermek için a:hover arkaplan resimlerinin konumunu belirleyelim. Konumunu yazarken sadece yükseliði üstten konumu deðiþtirdiðimize dikkat edin.

#elma a:hover{
width:130px;
background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a:hover{
width:142px;
background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a:hover{
width:120px;
background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a:hover{
width:108px;
background: url(images/menu.jpg) -392px -54px no-repeat;
}


Son olarakta bir bölümde olduðunda o bölümün aktif görünmesini saðlamak için, genel de bunu için a:hover durumu normal durum olarak tanýmlanýr. Bizde öyle yapalým. Mesela Muz bölümünde olduðumuzu farz edelim.

<ul id="menu" >
<li id="elma"><a href="#" title="Elma">Elma</a></li>
<li id="armut"><a href="#" title="Armut">Armut</a></li>
<li id="muz"><a href="#" title="Muz" class="secili" >Muz</a></li>
<li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>
#elma a.secili{
width:130px;
background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a.secili{
width:142px;
background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a.secili{
width:120px;
background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a.secili{
width:108px;
background: url(images/menu.jpg) -392px -54px no-repeat;
}
gokhanaygun isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 187
Alt 01/03/08, 22:13   #2
Neutralizer
Yasaklý kullanýcý
 
Neutralizer - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Jan 2008
Bulunduðu yer: Ýstediðin yerden
Mesajlar: 1.883
Tecrübe Puanı: 0 Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute
Standart

paylaşım için sağol
Neutralizer isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 316
Takýmýnýz:
Alt 14/03/08, 20:39   #3
Bur2
Korgeneral
 
Bur2 - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Oct 2007
Bulunduðu yer: evde :)
Yaş: 45
Mesajlar: 2.544
Tecrübe Puanı: 51 Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute
Standart

paylaşım için tşkler
__________________

[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]

[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]


Bur2 isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 497
Takýmýnýz:
Alt 04/08/08, 09:37   #4
firari
Mareþal
 
firari - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Sep 2007
Mesajlar: 5.835
Tecrübe Puanı: 105 firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute
Standart

tşkler...
__________________



firari isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 613
Takýmýnýz:
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 

Yetkileriniz
Yeni Mesaj yazma yetkiniz Aktif deðil dir.
Mesajlara Cevap verme yetkiniz aktif deðil dir.
Eklenti ekleme yetkiniz Aktif deðil dir.
Kendi Mesajýnýzý deðiþtirme yetkiniz Aktif deðildir dir.

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Gitmek istediğiniz klasörü seçiniz


Bütün Zaman Ayarları WEZ +3 olarak düzenlenmiştir. Şu Anki Saat: 07:21 .


Powered by vBulletin
Copyright © 2000-2007 Jelsoft Enterprises Limited.
Sitemap
6, 5, 3, 7, 8, 9, 10, 11, 12, 13, 14, 15, 113, 16, 17, 18, 19, 81, 20, 27, 22, 23, 24, 25, 26, 48, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 43, 136, 40, 58, 45, 42, 44, 46, 47, 53, 54, 55, 56, 57, 59, 60, 70, 61, 62, 63, 64, 65, 66, 68, 69, 71, 72, 74, 75, 76, 77, 78, 79, 80, 82, 83, 96, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 98, 97, 100, 101, 102, 103, 106, 104, 105, 112, 109, 108, 107, 110, 111, 114, 115, 118, 116, 117, 119, 148, 154, 124, 165, 122, 120, 123, 121, 150, 153, 125, 128, 129, 131, 132, 133, 134, 135, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 151, 149, 202, 175, 164, 152, 167, 155, 156, 157, 158, 159, 160, 161, 162, 163, 195, 169, 166, 168, 170, 171, 172, 199, 174, 173, 196, 200, 176, 177, 180, 178, 179, 182, 189, 187, 184, 186, 191, 192, 193, 194, 197, 198, 201, 203, 229, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 236, 231, 232, 233, 234, 235, 237, 240, 239, 241, 243, 242, 244,