CSS ile Menü Yapmak III - Dikey Açılır Menüler 

12 Nisan 2008 21:47 · Doğan · Etiketler css dersleri

Bu tip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayıcısı tarafında desteklenen(IE6 ve öncesi dahil) açılır menü yapılabilir. Aslında javascript’e ihtiyaç olmamasına karşın IE7′den önceki sürümler için javascript kodu gerekmektedir.

Açılır menü yapmak için daha önceki menü örneklerinde olduğu gibi sıralanmamış listeleri(

•  
  1. Anasayfa
  2. Haberler
  3. şirket Haberleri
  4. Yurt içi Haberleri
  5. Yurt dışı Haberleri
) kullanacağız. Buradaki fark alt kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış liste olarak eklenmesidir.

İlk olarak satır başı boşluklarını ve imgeleri kaldıralım.

1. ul {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 150px;
6. }

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.

1. ul li {
2. position: relative;
3. }

Bir sonraki adımda da ikincil açılan menüleri konumlandırmak olacaktır. Her birinci linke karşılık gelen ikincil açılır menüler ilkinin sağına konumlandırılmalıdır. Bunun için soldan 149px değeri verilir. 1 piksel sola kaydırılır ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasın. Ayrıca ikincil linklerin ilk sayfa açıldığında görünmemesi için display:none özelliği atanır.

1. li ul {
2. position: absolute;
3. left: 149px;
4. top: 0;
5. display: none;
6. }

Açılır menü yapısını oluşturmuş olduk şimdi linkleri güzelleştirip menü haline getirmek için önceki menüleri yaparken uyguladığımız kodları uygulayalım. Linklerin kendine has alanlarını tanımlamak için display:block özeliğini kullanalım. Linklerin altındaki çizgiyi kaldırmak için text-decoration:none özelliğini kullanalım. Linkler arasına mesafe vermek için padding verelim. Birde bir zemin rengi tanımı ver kenarlık tanımı yapalım. Üstteki linkin alt kenarlığı ile alttaki linkin üst kenarlığı üst üste bineceğinde alt kenarlık değerini sıfırlayalım.

1. ul li a {
2. display: block;
3. text-decoration: none;
4. background-color: #E2E2E2;
5. padding: 5px;
6. border:1px solid #000;
7. border-bottom:0;
8. }

Bu kodu yazdığımızda IE linkler arasına boşluk koyacaktır(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:

1. /* IE. gizle */
2. * html ul li { float: left; height: 1%; }
3. * html ul li a { height: 1%; }
4. /* IE den gizleme sonu */

En alttaki çizgimiz eksik kalmaması için ilk link ul’sinin alt kenarlık tanım yaparız.

1. ul {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 150px;
6. border-bottom: 1px solid #00;
7. }

Birincil menü görünümü tamamlandı ancak ikincil menüler görünmüyor. İkincil menüleri göstermek için:

1. li:hover ul { display: block; }

Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da IE7′den öncesi bu kodu desteklemez.

Ayrıca aşağıdaki kodu da eklemeliyiz.

1. li:hover ul, li.over ul{ display: block; }

0 yorum

CSS İpuçları 13 - CSS’de Cellspacing=”0″ nasıl yakalarız 

11 Nisan 2008 16:29 · Doğan · Etiketler css dersleri

Artık sayfalarımızı CSS ile oluşturup şekillendiriyoruz. Tabloların Cellspacing=”0″ atamasını css ile nasıl yaparız. İşte cevabı:

1. table{
2. border-spacing: 0px;
3. border-collapse: collapse;
4. }

bu kadar.

kaynak : http://www.mularien.com/blog/2007/07/29/css-tip-css-equivalent-to-cellspacing0/

0 yorum

CSS İpuçları 14 - IE div yüksekliği sorunu 

11 Nisan 2008 16:29 · Doğan · Etiketler css dersleri

1. our_style {
2. height: 1px;
3. width: 100px;
4. background-color: black;
5. }
6. […]
7. <div class=”test”></div>

Bu kod Firefox’da sorunsuz çalışmasına karşın IE’de yükseklik 10px görünecektir. Bir bakıma IE boş içeriğin yüksekliğini 10px kabul ediyor, ancak bu bizim işimizi bozuyor. Çözüm ise çok basit.

1. .test {
2. font-size: 0
3. height: 1px;
4. width: 100px;
5. background-color: black;
6. }

Sadece font-size tanımını 0 atamamız yeterli.

Kaynak: http://vaig.be/2007/04/07/div-styleheight-1px-bug-in-ie/

0 yorum

CSS İpuçları 11 - CSS Kodlarını Web Tarayıcıları ile Test etmek 

11 Nisan 2008 16:28 · Doğan · Etiketler css dersleri

CSS ile web sayfası oluştururken en çok yaptığımız işlerden biri yaptığımız sayfaları yazarken belirli aralıklarla web tarayıcıları ile deneyerek eğer hata var ise zamanında düzelterek sorunları büyümeden gidermektir. Ben kod yazarken her nesneyi yerleştirdikten sonra web tarayıcısı ile test ediyorum. Mesela arama bölümünü ekledikten sonra, banner alanını ekledikten sonra vb. Bazı önemli öğelerde bu test işini daha fazla yapıyorum mesela menüyü oluştururken, sayfa genel yapısını oluştururken.

Kodlarımı genelde ilk olarak Firefox’da test ediyorum. Belli aralıklarla IE’de test ediyorum. Tüm site bittikten sonrada Opera’da test ediyorum. Son olaraktan IE eski sürümleri ile test ediyorum. Bu iş için bazı programlar olsada ben her zaman web tarayıcılarının kendileri ile test etmeyi uygun görüyorum. Tüm kodlama bittikten sonra böyle bir program kullanarak test etmekte yararlı olabilir.

Firefox kullanmamın nedeni CSS ve XHTML ile sorunlarının az olması ve çok kullanışlı web araçlarının(web developer ve FireBug gibi) olmasının bunda etkisi büyük.

0 yorum

CSS İpuçları - 12 : 3 köşeye border tanımı 

11 Nisan 2008 16:28 · Doğan · Etiketler css dersleri

Normalde tüm köşelere kenarlık(border) tanımlarken:

1. border: 1px solid #333;

kullanılır. Tek köşeye kenarlık vermek içinse:

1. border-[top-right-bottom-left]: 1px solid #333;

kullanılır. köşeye kenarlık vermek için her birini ayrı ayrı tanımlamamız gerekir.

1. border-top: 1px solid #333;
2. border-right: 1px solid #333;
3. border-left: 1px solid #333;

Bunun yerine olmayan kenarı(örn: alt kenar) görünmez yaparak hallede biliriz.

1. border: 1px solid #333;
2. border-bottom: 1px solid #fff;

0 yorum

CSS İpuçları 9 - CSS ve (X)HTML kodlamada yorum satırı eklemenin avanytajları 

11 Nisan 2008 16:27 · Doğan · Etiketler css dersleri

Kodlarınıza yorum satırı ekleyerek daha anlaşılır ve erişilebilir kılın. CSS ile Tablosuz web sayfası tasarımında sayfa bölümleri div ile ayrılır ve bir çok yerde div elementi kullanılır.

Divleri açtıktan sonra araya onlarca satır yazı, farklı farklı kodlar girmiş olabilir. Böyle bir durumda div etiketlerinin nerede kapatıldığını kestiremeyebilirsiniz. Bu sorundan kurtulmak için genel kullandığınız div’leri açıp kapatırken yorum satırı ekleyin:

1. <!– baş kısım başlangıcı –> <div id="basKisim">
2. …..
3. </div><!– baş kısım sonu –>
4. <!– içerik başlangıcı –><div id="IcerikKismi">
5. ……
6. </div><!– içerik sonu –>
7. <!– alt kısım başlangıcı –><div id="AltKisim">
8. …..
9. </div><!– alt kısım sonu –>

Yukarıdaki yöntem küçük çaplı sitelerde lazım olmaya bilir ancak büyük içerikli sitelerde çok büyük faydaları vardır.

0 yorum

CSS İpuçları 10 - CSS’e eklenen resimlerinin konumu 

11 Nisan 2008 16:27 · Doğan · Etiketler css dersleri

Css dökümanları içindeki resim yolu css dökümanının konumuna göre verilir. Eklendiği (x)html sayfasının konumuna göre değil.

0 yorum

CSS İpuçları 8 - CSS id ve sınıf ismi verirken dikkat edilecek hususlar 

11 Nisan 2008 16:26 · Doğan · Etiketler css dersleri

Sınıf ve Id isimlerimizi fiziksel özelliklerine göre değil işlevsel özelliklerine göre isimlendirmeliyiz.

Bu size kod-içerik tutarlılığı, düzen ve anlaşılırlılık kazandıracaktır. Mesela “kirmiziKutu” ataması size zorluklar çıkarır. Mesela daha sonra bu kutuyu yeşile boymanız istendiğinde ismi kırmızı olan fakat yeşil bir kutunuz olmuş olur. Aynı proje üzerinde birden fazla kişi çalıştığını hatta kendi kodunuzu 2 ay sonra geri döndüğünüzü düşünün ve çıkın karmaşanın içinden.

Bu nedenle CSS’de sınıf ve ID ismi verirken işlevsel isimler vermeye dikkat etmeliyiz. Örneğin SagKolon, Logo ve UstKisim gibi

0 yorum

CSS İpuçları 7 - CSS yorum kodu ekleme 

11 Nisan 2008 16:25 · Doğan · Etiketler css dersleri

CSS kodlarımızı yazdığımızda kod yapımız, kullandığımız teknikleri ve diğer özel uygulamalarımız için yorum satırları eklemeliyiz. Çünkü daha sonra kodumuzu incelerken bu yorumlar bize yardımcı olacaktır. Ayrıca bir proje üzerinde birden fazla kişi çalışıyorsa diğer çalışanlar için bu kodlar önemli bilgiler içerecektir.

CSS’de yorum eklemek çok kolaydır.

1. /* Genel Stiller */
2. body {
3. font-size: 67.5%; /* genel font tanımı */
4. }
5. /*
6. Birden fazla satır içeren
7. kodları bu şekilde kullanabilriz.
8. */

0 yorum

CSS İpuçları 6 - CSS kısaltmaları hakkında 

11 Nisan 2008 16:24 · Doğan · Etiketler css dersleri

Genel özellikleri bir kere tanımlayarak tekrarlardan kurtulabiliriz. Bu sitemizi hız ve tutarlılık kazandıracaktır.

Örneğin sitemizde kullanılan genel font ve font rengini body içinde tanımlayarak bir çok tekrarı engellemiş oluruz.

1. body {font:Arial, Helvetica, sans-serif; color: #474747 }

0 yorum