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:13   #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 Menü Yapmak IV - Yatay Açýlýr Menüler

Bir önceki makalede dikey açýlýr menüleri gördük. Bu makalede yatay açýlýr menülere bir örnek vereceðiz. Html kodumuz ayný olsun

<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">þžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dýþý Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul> <li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
</ul>


Ýlk olarak satýr baþý boþluklarýný ve imgeleri kaldýralým. Dikey menüde olduðu gibi.

ul#menu, ul#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
Daha sonra menümüzü yatay hale getirmek için float özelliðini kullanalým. Normalda bunun için display:inline kodunu da kullanabiliriz.(Bkz. CSS ile Menü Yapmak II - Yatay Menüler) Sonra ilk linkleri göreceli olarak konumlandýrmalýyýz. Bu konumlandýrma aslýnda ikinci kademe açýlacak menüye mutlak konumlandýrma yapýlmasý için kullanýlýr.

Göreceli olarak konumlandýrýlmýþ(postion:relative) bir elementin içindeki Mutlak Konumlandýrýlmýþ(position:absolute) bir element içerik blokunun(burada menünün ilk linkleri) üst,sað,sol ve alttýndan hizalandýralabilir. Bu kullaným bize bir çok uygulmada yardýmcý olacaktýr ve bu kullaným ile çok güzel sonuçlar elde edeceðiz.

CSS ile konumlandýrma(positioning)

ul#menu li {
float: left;
position: relative;
width: 150px;
}
Sonra ikincil linkleri sayfaya ilk açýldýðýnda görünmez(display:none) yapalým. Birincil linklere göre konumlandýrmak için postion:absolute özelliði ve top:19px (satýr yüksekliði 15px + 2px alttan(sonra ekleyeceðiz) + 2px üstten(sonra ekleyeceðiz)) özelliðini kullanalým.

ul#menu li ul {
display: none;
position: absolute;
top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
left: 0;
}
Yalnýz burada IE sorun çýkaracaktýr. IE ve Opera ikincil menüleri konumlandýrmasýnda sorun çýkarýr, bunu engellemek için:

ul#menu li > ul {
top: auto;
left: auto;
}


Görünümü biraz güzelleþtirelim:

ul#menu li a {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000;
background: #efefef;
text-decoration: none;
}
ve rollover hali için:

ul#menu li a:hover {
color: #a00;
background: #fff;
}
Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için:

ul#menu li:hover ul { display: block; }
Önceki makalede belirttiðimiz gibi bu kod IE’de çalýþmayacaktýr. IE’de çalýþmasý için aþaðýdaki kodlarý yazmalýyýz.

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Ayrýca aþaðýdaki kodu da eklemeliyiz.

ul#menu li:hover ul, ul#menu li.over ul{ display: block; }
Önemli bir not olarak koddaki <ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); ayný olmasýna dikkat edelim.

iþte sonuç:


þimdiye kadar anlatýlan menü kodlarýnda iþin yapýsý öðretilmeye çalýþýlmýþtýr. Bu kodlarý kullanarak çok çeþitli menüler yapýlabilir, bunu gerek internette arayarak ve gerekse kaynaklar bölümündeki linklere göz atarak görebilirsiniz. Bir çok menü türü bu þekilde tasarlanabilir. alt kademeli, deðiþik renklerde ve deðiþik ebatlarda menü yapýlabilir.
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:38   #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:37   #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:40 .


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,