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ş: 36
Mesajlar: 925
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 Sekmeli(Tab) Menü Yapımı

Sekmeli menümüzü Doug Bowman’ın Sliding Doors tekniği ile yapacağız. Bu teknik bize esnek yapılı, yuvarlak kenarlı sekmeli menü yapma olanağı sağlar. Adım adım gidersek

1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:

<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Haberler</a></li>
<li><a href="#">Ürünler</a></li>
</ul>
Tekniğin özeti şu menü oluşturmak için hazırlanan XHTML kodunda sırasız listeler(li) bir zemin resmi(sekme_sag_resim.gif) ve link elementine(a) bir zemin resmi(sekme_sol_resim.gif) atayarak esneklik sağlamak.

2. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
float: left;
border-bottom: 1px solid gray;
}
3. Adım Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.



Bu resimlerin yüksekliklerinin uzun olmasının nedeni font boyutunun arttırılması(yakınlaştırma) durumunda iki satır olabilecek menülerde menü görünümünün bozulmaması içindir.

4. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:

ul li {
float: left;
background: url(images/sekme_sag_resim.gif) no-repeat top right;
}
5. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-height tanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:

li a {
background:url(images/sekme_sol_resim.gif) no-repeat left top;
display: block;
padding: 0 2em;
line-height: 2.5em;
text-decoration: none;
float: left;
color:#000;
}
6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

ul a:hover {
color: #9D9C9C;
}
Örnek kodları indirmek için tıklayınız.

Sonuç: Kodumuzu çalıştırdığımızda aşağıdaki sonucu elde edeceğiz. Tab menüye bir çok örnek var resimli, resimsiz, resimli rollover gibi Linkler bölümündeki linklerde veya internette aratarak bir çok örnek bulabilirsiniz.
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.890
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ı: 317
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.545
Tecrübe Puanı: 50 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:38   #4
firari
Mareşal
 
firari - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Sep 2007
Mesajlar: 5.839
Tecrübe Puanı: 104 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)
 
Konu Araçları
Stil

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:32 .


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,