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:10   #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ü Yapmak I - Dikey Menüler

Web sitelerinin vazgeçilmez öðelerinde biridir menüler. Menüler kullanýcýnýn oluþturduðumuz sayfalara hýzlý eriþimini saðlar. Bir çok site de Ürünler, Ýletiþim, Hakkýmýzda vb. bölümlerini menü öðesi olarak görürüz. Bu makalede sýrasýz listeler(<ul>)ve CSS yardýmý ile menü yapýmýný anlatacaðýz. CSS ile yapýlan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir.

Sýrasýz listeler(<ul>) ilk olarak listeleme iþlemleri için kullanýlsa da CSS’in yükseliþi ile birlikte menü oluþturmak için kullanýlmaya baþlandý. Aslýnda menülerde bir bakýma link listeleri olduðu düþünülürse iþlevinin dýþýnda kullanýlmadýðý da doðru bir tespittir. Kodumuzu yazmaya baþlayalým:

<ul class="menu">
<li><a href="index.html">Ana Sayfa </a></li>
<li><a href="hakkimizda.html">Hakkýmýzda</a></li>
<li><a href="urunler.html">Ürünler</a></li>
</ul>
Kodlama sonucu görüntü aþaðýdaki gibi olacaktýr.



Her linkin baþýndaki imgeleri kaldýrmak için:

ul.menu { list-style-type: none; }


Bir çok web tarayýcýsý sýrasýz listeleri(<ul>) yorumlarken yukarýda görüldüðü gibi otomatik olarak soldan bir padding/margin(bazý tarayýcýlarda padding uygularken bazýlarýnda margin uygular) mesafesi uygular bu mesafeyi sýfýrlamak için:

ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}


Bu bölüme kadar yazýlan kodlamalar hem dikey menüler hem de yatay menüler içinde aynýdýr. Ancak bundan sonra dikey menü ve yatay menü için kodlar deðiþecektir.

Dikey Menüler
Dikey menülerde linkler yukarýdan aþaðý doðru sýralanmýþtýr. Link elementi(a) inline-elementtir, her linke rollover özelliði kazandýrmak için:

ul.menu a { display: block; }
Biraz görselliði arttýrýrsak:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
}


Linkler web tarayýcýsýnýn geniþliði kadar uzayacaktýr, kendi istediðimiz geniþliðe sahip olmak için:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
}


Linkler arasýna biraz boþluk verelim:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
}


Linklerin altýndaki çizgileri kaldýralým:

ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
text-decoration: none;
}


þžimdi linklerimize rollover efekti vermek için a:hover kullanacaðýz:

ul.menu a:hover
{
background-color: #999;
}


son olarak linklerin arasýný ayýralým:

ul.menu li { margin: 0 0 .2em 0; }
Ýþte menümüzün son hali
gokhanaygun isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 187
Alt 01/03/08, 22:14   #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:37   #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:36   #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: 00:19 .


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,