Gelişmiş CSS Dersleri

Konu: Gelişmiş CSS Dersleri 10/5/2008, 11:16 pm

CSS’de Kalıtsallık(Inheritance)
XHTML dokümanlarının yapısından ve CSS ile olan ilişkisinden (X)HTML Sayfa Yapısı ve CSS Kullanımı makalesinde bahsetmiştik, bu makaleden önce bir göz atmanızı tavsiye ederiz. XHTML öğeleri bir biri ile bir ailenin birbiri ile olan bağı gibi bağlıdır. Hatırlıyorsanız bir soy ağacı benzetmesi yapmıştık. İşte bu soy ağacının öğeleri arasında bir kalıtsallık söz konusudur. Ebeveynden çocuğuna geçen özellikler gibi XHTML öğeleri arasında CSS özellikleride kalıtsal olarak alt elementleri(çocuk element) etkiler. Kalıtsallık; CSS ile web sayfası kodlarken tüm elementlere tek tek atama yapabildiğimiz gibi birde bir elemente atama yaparız ve bu özellik tüm alt(çocuk elementleri) elementlerinede uygulanır buna kalıtsallık denir. CSS’in bir çok özelliğinin kalıtsallık özelliği vardır. Hızlı CSS Referansı bölümü ve alt bölümlerinde her özelliğin kalıtsallık durumunu belirtmiştik.

Bazı CSS özelliklerinde kalıtsallık yoktur. Örneğin margin, padding ve border özellikleri gibi tüm liste aşağıda

CSS1′de kalıtsallığı olmayan özelliklerin listesi:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background
* text-decoration
* vertical-align
* margin-top
* margin-right

* margin-bottom
* margin-left
* margin
* padding-top
* padding-right
* padding-bottom
* padding-left
* padding
* border-top-width
* border-right-width

* border-bottom-width
* border-left-width
* border-width
* border-color
* border-style
* border-top
* border-right
* border-bottom
* border-left
* border

* width
* height
* float
* clear
* display

Örnek bir kodlama yaparsak:

1. div#icerik {
2. text-align: center;
3. }
4. ……
5. <div id=’icerik’>
6. Buradaki içerik ortalanacaktır
7. <p>
8. text-align özelliğinin kalıtsallığı olduğu için
9. buradaki içeirkte ortalanacaktır
10. </p>
11. </div>

Kalıtsallık kodlama yaparken bazen bize yaralı olur, bazende sayfalarımızda sorun çıkmasına neden olur. Bundan dolayı elementlerin kaltsallığı olup olmadığını bilmeliyiz. Yoksa gerçekten zor durumlarda kalabilirsiniz, tecrübeyle sabit

Direk atamalar kalıtsallığı yok eder. Örneğin yukarıda örnekte

1. p{
2. text-align: left;
3. }

tanımlaması ile üst element olan #icerik‘den kalıtsal olarak gelen text-align: center; tanımlamasını etkisiz kılar.
NN4x ve IE5x ve alt versiyonlarında body içerisindeki font tanımlamasının table elementine etki etmemesi gibi bir sorunumuz vardır.

body {font-size: 0.8em;}

tanımlaması NN4x ve IE5x’de kodlama içindeki tabloları etkilemeyecektir. Bunun için

body, td, th {font-size: 0.8em;}

gibi bir tanımlama daha uygun bir tanımlama şeklidir.
inherit değeri

CSS2 ile birlikte CSS özelliklerine inherit değeri atamamıza olanak sağlamaktadır. Tüm elementlere(kalıtsallık özelliği olmayanlar dahil) inherit değeri atayabiliriz. inherit değeri atadığımız element üst elementinin değerlerini alacaktır. Bir örnek yapacak olursak:

1. div#icerik {
2. border: 1px solid #000;
3. }
4. div#bilgi {
5. border: inherit;
6. }
7. …
8. <div id=’icerik’>
9. Bu içeriği kenarlığı olacaktır
10. <div id=’bilgi’>
11. Bu bilgi de kenarlık bilgisini üstten elementten alarak kenarlığı olacaktır.
12. </div>
13. </div>

Kalıtsallığı kullanarak kodlarımızı azaltabiliriz. Ancak kalıtsallık nedeni ile de bir çok sorunla karşılaştığımızıda unutmayalım.
Kaynaklar

* http://www.simplebits.com/
* http://www.devarticles.com
* http://www.w3.org/TR/REC-CSS1#inheritance
* http://www.adobe.com/
* http://www.creativepro.com/
* http://meyerweb.com/

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:18 pm

CSS’de Tanımlamalar ve Etkinlikleri(Specificity)
CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir.

Bir XHTML sayfamıza iki adet stil dosyası eklediğimizi düşünelim. Fakat bu stil dosyalarımızdan birinde h1 elementine bold özelliği atanmışken diğer stil dosyamızda italiktik özelliği atanmış. Bu durumda web tarayıcıları hangisini uygulayacaktır. Hangisinin etkin olduğunu bulup ona göre sayfayı yorumlayacaktır.

Burada iki tanımlamanın yakınlık dereceleri aynı. O zaman hangisi uygulanacak. Böyle durumlarda web tarayıcıları kendilerine has garip bir hesaplama sistemi kullanırlar. Kuralları aşağıdaki gibidir.

* Kod içinde tanımlama yapılmışsa (inline-kod)
* Stil dosyasındaki tanımlı ID’lerin sayısına
* Sınıf tanımlalarının sayısına
* Seçicilerin sayısına bakar

Kod içinde tanımlama yapılmışsa (inline-kod) kısmı CSS2.1 ile gelen yeni bir özelliktir ve etkinlik değerini 4 basamağa çıkarmıştır. CSS2 ve öncesinde üç basamaklı hesaplama yapılmakta idi, kod içindeki tanımlamalar üç başamağa göre 1,0,0 olarak belirlenirdi.

Web tarayıcısı bu sayıları toplamaz. Yalnızca rakamları yanyana sıralar. Bu web tarayıcılarına özel bir aritmetik işlemdir. Bir örnek verecek olursak id değeri 2, sınıf değeri 3 ve seçici değeri 0 olan bir tanımlamada

0 (kod içinde değil), 2 (id), 3 (class), 0(seçici) = 0230

Değerini elde ederiz. Burada id değeri 100′ler basamağına sınıf değeri 10′lar basamağına yazılarak hesaplama yapılır ve ikiyüz otuz değeri elde edilir.

1. ul h1 li.secili {color: yellow;}

Yukarıdaki tanımlama da 0013 değerini elde ederiz.

0 (kod içinde değil), 0 (id), 1 (secili sınıfı), 3 (ul h1 li seçicileri) = 0013

1. h1 {color: blue;}

Bu tanımlamanın değeri 0001 dir. CSS belirlemeye göre yüksek değer alanın özelliği uygulanır. Her ikisinde de h1′e bir tanımlama yapılmıştır. Ancak tanımlama sistemleri farklıdır. XHTML kodumuzdaki h1 elementimizi mavi değil sarı(yellow) olarak gösterecektir.

Bide öncelik için!important tanımlaması vardır. Eğer yukarıdaki koda !important eklersek

1. H1 {color: blue !important;}

Tanımlama yukarıdaki gibi değiştirildiğinde h1 elementimiz mavi renkde görünecektir.

Eğer değer aynı olursa(mesela 0013 e 0013) ne olur, bu durumda son yapılan tanımlamanın özellikleri uygulanır.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:18 pm

CSS’de Çıktı alma (Print)
Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır.

Bazı siteler ki, çoğunlukla önemli bazı haber siteleri her sayfanın bir de çıktıya uygun hallerini de hazırlarlar. Ancak bu çok uğraş gerektiren bir durumdur ve de zaman alacak bir iştir. Kullanışlı değildir.

CSS bu duruma el atarak basit bir çözüm getirmiştir. Çıktıya uygun css kodu oluşturup bunu sayfamıza ekleyerek bu sorunları halledebiliriz. Web tarayıcıları normal css kodunu yorumlarken yazıcıdan çıktı almak istediğimiz de ise sizin hazırladığınız özel çıktı versiyonu kullanılacaktır.
Çıktı Almak için CSS Oluşturmak

Çıktı almak için oluşturduğumuz özel css’i sayfamıza eklemek çok kolay bildiğimiz link ekleme koduna fazladan sadece media kısmı eklenerek değeri print atanır.

1. <link rel=”stylesheet” type=”text/css” href=”ciktistil.css” media=”print”>

Diğer bir yöntemde import kullanımıdır.

1. <style type="text/css">
2. @import url("webicin.css") screen;
3. @import url("ciktial.css") print;
4. </style>

Çıktıya Uygun CSS Hazırlarken Dikkat Edilecek Hususlar

Fontları Değiştirmek

İlk yapılacak şey fontları değiştirmektir. Yukarıda da belirttiğimiz gibi web sitelerinde kolay okunurluluğu nedeni ile san-serif fontları kullanılır( Verdana veya Arial gibi) çıktı almak içinse serif fontları kullanılmalıdır(Times New Roman veya Garamond gibi) Örneğin sayfa içindeki h1 veya p için yapılan sans-serfi fontları serif fontlarla değiştirelim.

1. h1, p { font-family: Garamond, "Times New Roman", Times, serif; }

Web için verilen değerler px veya em yerine pt değeri kullanılmalıdır. Çıktı alırken daha iyi sonuçlar verir.

1. h1 { font: 24pt Garamond, "Times New Roman", Times, serif; }
2. p { font: 12pt Garamond, "Times New Roman", Times, serif; }

Ayrıca line-height değeri, font-weight değeri, word-spacing ve text-align değerlerini de çıktı ama durumu için düzenlemeliyiz. Bunu için we tarayıcılarının çıktı ön izleme özelliğinden yararlanabilriz. Firefox web tarayıcısının bu ve diğer web düzenlemeleri için güzel bir eklentisini de kullana bilrisiniz. Buradan indirebilirsiniz. http://chrispederick.com/work/webdeveloper/

Bazı Elementleri Kaldırmak

Sitemizdeki bazı elementler çıktı almamızda bize lazım olmayacaktır örneğin sol menü, bannerlar vb. Bu elementleri elemeliyiz bunun en kolay yöntemide display:none‘dır.

Bir elementin display özelliğini "none" yaparak çıktı alırken görütülenmesini engelleriz. Örneğin solmenu için #SolMenu tanımlması yapmış isek

1. #SolMenu{display:none}

kodu ile bu bölümü çıktı alırken görüntü dışında bırakacağız. Bu yöntemi formlar, menüler, bannerlar, ana resimler hariç diğer resimler vb. gereksiz bölümleri bu şekilde çıkarmalıyız.

Margin’ler, Renkler ve Diğerleri

Çıktı alırken yazıların tabloları ve diğer elementlerin daha açık ve net görünmesi için aralarına belirli mesafeler vermeliyiz.

1. table { margin-top:10px;}
2. div { margin:10px}

Çıktı alacağımız sayfalarda px vd. birimler yerine inç birimini kullanmak daha iyi sonuçlar verir.

1. table{margin:sin}
2. div{margin:1in}

Renklerle ilgili olarakta şunu söyleyebilriz ki, web sitelerinde bir çok renk kullanılır ancak bu renklerin çıktı alırken görünümü web tarayıcılrdaki görünümüne benzemez, bu nednele fontları siyah veya grinin toplarında yapmalıyız. Arkaplanı da beyaz yapmalıyız.

Bunu dışında diğer elementlerin çıktı alırken görünüşleri çıktı ön izleme ekranından bakılarak çıktıya en uygun duruma getirilebilir.

Sonuçta yapılacakları kısa özetlersek:

* Renklerin siyah-beyaz yapılması
* Font ailelerinin serif yapılması
* font-size değerlerinin ayarlanması
* Tüm linklerin altının çizilmesi
* Çıkarılması gereken bölümler için site yapısı katmanlardan oluşturlması
* Ana resimler hariç diğerlerinin çıkarılması
* Menülerin çıkarılması
* Banner ve tanıtım yazılarının çıkarılması
* Sağ, Sol ve alt bölümlerin çıkarılması
* Tüm javascript, flash, form ve hareketli gif’lerin çıkarıtlması gereklidir.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:19 pm

CSS ile Kutu modeli, sorunları ve çözümleri

CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.

CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:

Margin’ler her zaman transparandır. Border’lar üç şekilde( solid, dashed ve dotted) olabilir. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.

Bir elementin toplam genişliği; sol+sağ marginleri, sol+sağ padding’leri, sol+sağ border’ları ve elementin içeriğini kapsar. Margin’ler, padding’ler ve border’lar opsiyonel elementlerdir fakat başlangıçta bunların değerleri ‘0′ olarak belirlenmiştir. Yükseklik içinde durum aynıdır. üst-alt margin değerleri, üst-alt padding değerleri, üst-alt border değerleri ve içerik alanı yükseliği toplamı yükseklik değerini oluşturur.

Box modeli iki elementi bulunur. Blok-level elementler ve inline-level elementler.

Blok-level elementler : Blok-level elementin görünüş formatı bir kutu gibidir. Blok-level elementler inline elementleri ve diğer blok-level elementleri içerebilir. Tipik özellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li vd.

Inline-level Elementler : Inline elementler bir içerik gibi görünür, diğer bir inline elelementi veye bir metni içere bilir. Genelde yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span vd.

Tüm kutu modelleri aşağıdaki bölümleri içerir:

İçerik Alanı: Elementin asıl içeriğini oluşturan kısmıdır. Metin ve nesneler içerir.

Padding : Elementin kenarındaki dolgu alanıdır.

Border : Elementin kenarlıklarıdır.

Margin: Elementin kenar boşluklarıdır.
Box Model Sorunu ve Çözümü

W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding, border ve margin değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding, margin ve border değerleri toplamıdır.

Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE‘un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding, margin ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.

1. #icerik{
2. width:200px;
3. padding:10px;
4. margin:5px;
5. }

Standart web tarayıcıları bu durumu şöyle yorumlayacaklardır.

200+10+ 5+10+5 = 230px

kutu elemetinin genişliği 230px olacaktır.

Ancak IE‘un IE6/strict’den önceki versiyonlar için kutu elementinin genişlik değeri 200px’dir.

Bu sorunun çözümü için üretilmiş bir çok yöntem vardır. Ancak bence en sağlamı tantek‘in ürettiği koddur ve burada bundan bahsedeceğim.

1. #icerik{
2. width:230px;
3. padding:10px;
4. margin:5px; /* Bundan sonraki kısmı ie5win sakla */
5. voice-family: "\"}\"";
6. voice-family:inherit;
7. width:200px;
8. }

Burdaki ilk genişilk değeri(2. satırdaki) IE‘un IE6/strict’den önceki versiyonların yorumlayacağı genişlik değeri, ikinci genişlik değeri(7. satırdaki) ise standart yorumu destekleyen web tarayıcılarının kullanacağı değerdir.

Bu kodlamada son olarak Opera 5 için bir kod ekleyeceğiz.

1. #icerik{
2. width:230px;
3. padding:10px;
4. margin:5px; /* Bundan sonraki kısmı ie5win sakla */
5. voice-family: "\"}\"";
6. voice-family:inherit;
7. width:200px;
8. }
9. html>body #icerik {
10. width:200px;
11. }

Not: Aynı şeyler yükseklik(height) içinde geçerlidir.

Kaynaklar

http://css-discuss.incutio.com/?page=BoxModelHack

http://www.createwebmagic.com/css101/lesson2/?inc=part3

CSS Hacks and Filters : Making Cascading Stylesheets Work

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:19 pm

CSS Kodlama Teknikleri ve CSS Kodlarını Azaltma Yöntemleri
Yaptığımız siteleri kodlarken en az kodla ve en düzenli kodlamayı nasıl yaparızı araştırmalıyız. Bu konu çok önemli bir konudur burada bunun yöntemlerini anlatmaya çalışacağız. (X)HTML ve CSS kod azaltma bizlere bir çok avantaj sağlar. Az kodun anlamı hzılı erişimdir. Ayrıca az kod sitemizin bulundurulduğu sunuculara az yük ve az bantgenişliği kullanımı demektir. Bu bizleri ve sistem yöneticilerini sevindiren bir haberdir. Bu makale aynı zamanda CSS kodlama tekniklerini öğretecektir.
1- Torun Seçicileri kullanmak

CSS kodlamada bize çok büyük yardımı olan Torun Seçicileri bir örnek vererek göstereceğiz. Bir web sayfasını bir bölümünü kodlmaka için iki yöntem göstereceğiz. Torun Seçicilerin kodlamadaki önemini daha iyi kavrayacağız.

Genelde siteler üst kısım, sol kısım, içerik kısmı, sağ kısım ve alt kısım gibi belli genel parçalara ayrılır. Bu örneğimizde "solkolon" adı verilen bir katmanımızın(<div>) kodlamasını göreceğiz. Tüm sol bölümü içine alan bir kapsayıcı katmanımız ve içerik bölümü mevcuttur. İlk yöntemimiz bir çok sitede de kullanılan her elemente bir sınıf atması yaparak kodlama yöntemidir.

a - Sınıf Kullanımı

1. <div id="solkolon">
2. <h3 class="solkolonbaslik">Site Hakkında </h3>
3. <p>Site hakkındaki yazılar </p>
4. <h3 class="solkolonbaslik">Öneriiler</h3>
5. <ul class="solkolonlink">
6. <li class="link"><a href="arkadaslar.html">Arkadaşlar</a></li>
7. <li class="link"><a href="siteler.html">Siteler</a></li>
8. </ul>
9. </div>

Yukarıdaki kodlama bir çok web sitesinde kullanıla gelmiş bir yöntemdir. CSS’in gücünü ilk olarak keşfeden kodlamacılar her elemente bir sınıf tanımlaması yaparak kullanmayı tercih ede geldiler.

Yukarıdaki kodlamada iki h3 elementine "solkolonbaslik" sınıfını tanımladık. Bu sınıfa verilen özellikler sadece bu iki h3 elementine uygulanacaktır. Aynı işlem ul ve li elementleri içinde geçerlidir.

Başlıklara serif fontu, turuncu rengi ve kenarlık ekleyelim ve listelerimizinde yanındaki işaretleri kaldıralım:

1. .solkolonbaslik {
2. font-family: Georgia, serif;
3. color: #c63;
4. border-bottom: 1px solid #ccc;
5. }
6.
7. .solkolonlink {
8. list-style-type: none;
9. }
10. .link {
11. font-weight: bold;
12. }

Tanımladığımız özellikleri elementlere atadık, buradaki elementlerin kendine has tanımları vardır. Aynı yöntemi kullanrak tüm sayfamızı kodlayabilriz.

Yazdığmız kod sorunsuz çalışıyor. Ancak bu kullanımda her element için bir sınıf tanımlaması gerekecektir. Bu belli bir zamandan sonra çok kullanışsız ve zor bir yöntem halini alacaktır. şžimdi ikinci yönteme göz atalım.

b- Doğal Seçiciler

1. <div id="solkolon">
2. <h3>Site Hakkında </h3>
3. <p>Bu site benim hakkımdadır.</p>
4. <h3>Fotoğraflarım</h3>
5. <ul>
6. <li><a href="eskifoto.html">Eski</a></li>
7. <li><a href="yenifoto.html">Yeni</a></li>
8. </ul>
9. </div>

Görüldüğü gibi tüm sınıf atamaları kaldırılmıştır. Peki tüm sınıfları kaldırdıysak elementlere nasıl atama yapacağız? Elemetnleri tanımlarken #solkolon tanımımız içine giriyoruz. Her elemente stil atamak için solkolon id’li elementini referans alıyoruz. Örneğin solkolon içindeki h3 elementinlerine (#solkolon h3) şeklinde özel tanımlamalar yapabiliyoruz. Bu yöntem ile kullandığımız kod sayısı azalacak ve kodlarımız daha anlaşılır hala gelecektir. Bu yöntem ile bir çok elemente sınıf tanımı yapmaktan kurtulacağız.

Bu yöntemi sadece bir bölüme uyguladık(solkolon kısmına), ancak bu işi tüm sayfa ve site bazlı da yapabilriz. Örneğin icerikAlani, altKisim bölümlerine de uygulayabiliriz. Bu uygulama bize her bölümde farklı atamalar yapmamıza izin verir. Mesela #icerikAlani kısmında ki h3 elementini kırmızı #altKisim bölümündeki h3 elementini mor yapabiliriz. Ayrıca tüm bölümlerdeki h3‘lerede genel bir tanımlamada yapabilriiz.

1. h3 {
2. font-family: Georgia, serif; /* tüm h3 ler için atama*/
3. }
4.
5. #icerikAlani h3 {
6. color: red;
7. }
8.
9. #menuAlani h3 {
10. color: orange;
11. }

Genel h3 elemetine serif font ailesi tanımlanmı, icerik alanındaki h3 kırmızı, menu alanındaki h3 kavuniçi olacaktır. Böylelikle bir çok kod ve sınıf tanımından kurutulmuş olduk.

Bu kodlama metodu sadece kod azaltmaya değil ayrıca kodlarımızı daha okunaklı ve organize kullanmamızı sağlamaktadır. CSS tabanlı hazırlanmış büyük çaplı sitelerde bu metod bize çok büyük kazanımlar sağlayacaktır.

Fazladan sınıf kullanmak yerine Torun Seçicileri kullanarak kod azaltma yöntemi bize çok büyük avantajlar sağlayacaktır.

Örneğin SolKisim’daki linklerin rengini kırmızı yapmakl istesek.

1. <div id="solkolon">
2. <h3>Site Hakkında </h3>
3. <p>Bu site benim hakkımdadır.</p>
4. <h3>Fotoğraflarım</h3>
5. <ul>
6. <li><a href="eskifoto.html" class="kirmizilink" >Eski</a></li>
7. <li><a href="yenifoto.html" class="kirmizilink" >Yeni</a></li>
8. </ul>
9. </div>

ve bu sınıf için css tanımı yapacak olursak.

1. a:link.kirmizilink {
2. color: red;
3. }

Bu kodumuz sorunsuz çalışacaktır. Ancak bu kodlama metodunda ileriye dönük bir sorunuzmu olacaktır. Bu linklerin rengini değiştirip siyah yapmak istedik. Rengi kolayca siyaha çevirebiliriz ancak verdiğimiz isim ile içerik çakışacaktır. Siyah renge kirmizi isim!

Bunun yerine doğal seçicileri kullanrak bu işlemi yapsa idik durum farklı olacaktır.

1. #SolKisim li a:link {
2. color: red;
3. }

Bu tanımla bizim işimizi görecektir. Ayrıca bir değişiklik olduğunda sadece tanımı değiştirmemiz bize yetecektir. Bu metod bize kolay, temiz ve kullanışlı bir kodlama olanağı sağlamkatadır. Bunu uygulamarımızda kullandıkça daha iyi kavrayacağız.
2- Gereksiz <div> Kullanımından vazgeçilmesi

Sayfa kodlarken içeriklerimizi düzenlemek için bir çok <div> elementi kullanırız.

1. <div id="menu">
2. <ul>
3. <li><a href="foto.html">Fotoğraflar</a></li>
4. <li><a href="ders.html">Dersler</a></li>
5. <li><a href="bize_ulasin.html">Bize Ulaşın </a></li>
6. </ul>
7. </div>

Yukarıdaki kodlmada da görüldüğü gibi bir liste ve bunu çevreleyen bir menu id’si verilmiş bir katman kullandık. Bu kullanımı tüm sitemizde kullandığımız düşünürsek bir çok kavrayıcı fazla katmanımız olacaktır. Eğer bu kod daki gibi katman bir blok level bir elementi kapsıyorsa katman kullanımına gerek yoktur. Bu katmanı kaldıra biliriz.

1. <ul id="menu">
2. <li><a href="foto.html">Fotoğraflar</a></li>
3. <li><a href="ders.html">Dersler</a></li>
4. <li><a href="bize_ulasin.html">Bize Ulaşın </a></li>
5. </ul>

Yukardaki gibi bir kodlama ile kavrayıcı katman kullanımı ile aynı işlemleri yapabiliriz buradaki ul elementi bir blok-level elementi olduğu için kavrayıcı katmana uyguladığımız bir çok özelliği(padding, margin, vd.) bu elemente de uygulayabilriz. Bu sayede bir çok kavrayıcı katmandan kurtuluruz.

Burada şuna dikkat edilmelidir ki eğer bu kavrayıcı katman yerine kullanılan elementin içinde başka bir element yok ise bu yöntem uygulanır. İçinde <p>, <blockquote> veya <form> gibi elementler varsa bunları tanımlama yaptığımız kavrayıcı ul dışına çıkarmalıyız.
3- CSS’in kalıtsallık özelliğinden yararlanmak

CSS elementleri kalıtsal olan ve kalıtsal olmayan elementler diye ayırır. Biz kalıtsal elemnleri kullanarak bir çok fazla koddan kurtulabiliriz.

1. p { font-family:Verdana, Arial, sans-serif }
2. td { font-family:Verdana, Arial, sans-serif }
3. li { font-family:Verdana, Arial, sans-serif }
4. dt { font-family:Verdana, Arial, sans-serif }
5. dd { font-family:Verdana, Arial, sans-serif }

Yukarıdaki şekilde bir çok element içinde font tanımı yapmak yerine body elementi içinde bir tek font tanımı ile bu kargaşaya son verebilriz. Bu site standartlarına uymayı kolaylaştıracak ve düzenleme kolaylığını sağlayacaktır.

1. body { font-family:Verdana, Arial, sans-serif }

4- Uygun Benzer Stilleri Gruplamak

Bir çok özelliği aynı olan stil tanımlarında farklılıklar ayrılarak aynı bölümler gruplanarak kod azaltılabilir.

1. h1 { font-size:120%; margin-bottom:0; font-family:Verdana,sans-serif }
2. h2 { font-size:110%; margin-bottom:0; font-family:Verdana,sans-serif }
3. h3 { font-size:100%; margin-bottom:0; font-family:Verdana,sans-serif }
4. h4 { font-size:100%; margin-bottom:0; font-family:Verdana,sans-serif }

Bu kullanım yerine

1. h1,h2,h3,h4 { margin-bottom:0; font-family:Verdana,sans-serif }
2. h1 { font-size:120% }
3. h2 { font-size:110% }
4. h3,h4 { font-size:100% }

5- CSS Kısaltmalarını kullanmak

CSS bazı elementlerin tanımlasını yaparken kısaltmaları kullanmamıza izin verir, yani aynı etkiyi daha az kodla yapmamıza olanak sağlar. Ayrıntı için CSS’de Kısaltmalar kısmına bir göz atın.
6- CSS kodunu katagorilere ayırmak

CSS’i Web Sayfalarına Eklemek makalesinin 4. kısmında da bahsettiğimiz gibi, içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirilmesi gerekmez ve kod yönetimi kolaylaşır.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:20 pm

CSS ile konumlandırma(positioning)
CSS konseptinin üç önemli konusu kutu modelleme, konumlandırma(positioning) ve floating konularıdır.

Burada CSS ile konumlandırma hakkında bilgi vermeye çalışacağız.

Konumlandırma ile alakalı olduğu için blok-level ve inline-level elementlerin tanımını tekrarlayacağız.

Blok-level elementler : Blok-level elementingörünüş formatı bir kutu gibidir. Blok-level elementler inlineelementleri ve diğer blok-level elementleri içerebilir. Tipiközellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li

Inline-level Elementler : Inline-level elementler biriçerik gibi görünür, diğer bir inline elelementiiçerebilir. Yeni satır veya boşluk oluşturmazlar. Örnek: a, strong,span

Ancak bizbu elementlerin başlangıç değerlerini display özelliği ile değiştirebilriz. Yani biz bir inline-level element olan bir linki(<a>….</a>) blok-level bir elemente dönüştürebiliriz. Aynı şekilde bilr blok-level elementi inline elemente dönüştürebilriz.

CSS’deüç temel konumlandırma şekli vardır: normal akış(position:static ve position:relative), float ve mutlak konumlar(position:absolute). Tüm elementler başlangıçta normal akış şeklindekonumlandırılmıştır.
Normal Akış

Eğer sayfalardaki elementlere herhangi bir konumlandırma yapılmamış ise veya float değeri verilmemiş ise sayfaya normal akış konumlandırması uygulanır. Sayfailk element en üstte son elementte en sonda olacak şekilde sıra ile aşağı doğru sıralanacaktır.

Inlene kutular yatay olarak tasarlanır. Yatay boşluk margin, padding ve kenarlıkla hesaplanır. Bu nedenle dikey margin, padding ve kenarlık değerleri etkisizdir.

Normal Akış şžeması
position

Yapısı : position: <deger>
Aldığı Değerler : static | relative | absolute | fixed | inherit
Başlangıç değeri: static
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Browser Uyumu:

Internet Explorer 4+(kısmen: IE4 den sonra absolute, relative, static destekler), IE 7 den sonra (fixed destekliyor)
Netscape 4+(kısmen) NN6+ sonra tümünü destekler
Opera 5.0+
CSS Profile 2.0
top, right, bottom, left

Yapısı : top, right, bottom, left : <deger>
Aldığı Değerler : <uzunluk> | <yüzde> | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok
Browser Uyumu:

Internet Explorer 4+(kısmen: yüzde ve uzunluk değeri), IE 6+ tümü(inherit hariç)
Netscape 4+(kısmen: yüzde ve uzunluk değeri) NN6+ sonra tümünü destekler
Opera 5.0+
CSS Profile 2.0
Göreceli Konumlandırma(position:relative)

Göreceli konumlandırma anlaşılması kolay bir konsepttir. Bir elemente göreceli bir değer verdiğiniz de o bulunduğu yeri dikkate alarak verilen değerleri uygulayacaktır. Bir elementin(göreceli) başlangıç noktasını dikey ve yatay olarak değiştirebilriz. Eğer biz elementin üst(top) değerine 20px tanımlarsak element bulunduğu yerden 20px aşağıya kayacaktır, eğer elementin sol(left) değerini 20px olarak tanımlarsak elementimiz soldan 20px sağa doğru kayacaktır.

1. p#FarkliParagraf{
2. position: relative;
3. left: 20px;
4. top: 20px;
5. }

CSS Nisbi konumlandırma

Görecelikonumlandırma kullanılarak yeri belirlenen bir elementin başlangıçtaki konumundaki boşluğu ve diğer elementlerle arasındaki mesafeyi koruyacaktır.
Mutlak(Absolute) Konumlandırma

Görecelikonumlandırma Normal Akış’ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan elementbulunduğu yere boşluk bırakmayacaktır. Diğer elementler normal akıştakiyerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi

Mutlak konumlandırılmışelementin konumu en yakındaki üst elementin konuma bağlıdır. Eğer birata elementin konumu belirlenmemişse elementimiz ana bloka göre konumalanacaktır. Mutlak konumlandırma HTMLelementi ve sayfa çözünürlüğünü ile ilişkilidir.

Göreceliolarak konumlandırılmış bir elementin içindeki Mutlak Konumlandırılmış birelement içerik blokunun ü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 snuçlar elde edeceğiz.

İnsanların konumladırma ile iligi genel problemeleri hangikonumlandırma seçeneğinin ne işe yaradığını unutmalarıdır. Göreceli Konumlandırmasayfadaki elementin başlangıç durumuna göre göreceli bir durumda olduğunu,oysa Mutlak Konumlandırmanın en yakın ata elemente veya içerik blokunagöre göreceli değer içerdiğidir.

Mutlak Konumlandırma ile yerleştirilmiş element sayfada elementi normal akışın dışına çıkarır. Bu element diğer elementlerinüzerine binecektir. Bu üstte kalma altta kalma işinide z-index özelliğiile hallede bilriz. z-index değeri büyük olan element üstte küçük olan element ise altta kalacaktır.
z-index

Yapısı : z-index: <deger>
Aldığı Değerler : <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok
Browser Uyumu:

Internet Explorer 4+(kısmen: IE4 den sonra auto ve sayısal değerleri destekliyor)
Netscape 4+(kısmen) NN6+ sonra tümünü destekler
Opera 5.0+
CSS Profile 2.0

Örneğin geniş bir blok içindeki bir parafratakiyazıların sağ ve altta olmasını istiyorsak. Dıştaki içerik kutusunugöreceli konumlandırıp içindeki paragrafı mutlak konumlandırarak bu işhalledebilriz.

1. #adresler {
2. width: 700px;
3. height: 100px;
4. position: relative;
5. }
6. #adresler .tel {
7. position: absolute;
8. right: 10px;
9. bottom: 10px;
10. text-align: right;
11. }
12. …..
13. <div id="adresler">
14. <p class="tel">Tel: 0845 838 6163</p>
15. </div>

Not:Bu kullanım gelişmiş tarayıcılar için geçerlidir. IE 5.5 veIE 6(Windwos)’da bu sorun çıkarır. Sorunu engellemek için yükseklik ve genişliktanımı yapılmalıdır.

Mutlak konumlandırma sayfa planlamasınınyaparken çok kullanılır. Özellikle göreceli konumlandırılmışbirata element varsa. Tüm siteyi sadece Mutlak Konumlandırma ile planlayabilmemiz mümkündür. Bunun için tüm elementlerin belirli boyutlandırmaişlemleri yapılması şarttır tabi bu elementlerin üst üste binmesiniengellemek için. Çünkü Mutlak Konumlandırılmış bir element doküman akışı dışına çakacaktır ve normal akıştaki element kutularına etkietmeyecektir. Eğer siz Mutlak Konumlandırdığınız elementi genişletmekisterseniz örneğin font boyutunu arttırdığınızda elementi kapasayan kutu normale göre genişlese de etrafındaki elemtlerinakışıdaki yeri değişmeyecektir.
Sabit(Fixed) Konumlandırma

Sabitkonumlandırma Mutlak Konumlandırmanın bir alt katagorisidir. Sabitkonumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle websayfasında bir elementin konumu sabitlemek için kullanabiliriz. Sabit konumladırılma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazıkki IE 6 bu özelliği desteklemiyor.IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. Ama bu problemi javascript ile çözümü vardır. Bir link

Kaynaklar

* CSS Mastery:
Advanced Web Standards Solutions
* Muhammed Sevim
* Web Standards Solutions: The Markup and Style Handbook

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:20 pm

Sabit Konumlandırma (Postion:fixed)
Bu konuya bir çalışmam dolayısıyla position:fixed özelliğini kullanma gereksinimi duyduğum için girdim, sonra araştırma sonuçları bir makale konusu olabileceğini düşünerek bu makaleyi yazdım. Biraz araştırınca birden fazla yöntem olduğunu gördüm. Bir ikisini uyguladım ve sonuçta birinde karar kıldım. Sizlere bu süreci ve postion:fixed hakkında genel bir bilgi sunacağım.

Bu konuya daha önce CSS ile konumlandırma(positioning) kısmında kısaca değinmiştik.

"Sabitkonumlandırma Mutlak Konumlandırmanın bir alt kategorisidir. Sabit konumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle web sayfasında bir elementin konumunu sabitlemek için kullanabiliriz. Sabit konumlandırma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazık ki IE 6 bu özelliği desteklemiyor. IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. "

Şeklinde genel bir bilgi verip bırakmıştık. Şimdi biraz daha ayrıntısına inelim.

Sabit konumlandırmayı sayfanın belli bir alanını sabitleyip diğer alanları bu kısmın yanından, altından kaydırmak için kullanırız genelde.

Aslında bunun için CSS bize position:fixed kodunu sunmaktadır. Ancak bu kodu IE6 ve önceki sürümlerde desteklememesi bize alternatif çözümler aramaya sevk ediyor. Buda bize bir makale yazma gereksinimi doğuruyor.

İlk metodumuz normal konumlandırma özelliğinin fixed uygulanmış şeklidir.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <style type="text/css">
5. body {
6. margin:0;
7. padding:0;
8. }
9. div#ustKisim {
10. position:fixed;
11. background: gray;
12. color: yellow;
13. height:50px;
14. width:100%;
15. top:0;
16. left:0;
17. }
18. div#icerik {
19. margin:75px 0 0 0;
20. }
21. </style>
22. </head>
23. <body>
24. <div id="ustKisim">Lorem ipsum dolor sit amet</div>
25. <div id="icerik">
26. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec erat. Fusce magna massa, nonummy eget, aliquam tempus, imperdiet vel, odio. Sed mauris. Quisque sodales urna vitae lorem. Vestibulum aliquet, odio aliquam convallis lobortis, turpis metus semper ligula, ut vulputate sem justo eu quam. Sed feugiat, lectus sit amet porttitor auctor, nulla odio volutpat nisl, sit amet egestas augue diam at urna. Sed justo arcu, luctus eget, porta in, auctor sit amet, massa. Integer interdum. Nunc condimentum scelerisque enim. Pellentesque orci. Maecenas at neque. Sed non diam ac turpis pretium dictum. Phasellus ligula felis, aliquet nec, tristique non, posuere a, magna. Duis eu quam quis tortor vehicula sodales. Donec et mi eget augue bibendum interdum. Proin dapibus odio.</p>
27. ….
28. </body>
29. </html>

Örneği görmek için tıklayınız.

Baştada belirttiğimiz gibi buradaki en büyük sorunumuz IE6 ve daha eski sürümlerde bu kodun çalışmamasıdır. Bundan sonraki metot buna çözüm aramak içindir.
IE6′da çalışan postion:fixed metodu

Bu metot IE’un css içinde expression() komutunu yardımı ile javascript kodu işletmemize izin vermesi prensinden dayanır. Bizde bu metodda bu komut yardımı ile position:fixed sorununu çözeceğiz. expression() yardımı ile daha önce IE’nin min-width ve min-height sorununu çözdüğümüzü hatırlayın.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Sabit Konumlandırma</title>
6. <style>
7. body {
8. background: #ffc;
9. font: 12px sans-serif;
10. margin: 0;
11. padding: 0;
12. }
13. div#ustAlan {
14. width: 100%;
15. height: 100px;
16. background: pink;
17. position: fixed;
18. top: 0;
19. left: 0;
20. z-index:100;
21. }
22. #icerik{
23. position:absolute;
24. top:105px;
25. }
26. </style>
27. <!–[if lt IE 7]>
28. <style>
29. body {
30. background: #ffc url(’http://’) fixed;
31. }
32. div#ustAlan {
33. position: absolute;
34. top: expression(eval(documentElement.scrollTop));
35. }
36. </style>
37. <![endif]–>
38. </head>
39. <body>
40. <div id="ustAlan">Sabit Konumlandırma</div>
41. <div id="icerik">
42. <p>Lorem ipsum dolor sit amet ….</p>
43. </div>
44. </body>
45. </html>

Sabit Konumlandırma

Örnek sayfayı görmek için tıklayınız.

Yukarıdaki kodu iki kısımda inceleyebiliriz. Birinci kısım ilk örnekte olduğu gibi position:fixed kullanılan IE7, FF, Opera ve Safari için yazılan kısımdır. İkinci kısım IE7′den önceki sürümleri belirten şartlı koşul içerisindeki kodlamadır. Bu sürümlerde position:fixed desteklenmediği için postion:absolute değeri atanmış ve üst değerimizi(top) javascript’in documentElement.scrollTop değeri yardımı ile belirlenip sabitlenmiştir.

Ayrıca alt alanı sabitlemek için

1. bottom: auto;
2. top: expression((documentElement.scrollTop + documentElement.clientHeight - this.clientHeight));

Kodlaması kullanılır. Örneği görmek için tıklayınız.

Sabitlemek istediğimiz nesneyi üstten 10piksel aşağıda sabitlemek için

1. top: expression(eval(documentElement.scrollTop) + 10);

şeklinde kodlarız. Bu kodlama tekniği kullanılarak birçok farklı şablon elde edilebilir.

Bu yöntemin bazı sorunları vardır, bunlara değinmeden geçmeyelim.

* Bu metot IE5′de ve IE7, IE6′da garip modda çalışmaz.
* Bu metot javascript’in hizmet dışı bırakıldığı tarayıcılarda çalışmaz.
* background: url(’http://’) fixed; anlamsız kodu kullanılmaktadır. Bu kod kaydırma çubuğu hareket ettikçe sabitlenen nesnenin kıpranmaması içindir.

Bunun dışında bir çok alternatif yöntem vardır. Benim deneyip en son kullanmaya karar verdiğim metot bu olduğu için sizlere bu kodu gösterdim. Ancak diğer örnekleri görmeniz için alternatif çalışmaların linklerini kaynaklar kısmında sizlere vereceğim.
Kaynaklar

* http://home.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html
* http://tagsoup.com/cookbook/css/fixed/
* http://annevankesteren.nl/test/examples/ie/position-fixed.html
* http://annevankesteren.nl/2005/01/position-fixed-in-ie
* http://annevankesteren.nl/2004/07/fixed-positioning
* http://www.howtocreate.co.uk/fixedPosition.html
* http://www.cssplay.co.uk/layouts/fixed.html
* http://www.cssplay.co.uk/layouts/body2.html
* http://www.cssplay.co.uk/layouts/fixit.html
* http://www.gunlaug.no/contents/wd_additions_15.html
* http://www.gunesintamicinde.com/ie-6-ve-position-fixed-problemi/

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:21 pm

z-index
z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.

z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmış elementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

z-index değeri dokümanımızdaki elementlerin istiflenme sıralarını belirler. z-index elementleri z-ekseninde nerede duracağınız belirler, üstte veya altta. z-indeks değeri küçük olan elementler altta büyük olan elementler ise üstte görünecektir. Sitenizi kodlarken birçok yerde z-index ihtiyaç duymayız çünkü normal sayfa akışında elementler yanyana durduğu için böyle bir özelliğe ihtiyaç yoktur, ne zamanki elementlere konumlandırma değeri tanımladığımızda elementler bir biri üzerine bindiğinde z-index değerine ihtiyaç duyarız. z-index mutlak, göreceli ve sabit konumlandırma atandığı veya elemente eksi değer verilerek konumu değiştirildiğinde uygulanır.

Yapısı: z-index: <deger>
Aldığı Değerler: <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok
Browser Uyumu:

Internet Explorer 4+(kısmen, IE4 den sonra auto ve sayısal değerleri destekliyor)
Netscape 4+(kısmen), 6+(tüm)
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0

Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.

1. div{
2. position:absolute;
3. width:150px;
4. height:150px;
5. }
6. div.bir {
7. background: #FEB3BE;
8. border:2px solid #CC8B94;
9. top: 0;
10. left: 0;
11. }
12. div.iki {
13. background: #E5ECF9;
14. border:2px solid #BCCCEB;
15. top: 10px;
16. left: 10px;
17. }

Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır. Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır. Üstte kalan katman alttakileri gizlemiştir. Tüm katmanların z-index değeri atanmamıştır bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.

1. <body>
2. <div class=’kapsul’>
3. <div class=’bir’></div>
4. <div class=’iki’></div>
5. </div>
6. </body>

z-index değeri otomatik olduğu için her katman html’deki sırasına göre yerleşmiştir. İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır.

Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.

Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için z-index değerini 2 versek. Mavi katmanın z-index değerini 1 verirsek katman görünümünü tersine dönecektir.

1. div{
2. position:absolute;
3. width:150px;
4. height:150px;
5. }
6. div.bir {
7. background: #FEB3BE;
8. border:2px solid #CC8B94;
9. top: 0;
10. left: 0;
11. z-index:2
12. }
13. div.iki {
14. background: #E5ECF9;
15. border:2px solid #BCCCEB;
16. top: 10px;
17. left: 10px;
18. z-index:1
19. }

İçiçe girmiş katmanlarda z-index davranışları farklıdır. İçiçe geçmiş katmanlardaki z-index:auto değeri gibi davranır ve sayısal atamaları dikkate almaz.

1. <body>
2. <div class=’kapsul’>
3. <div class=’bir’><div class=’iki’></div></div>
4. </div>
5. </body>

z-index değeri yüksek olmasına rağmen bir sınıfını alan katmana altta kalacaktır. Çünkü iç içe geçmiş elementlerde z-index’e atanan sayısal değerler geçersizdir. Sıralama z-index:auto ya göre yapılır.

Not

z-index eksi değerlerinde Firefox sorun çıkarıyor. Firefox 3′da sorun giderilmiş.
Sonuç

Sonuç olarak z-index özelliğinin çok kullanışlı ancak sorunları çok bir özellik olduğunu düşünüyorum. Birçok makalede istediğim manada detaylı bir z-index anlatımı bulamadığımı itiraf etmeliyim. Ancak kodlama yaparken aklımızda olması gereken kuralları kavrarsak z-index özelliğini daha bilinçli kullanacağımız kesin:

* z-index değeri; aynı z-ekseninde bulunan(kapsayan elementler hariç) katmanların altta mı üstte mi kalacağınız belirlemek için kullanılır.
* z-index sadece position değeri relative, absolute ve fixed olan nesnelere uygulanır.
* Saydamlık değeri(opacity) 1′den küçük verilen nesnelerde z-index kullanımı daha kolay anlaşılır.

Konumlandırma uygulanmış elementlerde z-index etkileri

* Mevcut sıralama durumunda elementin sırasını belirler
* Elementin kendi kısmındaki durumun belirler

Eğer z-index değeri atanmamış ise z-eksenindeki arkadan öne doğru sıralama aşağıdaki gibidir:

* Normal akıştaki kutular koddaki sıraya göre sıralanır
* float uygulanmış kutular
* Konumlandırma uygulanmış elementlerde ise kodlamadaki sıraya göre

z-indeks ile ilgi bazı problemler ve çözüm önerileri var bunları aşağıda listeledik bu linklerdeki çözümleri incelemenizi tavsiye ederiz. Karşıma çıkan bazı problem ve çözümleri sitede yayınlamaya devam edeceğim.
Kaynaklar

* http://www.search-this.com/2007/08/15/give-me-some-zzzzzs/
* http://www.brainjar.com/css/positioning/default5.asp
* http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-z-index (flash ve html elemtnleri)
* http://www.blooberry.com/indexdot/css/properties/position/zindex.htm (tarayıcı destek)
* http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html#z-index
* http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
* http://css-discuss.incutio.com/?page=OverlappingAndZIndex
* http://csscreator.com/blog/z-index
* http://www.fatihhayrioglu.com/?p=151
* CSS Mastery Advanced Web Standards Solutions
* Cascading Style Sheets The Definitive Guide
* Wrox Beginning CSS 2nd.Edition

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:21 pm

CSS ile sayfalarımızı ve elementlerimizi ortalamak
CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.
1- Genişleyebilir blok-level elementleri ortalamak

1. .ortala
2. {
3. margin-left: 10%;
4. margin-right: 10%;
5. }
6. …
7. <p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.
2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: "Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamına gelir."

1. .ortala2
2. {
3. margin-left: auto;
4. margin-right: auto;
5. width: 50em;
6. }

NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir.

Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç)

Bu metodu desteklemeyen web tarayıcıları için body etiketine text-align:center ataması yaptığımızda sorun çözülmüş demektir.

1. body
2. {
3. text-align: center;
4. }
5.
6. .ortala2
7. {
8. margin-left: auto;
9. margin-right: auto;
10. width: 50em;
11. }

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine(yani sola yaslamalıyız) çevirmeliyiz.

1. body
2. {
3. text-align: center;
4. }
5.
6. .ortala2
7. {
8. margin-left: auto;
9. margin-right: auto;
10. width: 50em;
11. text-align: left;
12. }

Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)

2.b. Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

1. .ortala3 {
2. width: 720px;
3. position: relative;
4. left: 50%;
5. margin-left: -360px;
6. }

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:21 pm

CSS ile Dikey Ortalama
Benimde çok fazla sıkıntısını çektiğim elementlerin dikey de ortalama işi için bir çok teori ve yöntem ileri sürülmektedir. Ben bunların en makbul olanını bulup uygulamak istedim ve bu makalede bunu sizlerle paylaşıyorum. Aslında bulunan çözümler beni tam olarak tatmin etmiyor desem yeridir. Aşağıda anlatılacak yöntem istediğimiz sonucu elde etmek için yeterli olacaktır.
CSS ile dikey oratalama ile ilgili farklı yöntemler vardır. Ayrıca bazı şartlara göre de kodlama önerileri vardır, biz burada bunlara değinmeden geçeceğiz. İlgilenenler makalenin sonunda verilen kaynaklar bölümündeki linkleri takip edip ilgili yöntemlere erişebilirler.

CSS ile dikeyde ortalama yapmak için vertical-align özelliği var ise de bu özellik HTML’deki tablo gibi çalışmaz. Yani istediğimiz sonuca bizi ulaştırmaz.

CSS vertical-align özelliği belirsiz yükseklikte(içeriği değişebilen) kutularda işe yaramaz.

IE için Keystone’un sunduğu çözüm; mutlak konumlandırma uygulanmış kapsayıcı elemente yüksekliğinin yarısı kadar top(veya margin-top) değeri uygulamaktır. Bu kapsayıcı elementin içindeki elementi dikeyde ortalayacaktır.

Mozilla, Opera, Safari gibi standart web tarayıcıları için çözüm çok farklıdır. Üstteki katmana display:table tanımı yapılır. İçteki elementlere de display:table-cell özelliği uygulanır. Ayrıca dikeyde ortalanmak istenen elemente vertical-align tanımı yaparak element dikeyde ortalanır. (Bu özelliği IE kavrayamamaktadır. Kavramamakta da ısrarlıdır. IE 7 display:table ve türevlerini desteklemiyor.)

İki çözüm vardır altçizgi(_) ve (#) ile yapılan bir çözüm vardır. IE(IE7 hariç) (_) ile tanımlanan kodu görmediği için yorumlamayacaktır. # ile başlayan kodları tüm IE versiyonları(IE7 dahil) görmeyecektir. Bu işaretlerin kullanım amacı tüm versiyonlarda aynı sonucu elde etmektir.

Aşağıdaki kod IE5+,FF, Opera 7, Konqueror 3.0.3 altında standart ve garip mod da çalışıyor.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2. <html>
3. <head>
4. <title>CSS ile dikey ortalama</title>
5. <style>
6. #Kapsul{
7. display: table;
8. height: 400px;
9. #position: relative;
10. overflow: hidden;
11. border: 1px solid green;
12. }
13. #IcerikAlani{
14. #position: absolute;
15. #top: 50%;
16. display: table-cell;
17. vertical-align: middle;
18. }
19. #alan{
20. #position: relative;
21. #top: -50%;
22. border: 1px solid green;
23. }
24. </style>
25. </head>
26. <body>
27. <div id="Kapsul">
28. <div id="IcerikAlani">
29. <div id="alan">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
30. </div>
31. </div>
32. </body>
33. </html>

Örneği görmek için tıklayınız.
Kaynaklar

* http://www.jakpsatweb.cz/
* http://wellstyled.com/
* http://www.hicksdesign.co.uk/
* http://www.student.oulu.fi/

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:22 pm

Float ve Clear özellikler ile konumlandırma
CSS ile sayfa planlamak için kullanılan yöntemlerden bir tanesidir float ve clear özelliklerinin kullanımı. Float bir elementi Normal Akışın dışına çıkarmak için kullanılan bir yöntemdir. Bir biri ardına sıralanmış elementlere float uygulandığında elementler eğer yeterli alan varsa yan yana dizilirler. Float Dinamik Göreceli Konumlandırma gibidir ve bu amaçla kullanılabilir.

Clear özelliği ile float uygulanmış element’den sonraki elementlere float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elementin yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu element float uygulanmış elementin altında konumlanacaktır.
float

Yapısı : float: <deger>
Aldığı Değerler : left | right | none | inherit
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Browser Uyumu:

Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

Float ilk olarak resimleri konumlandırmak için kullanılmıştır. Resimlerin metinlere göre konumunu belirlemek için HTML 1.0 ile birlikte align özelliği kullanıldı. Böylelikle resimler metinlere göre sola veya sağa konumlandırması imkanı sağlanmış oldu. Bu kullanım float ile benzerdir. Resimleri konumlandırmak için kullanılan bu yöntem daha sonra CSS’in olaya el atması ile tüm elementler için kullanıla geldi. Ayrıca float özelliği çoklu kolon oluşturmak için de kullanılır.

1. img {float:left; margin:0 4px 4px 0;}

float:left ataması yapılan resim sola dayanacak ve metin bu resmin etrafını saracaktır.

1. <img src="resim.gif" width="150" height=150 alt="resim bilgisi" />
2. <p>… paragraf metni … </p>

Bir elemente float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya diğer float kutusunun dış kenarının sağına veya soluna kaydırılabilir. Float uygulanan kutu, dökümanın normal akışının dışına çıkacaktır. Dökümandaki normal kutular float elementi burda yokmuş gibi normal akışına devam edeceklerdir.

Aşağıdaki şekilde görüldüğü gibi başlangıçta normal akış içinde bulunan 1.kutu float:right özelliğ ile sağ tarafa kaymış ve normal akıştaki elementlerin akışı 1.kutu yokmuş gibi devam etmiştir.

Aşağıdaki şekilde float:left tanımlaması yapılarak 1.kutu kapsayıcı kutunun en soluna dayanmıştır. Diğer iki kutu ise normal akışına devam etmektedir.

1. p {float:left; width:200px; margin:0;}
2. img {float:left; margin:0 4px 4px 0;}

Burada her iki elemente de float uygulanarak metnin resmi sarmasına son verilmiştir. Bu çoklu kolon oluşturma tekniğinin basit bir örneğidir. Float uygulanan her element satır boyunca yan yana dizilecektir.

Eğer kapsayıcı kutu genişliği her üçünün sığacağı kadar değil ise sondaki kutu kendiliğinden aşağı kayacaktır. Eğer kutular farklı yükseklikte ise yükseliği düşük olan kutudan sonra gelen kutu bunun altında devam edecektir. Bu durumu düzeltmek için clear özelliği kullanılır bunu aşığda göreceğiz.

clear

Yapısı : clear: <deger>
Aldığı Değerler : none | left | right | both
Başlangıç değeri: tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Browser Uyumu:

Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

Float ile sık sık kullanılan diğer özellik clear’dir. Float elementinin etkisinden kurtulmak için clear özelliğini kullanırız. Float uygulanmış kutu sonra gelen elementleri etkiler bu etkiden kurtulmak için clear özelliği kullanılır.

clear özelliğinin kullanımına örnek verecek olursak. Eğer float uygulanmış element’ten sonraki elementin içeriği float uygulanmış kutunun yüksekliğinden küçük ise bir sonraki element de bu float uygulamasından etkilenecektir. Biz bu etkiyi kaldırmak için clear özelliğini kullanırız. Clear özelliği üst kutu ile araya gerekli mesafeyi koyacaktır, bir bakıma üst kutu ile araya üst margin değeri ataması yapmaktır.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:23 pm

İçiçe Float Elementlerinin Kullanımı
İçiçe float elementlerinin kullanımı basit bir kodlama ile bize çok güzel imkanlar sağlar. Bir genel float elementinin sağ üstüne bir float element yerleştirelim. Bu kodlama genelde menü ve resim ekleme gibi durumlar için kullanılır.

1. #icerikAlani {
2. margin: 10px;
3. border: 1px solid gray;
4. }
5. #icerikAlani #menu {
6. float: right;
7. width: 150px;
8. border-left: 1px solid gray;
9. border-bottom: 1px solid gray;
10. margin-left: 5px;
11. }

İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek için float:right, genişliğini belirlemek için width:150px, sol ve alt kenarlıklarını belirlemek için border-left ve border-bottom(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık ataması yapmadık) ve içerik metini ile arasında boşluk bırakmak için margin-left atamlarını yapıyoruz.

1. <div id="icerikAlani">
2. <div id="menu">
3. <ul>
4. <li><a href="anasayfa.html">Ana Sayfa </a></li>
5. <li><a href="haberler.html">Haberler</a></li>
6. <li><a href="iletisim.html">İletişim</a></li>
7. </ul>
8. </div>
9. <h1>Lorem Ipsum Dolar </h1>
10. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> . . .
11. </div>

Örnek sayfayı görmek için tıklayınız.
Not: Örnek kodlar ie5.0, ff2.0 ve opera9.0 da test edilmiştir.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:23 pm

CSS İLE WEB SAYFASI OLUŞTURMA
CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır. CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır. Eskiden sayfayapısını tablolarla oluştururduk. Bu kullanımın bir çok sorunları vardı. Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır. Biz burada bu konudan bahsedeceğiz.

CSS ile sayfa planlaması yaparken bazı problemlerle karşılaşacağız, ancak buradan şu anlaşılmamalı CSS’de sorun var. Aksine sorun CSS’den değilde standartları kendine göre yorumlayan web tarayıcılarından kaynaklanmaktadır. Zamanla bu web tarayıcıları kendine çeki düzen vermeye başladı(Örn: İE7 de CSS sorunlarının bir çoğunu halletti) Amaç körü körüne tablosuz web sayfası tasarlamak değil, sayfalarımızı standartlara ve web tarayıcılarına en uygun şekilde kodlamaktır. Hiç tablo kullanmayayım diye tablo kullanılması gerek yerlerde de tablo kullanmamak abesle iştigaldir.

Aslında şimdiye kadar ki makaleler de bu konunun temellerini attık.CSS ile konumlandırma(positioning) , Float ve Clear özellikler ile konumlandırma vd. makaleler bu işin temellerine değindik. Burada daha elle tutulur örneklerle bu metodu anlatmaya çalışacağız.

CSS sayfa planlama metodları üç temel konu üzerine inşa edilmiştir. Konumlandırma, floating ve margin farklılıkları. Bu üç temel konu anlaşıldıktan sonra CSS ile sayfa planlamayı anlamamız çok kolaydır. Biz burada floating metodu ile sayfa oluşturmayı göreceğiz. Bunun dışında konumlandırma öğeleleri kullanarak sayfa oluşturma ve eksi margin değeri ile sayfa oluşturma metodlarıda vardır. Ancak biz burada bunlara değinmeyeceğiz.
Sabit Genişlikteki Sayfalarda İki Kolonlu Yapı

İlk olarak XHTML kodlarını yazalım.

1. <div id="sayfa">
2. <div id="ustAlan">
3. …
4. </div>
5. <div id="icerik">
6. …
7. </div>
8. <div id="anaMenu">
9. …
10. </div>
11. <div id="altAlan">
12. …
13. </div>
14. </div>

Önemli bir nokta varki oda icerik alanının anaMenu‘den önce gelmesi gerekmektedir. Erişebilirlilik(yani tüm araçlarda sayfamızın en iyi şekilde görünmesi) için icerik alanının anaMenu‘den önce gelmesi gerekir. Çünkü pda ve cep telefonu gibi araçlarda katmanların sıralamasına göre ekranda görüneceğinden, ilk olarak içerik alanının görünmesi tercih sebebidir. şžimdi css kodumuzu yazarsak:

1. #sayfa
2. {
3. width:768px;
4. }
5.
6. #ustAlan
7. {
8. width: 768px;
9. }
10.
11. #icerik
12. {
13. float: right;
14. width: 568px;
15. }
16.
17. #anaMenu
18. {
19. float: left;
20. width: 200px;
21. }
22.
23. #altAlan
24. {
25. width: 768px;
26. clear: both;
27. }

Bu kodu yazdıktan sonra sayfamız başta gördüğümüz şekildeki duruma gelmiş bulunmaktadır. Burada yazdığımız kodda "icerik" alanının sağa, "anaMenu" alanının sola yerleşmesi için genişlik değeri ve float değerleri tanınmlanmıştır. Ayrıca altAlan‘ın bu iki bölümün altında kalması için clear:both tanımlaması yapılmıştır.

CSS ile sayfalarımızı ve elementlerimizi ortalamak bölümündeki metodu uygulayarak sayfamızı ortalayabilriz.

1. body{
2. text-align:center;
3. }
4.
5. #sayfa{
6. width: 768px;
7. margin:0 auto;
8. text-align:left;
9. }

Sabit Genişlikteki Sayfalarda en çok rastlanan problemler sabit genişlik uygulanan katmanlara pading, margin ve border değeri atandığında IE5 de sorunlu görünmesidir bu problemi aşmak için iki yöntem vardır. Birinci yöntem CSS ile Kutu modeli, sorunları ve çözümleri bölümünde anlatılmıştır. ikinci yöntem ise kapsayıcı katmanlara(icerik, anaMenu vb.) padding ve margin vermek yerine kapsayıcı katman içindeki elementlere bu atamaları yapmaktır.

Basit yapılı sayfalarda ikinci yöntemi, karmaşık yapılı sayfalarda ise birinci yöntemi denemenizi öneririm.
Likit Sayfalarda İki Kolonlu Yapı

Likit Sayfalarda Sabit Genişlikteki Sayfalar’dan farklı olarak genişlik değerleri piksel(px) olarak değil yüzde(%) olarak verilmesidir. Bu tür sayfalarda sayfa genişliği web tarayıcısının boyutu ile bağlantılıdır. Web tarayıcısının genişliği arttırıldığında sayfa genişliği artacak, web tarayıcısının genişliği azaltıldığında sayfa genişli azalacaktır. Kodu yazarsak:

1. body{
2. text-align:center;
3. }
4.
5. #sayfa{
6. width:83%;
7. margin:0 auto;
8. text-align:left;
9. }
10.
11. #ustAlan
12. {
13. width: 100%;
14. }
15.
16. #anaMenu
17. {
18. float: left;
19. width: 30%;
20. }
21.
22. #icerik
23. {
24. float: right;
25. width: 70%;
26. }
27.
28. #altAlan
29. {
30. width: 100%;
31. clear: both;
32. }

Kolonlu Yapı

Bir çok sitede üç kolonlu yapı kullanılmaktadır. kolonlu yapı ile iki kolonlu yapının kodlamasında fazla bir fark yoktur. Tek yapamız gereken yapıyı iki kolonlu bölümlere ayırmaktır, bunun için sağdaki iki kolonu bir kapsayıcı katman(KapsayiciAlan) içine alarak yapıyı iki kolonlu hale getirdik(anaMenu ve KapsayiciAlan)

1. body{
2. text-align:center;
3. }
4.
5. #sayfa{
6. width:768px;
7. margin:0 auto;
8. text-align:left;
9. }
10.
11. #ustAlan
12. {
13. width:768px;
14. }
15.
16. #anaMenu
17. {
18. float: left;
19. width: 200px;
20. }
21.
22. #KapsayiciAlan
23. {
24. float: right;
25. width: 568px;
26. }
27.
28. #icerik
29. {
30. float: left;
31. width: 368px;
32. }
33.
34. #BannerAlani{
35. float: right;
36. width: 200px;
37. }
38.
39. #altAlan
40. {
41. width:768px;
42. clear: both;
43. }

Ve ayrıca xhtml koda da aşağıdaki değişiklikleri yaptığımızda üç kolonlu yapıyı elde ederiz.

1. <div id="sayfa">
2. <div id="ustAlan">
3. …
4. </div>
5. <div id="KapsayiciAlan">
6. <div id="icerik">
7. …
8. </div>
9. <div id="BannerAlani">
10. </div>
11. </div>
12. <div id="anaMenu">
13. …
14. </div>
15. <div id="altAlan">
16. …
17. </div>
18. </div>

Aynı şekilde Likit sayfalarda üç kolonlu yapı oluşturabiliriz. Yapmamız gerek tek şey değerleri (%) olarak vermektir.

4,5 vd. kolonlu yapıyı da aynı şekilde yapabiliriz. Bence 3 kolonlu yapıdan sonraki kadamelerde(4,5 vd.) tüm katmanlara float:left verilerek oluşturmak daha mantıklı ve kolay olur.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:24 pm

CSS İLE WEB SAYFASI OLUŞTURMA II
Elastik Web Sayfaları Oluşturma

Likid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir.

Elastik Sayfalar web tarayıcılarına göre font boyutunun ve elementlerin genişliğinin göreceli olarak ayarlandığı sayfalardır. Genişlikleri em, yüzde(%) ve ex gibi göreceli birimler kullanarak tanımladığımızda font boyutu sayfa genişliğine göre değişecektir. Aynı şekilde satır yüksekliği(line-height) değerinde de göreceli birimler kullanarak daha okunaklı sayfalar elde edebilriz.

Elastik sayfa planlama metodununda bazı problemleri vardır, örneğin sabit genişlikteki sayflardaki gibi elastik metodda da boş alanlar yeterince kullanılamaz. Çünkü font boyutu arttırılırsa sayfa genişliği tarayıcının genişliğini geçecektir ve yatay kaydırma çubuğu çıkacaktır. Bu durumdan kurtulmak için body elementine max-width 100% ataması yapabilriz. Ancak bu özelliği IE6 desteklememektedir.

Elastik web sayfası tasarlamak çok kolaydır. Sabit Genişlikte sayfa tasarımı yapılan bir sayfanın birimleri piksel yerine em olarak değiştirilirse sayfa elastik yapıya kavuşacaktır. 1em yaklaşık olarak 10piksele denk gelir.
em’in asıl tanımı küçük "m" harfi genişliğidir. Normalde em font boyutu birimi olarak kullanılır ancak CSS’de width,line-height vd. özelliklerin birimi olarak da kullanılabilir. Em üst elemente veya diğer elementleri baz alarak göreceli bir değer alır. Bu özellik bize elastik web sayfası hazırlama imkanı verir.

Çoğu web tarayıcısınnda normal font boyutu 16px’dir. 10 pikselin yüzdesel değeri yaklaşık olarak 62.5% civarındadır. Bu belirtilen değerlere göre kodumuzu yazarsak:

1. body{
2. text-align:center;
3. font-size:62.5%;
4. font-family:Arial, Helvetica, sans-serif;
5. }
6.
7. #sayfa{
8. width:72em;
9. margin:0 auto;
10. text-align:left;
11. }
12.
13. #ustAlan
14. {
15. width:72em;
16. }
17.
18. #anaMenu
19. {
20. float: left;
21. width: 18em;
22. }
23.
24. #KapsayiciAlan
25. {
26. float: right;
27. width: 52em;
28. }
29.
30. #icerik
31. {
32. float: left;
33. width: 32em;
34. }
35.
36. #BannerAlani{
37. float: right;
38. width: 20em;
39. }
40.
41. #altAlan
42. {
43. width:72em;
44. clear: both;
45. }

Burada body elementi font boyutunu 1em eşit olan font-size:62.5%; atamasını yaptık. Daha sonra sayfadaki birimleri bu değeri baz alarak hesapladık ve em birimi vererek sayfamızı elastik bir hala getirdik.

Sayfamızın Sabit Genişlikteki sayfalardan farkını anlamak için web tarayıcısının font boyutu değerlerini veya yakınlaştırma(zoom) aracını (Opera, FF-eklentisi var ve IE 7 de var)kullanarak görebilriz. IE ve FF için Görünüm(View) - Metin Boyutu(Text Size) Opera için View - Zoom seçeneklerini kullanarak farkı görebilriz.

Konu: Geri: Gelişmiş CSS Dersleri 10/5/2008, 11:24 pm

CSS ile Web Sayfası Oluşturma III
Aksak Kolonlar(Faux Column)

CSS ile sayfa kodlaması yaparken karşımıza çıkan sorunlardan biridir Aksak Kolonlar(faux column). Genelde isimlendirme olarak Faux Kolon diye geçsede ben burada Aksak kolon olarak kullanacağım. Basit bir örnek verecek olursak; içerik ve sağ kolon diye iki kolondan oluşan bir yapımız olsun. Bu kolonların zemin renklerinin farklı olduğunu düşünelim. Aşağıdaki şekildeki gibi

İçerik ile sağ kolonun farklı yükseklite olması bir sorundur ve sorunu çözmek için bir kaç yöntem mevcuttur. Biz burada en kolayı ve en kullanışlı olanı anlatmaya çalışacağız.

Bu metodda yapılan iki kolon bir kapsayıcı katman içine alınarak iki kolonun zemin resmi bu kapsayıcı katmana tanımlanmaktır.

1. #kapsayiciKolon
2. {
3. background: #fff url(zemin_ard.gif) repeat-y left top;
4. }

Aynı şekilde üç kolonlu yapılar içinde çözüm üretilebilir. Sabit genişlikte sayfalarda Aksak Kolonları düzeltmek bu kadar kolaydır. Esnek yapılı sayfalarda Aksak Kolonları düzeltmek biraz daha zordur. Web tarayıcısının boyutları değiştiğinde kolon şekli ve kolon boyutu değişecektir. Likit tasarıma sahip bir sayfada Aksak Kolon sorunun çözümü zemin resmi konumlandırma değerlerini yüzde olarak vermektir.

Eğer zemin pozisyonunu belirlemek için piksel değeri kullanıyorsanız, elementin sol üst köşesine göre zemin resminizi piksel değeri vererek konumlandırırsınız. Yüzdesel konumlandırma ile zemin resmi konulandırıldığında, atanan değerler hem üst elemente göre, hem de elementin kendine göre konumunu belirler. Örneğin:

1. background: #fff url(resim.gif) no-repeat 25% 10%;

Yukarıdaki tanımlama sonucunda zemin resmi hem üst elementin %10 üst ve %25 solundan mesafe alacaktır, hemde kendi içinde %10 üst ve %25 soldan mesafe alacaktır. Aşağıdaki şekilde gösterilmiştir:

Likit içerikli üç kolonlu sayfalarda Aksak kolon sorununun çözümüne bakalım.

Bir örnek yapacak olursak;

Daha önce likit bir sayfanın nasıl yapılacağını bahsetmiştik. İsterseniz yine de bir göz atın Yukarıdaki ekranda da görüldüğü gibi orta kısıma birden fazla zemin rengi uygulamamız gerekiyor. Bunun için likit sayfa oluştururken yaptığımız Kapsayıcı katmana bir zemin resmi sağ taraftaki iki kolonumuzu kapsayana ikinci katmana da ikinci zemin resmimizi tanımlayarak güzel bir sayfa oluşturacağız.

2000 piksel genişliğinde ve 10 piksel yüksekliğinde bir zemin resmi hazırlayalım(Sol Alan Zemin resmi). Sonra 1.Aksak Kolonumuzu oluşturalım(#SolKolon) . Menü alanı bu kapsayıcı elementin 23% genişliğine sahip olacaktır. Ayrıca yine 23% genişliğe sahip bir alan daha oluşturmalıyız(Sağ İçerik Alanı). 2000px genişliğindeki zemin resmini kapsayan alandan Aksak Kolona atanan zemin renginin genişlik değeri 460 piksel olacaktır. Aksak alanın zemin renginin dışındaki alalanları(1540px) transparan yapmak için zemin resmimizi .gif formatında yapmalıyız.

1. #KapsayiciAlan {
2. width: 85%;
3. margin: 0 auto;
4. text-align: left;
5. background: #fff url(images/sol_zemin_resmi.gif) repeat-y 23% 0;
6. }

Benzer şekilde ikinci bir içerik oluşturarak sağda kalan iki kolona aynı metod uygulanabilir. Yine 2000 piksel genişliğinde 10 piksel yüksekliğinde bir zemin resmi hazırlayıp bu sefer resmin sağ tarafına sağ kolon zemin rengi doldurulur ve kalan bölge transparan olacak şekilde kaydedilir. ikinciAlan’ın KapsayiciAlan’a göre konumu karşılatırmak için Bu Aksak kolonun soldan mesafesi resmin soldan mesafesi %77(100-23)’den başlamalıdır. Çünkü KapsayiciAlan’ın zemin resmi zaten uygulanmıştır bu nedenle biz ilk Kapsayici alan içine bir tane daha ikinciKapsayiciAlan eklemeliyiz. Bu yeni ikinciKapsayiciAlan‘nınada zemin resmi atamalıyız.

1. #ikinciKapsayiciAlan
2. {
3. background: url(images/sag_zemin_resmi.gif) repeat-y 77% 0;
4. }

Bu şekilde çok güzel bir 3 kolonlu likit bir sayfa elde ederiz.

Örnek çalışma için tıklayınız.

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:44 pm

CSS İLE WEB SAYFASI OLUŞTURMA
CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır. CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır. Eskiden sayfayapısını tablolarla oluştururduk. Bu kullanımın bir çok sorunları vardı. Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır. Biz burada bu konudan bahsedeceğiz.

CSS ile sayfa planlaması yaparken bazı problemlerle karşılaşacağız, ancak buradan şu anlaşılmamalı CSS’de sorun var. Aksine sorun CSS’den değilde standartları kendine göre yorumlayan web tarayıcılarından kaynaklanmaktadır. Zamanla bu web tarayıcıları kendine çeki düzen vermeye başladı(Örn: İE7 de CSS sorunlarının bir çoğunu halletti) Amaç körü körüne tablosuz web sayfası tasarlamak değil, sayfalarımızı standartlara ve web tarayıcılarına en uygun şekilde kodlamaktır. Hiç tablo kullanmayayım diye tablo kullanılması gerek yerlerde de tablo kullanmamak abesle iştigaldir.

Aslında şimdiye kadar ki makaleler de bu konunun temellerini attık.CSS ile konumlandırma(positioning) , Float ve Clear özellikler ile konumlandırma vd. makaleler bu işin temellerine değindik. Burada daha elle tutulur örneklerle bu metodu anlatmaya çalışacağız.

CSS sayfa planlama metodları üç temel konu üzerine inşa edilmiştir. Konumlandırma, floating ve margin farklılıkları. Bu üç temel konu anlaşıldıktan sonra CSS ile sayfa planlamayı anlamamız çok kolaydır. Biz burada floating metodu ile sayfa oluşturmayı göreceğiz. Bunun dışında konumlandırma öğeleleri kullanarak sayfa oluşturma ve eksi margin değeri ile sayfa oluşturma metodlarıda vardır. Ancak biz burada bunlara değinmeyeceğiz.
Sabit Genişlikteki Sayfalarda İki Kolonlu Yapı

İlk olarak XHTML kodlarını yazalım.

1. <div id="sayfa">
2. <div id="ustAlan">
3. …
4. </div>
5. <div id="icerik">
6. …
7. </div>
8. <div id="anaMenu">
9. …
10. </div>
11. <div id="altAlan">
12. …
13. </div>
14. </div>

Önemli bir nokta varki oda icerik alanının anaMenu‘den önce gelmesi gerekmektedir. Erişebilirlilik(yani tüm araçlarda sayfamızın en iyi şekilde görünmesi) için icerik alanının anaMenu‘den önce gelmesi gerekir. Çünkü pda ve cep telefonu gibi araçlarda katmanların sıralamasına göre ekranda görüneceğinden, ilk olarak içerik alanının görünmesi tercih sebebidir. şžimdi css kodumuzu yazarsak:

1. #sayfa
2. {
3. width:768px;
4. }
5.
6. #ustAlan
7. {
8. width: 768px;
9. }
10.
11. #icerik
12. {
13. float: right;
14. width: 568px;
15. }
16.
17. #anaMenu
18. {
19. float: left;
20. width: 200px;
21. }
22.
23. #altAlan
24. {
25. width: 768px;
26. clear: both;
27. }

Bu kodu yazdıktan sonra sayfamız başta gördüğümüz şekildeki duruma gelmiş bulunmaktadır. Burada yazdığımız kodda "icerik" alanının sağa, "anaMenu" alanının sola yerleşmesi için genişlik değeri ve float değerleri tanınmlanmıştır. Ayrıca altAlan‘ın bu iki bölümün altında kalması için clear:both tanımlaması yapılmıştır.

CSS ile sayfalarımızı ve elementlerimizi ortalamak bölümündeki metodu uygulayarak sayfamızı ortalayabilriz.

1. body{
2. text-align:center;
3. }
4.
5. #sayfa{
6. width: 768px;
7. margin:0 auto;
8. text-align:left;
9. }

Sabit Genişlikteki Sayfalarda en çok rastlanan problemler sabit genişlik uygulanan katmanlara pading, margin ve border değeri atandığında IE5 de sorunlu görünmesidir bu problemi aşmak için iki yöntem vardır. Birinci yöntem CSS ile Kutu modeli, sorunları ve çözümleri bölümünde anlatılmıştır. ikinci yöntem ise kapsayıcı katmanlara(icerik, anaMenu vb.) padding ve margin vermek yerine kapsayıcı katman içindeki elementlere bu atamaları yapmaktır.

Basit yapılı sayfalarda ikinci yöntemi, karmaşık yapılı sayfalarda ise birinci yöntemi denemenizi öneririm.
Likit Sayfalarda İki Kolonlu Yapı

Likit Sayfalarda Sabit Genişlikteki Sayfalar’dan farklı olarak genişlik değerleri piksel(px) olarak değil yüzde(%) olarak verilmesidir. Bu tür sayfalarda sayfa genişliği web tarayıcısının boyutu ile bağlantılıdır. Web tarayıcısının genişliği arttırıldığında sayfa genişliği artacak, web tarayıcısının genişliği azaltıldığında sayfa genişli azalacaktır. Kodu yazarsak:

1. body{
2. text-align:center;
3. }
4.
5. #sayfa{
6. width:83%;
7. margin:0 auto;
8. text-align:left;
9. }
10.
11. #ustAlan
12. {
13. width: 100%;
14. }
15.
16. #anaMenu
17. {
18. float: left;
19. width: 30%;
20. }
21.
22. #icerik
23. {
24. float: right;
25. width: 70%;
26. }
27.
28. #altAlan
29. {
30. width: 100%;
31. clear: both;
32. }

Kolonlu Yapı

Bir çok sitede üç kolonlu yapı kullanılmaktadır. kolonlu yapı ile iki kolonlu yapının kodlamasında fazla bir fark yoktur. Tek yapamız gereken yapıyı iki kolonlu bölümlere ayırmaktır, bunun için sağdaki iki kolonu bir kapsayıcı katman(KapsayiciAlan) içine alarak yapıyı iki kolonlu hale getirdik(anaMenu ve KapsayiciAlan)

1. body{
2. text-align:center;
3. }
4.
5. #sayfa{
6. width:768px;
7. margin:0 auto;
8. text-align:left;
9. }
10.
11. #ustAlan
12. {
13. width:768px;
14. }
15.
16. #anaMenu
17. {
18. float: left;
19. width: 200px;
20. }
21.
22. #KapsayiciAlan
23. {
24. float: right;
25. width: 568px;
26. }
27.
28. #icerik
29. {
30. float: left;
31. width: 368px;
32. }
33.
34. #BannerAlani{
35. float: right;
36. width: 200px;
37. }
38.
39. #altAlan
40. {
41. width:768px;
42. clear: both;
43. }

Ve ayrıca xhtml koda da aşağıdaki değişiklikleri yaptığımızda üç kolonlu yapıyı elde ederiz.

1. <div id="sayfa">
2. <div id="ustAlan">
3. …
4. </div>
5. <div id="KapsayiciAlan">
6. <div id="icerik">
7. …
8. </div>
9. <div id="BannerAlani">
10. </div>
11. </div>
12. <div id="anaMenu">
13. …
14. </div>
15. <div id="altAlan">
16. …
17. </div>
18. </div>

Aynı şekilde Likit sayfalarda üç kolonlu yapı oluşturabiliriz. Yapmamız gerek tek şey değerleri (%) olarak vermektir.

4,5 vd. kolonlu yapıyı da aynı şekilde yapabiliriz. Bence 3 kolonlu yapıdan sonraki kadamelerde(4,5 vd.) tüm katmanlara float:left verilerek oluşturmak daha mantıklı ve kolay olur.

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:44 pm

CSS İLE WEB SAYFASI OLUŞTURMA II
Likid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir.

Elastik Sayfalar web tarayıcılarına göre font boyutunun ve elementlerin genişliğinin göreceli olarak ayarlandığı sayfalardır. Genişlikleri em, yüzde(%) ve ex gibi göreceli birimler kullanarak tanımladığımızda font boyutu sayfa genişliğine göre değişecektir. Aynı şekilde satır yüksekliği(line-height) değerinde de göreceli birimler kullanarak daha okunaklı sayfalar elde edebilriz.

Elastik sayfa planlama metodununda bazı problemleri vardır, örneğin sabit genişlikteki sayflardaki gibi elastik metodda da boş alanlar yeterince kullanılamaz. Çünkü font boyutu arttırılırsa sayfa genişliği tarayıcının genişliğini geçecektir ve yatay kaydırma çubuğu çıkacaktır. Bu durumdan kurtulmak için body elementine max-width 100% ataması yapabilriz. Ancak bu özelliği IE6 desteklememektedir.

Elastik web sayfası tasarlamak çok kolaydır. Sabit Genişlikte sayfa tasarımı yapılan bir sayfanın birimleri piksel yerine em olarak değiştirilirse sayfa elastik yapıya kavuşacaktır. 1em yaklaşık olarak 10piksele denk gelir.
em’in asıl tanımı küçük "m" harfi genişliğidir. Normalde em font boyutu birimi olarak kullanılır ancak CSS’de width,line-height vd. özelliklerin birimi olarak da kullanılabilir. Em üst elemente veya diğer elementleri baz alarak göreceli bir değer alır. Bu özellik bize elastik web sayfası hazırlama imkanı verir.

Çoğu web tarayıcısınnda normal font boyutu 16px’dir. 10 pikselin yüzdesel değeri yaklaşık olarak 62.5% civarındadır. Bu belirtilen değerlere göre kodumuzu yazarsak:

1. body{
2. text-align:center;
3. font-size:62.5%;
4. font-family:Arial, Helvetica, sans-serif;
5. }
6.
7. #sayfa{
8. width:72em;
9. margin:0 auto;
10. text-align:left;
11. }
12.
13. #ustAlan
14. {
15. width:72em;
16. }
17.
18. #anaMenu
19. {
20. float: left;
21. width: 18em;
22. }
23.
24. #KapsayiciAlan
25. {
26. float: right;
27. width: 52em;
28. }
29.
30. #icerik
31. {
32. float: left;
33. width: 32em;
34. }
35.
36. #BannerAlani{
37. float: right;
38. width: 20em;
39. }
40.
41. #altAlan
42. {
43. width:72em;
44. clear: both;
45. }

Burada body elementi font boyutunu 1em eşit olan font-size:62.5%; atamasını yaptık. Daha sonra sayfadaki birimleri bu değeri baz alarak hesapladık ve em birimi vererek sayfamızı elastik bir hala getirdik.

Sayfamızın Sabit Genişlikteki sayfalardan farkını anlamak için web tarayıcısının font boyutu değerlerini veya yakınlaştırma(zoom) aracını (Opera, FF-eklentisi var ve IE 7 de var)kullanarak görebilriz. IE ve FF için Görünüm(View) - Metin Boyutu(Text Size) Opera için View - Zoom seçeneklerini kullanarak farkı görebilriz.

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:45 pm

CSS ile Web Sayfası Oluşturma III
Aksak Kolonlar(Faux Column)

CSS ile sayfa kodlaması yaparken karşımıza çıkan sorunlardan biridir Aksak Kolonlar(faux column). Genelde isimlendirme olarak Faux Kolon diye geçsede ben burada Aksak kolon olarak kullanacağım. Basit bir örnek verecek olursak; içerik ve sağ kolon diye iki kolondan oluşan bir yapımız olsun. Bu kolonların zemin renklerinin farklı olduğunu düşünelim. Aşağıdaki şekildeki gibi

İçerik ile sağ kolonun farklı yükseklite olması bir sorundur ve sorunu çözmek için bir kaç yöntem mevcuttur. Biz burada en kolayı ve en kullanışlı olanı anlatmaya çalışacağız.

Bu metodda yapılan iki kolon bir kapsayıcı katman içine alınarak iki kolonun zemin resmi bu kapsayıcı katmana tanımlanmaktır.

1. #kapsayiciKolon
2. {
3. background: #fff url(zemin_ard.gif) repeat-y left top;
4. }

Aynı şekilde üç kolonlu yapılar içinde çözüm üretilebilir. Sabit genişlikte sayfalarda Aksak Kolonları düzeltmek bu kadar kolaydır. Esnek yapılı sayfalarda Aksak Kolonları düzeltmek biraz daha zordur. Web tarayıcısının boyutları değiştiğinde kolon şekli ve kolon boyutu değişecektir. Likit tasarıma sahip bir sayfada Aksak Kolon sorunun çözümü zemin resmi konumlandırma değerlerini yüzde olarak vermektir.

Eğer zemin pozisyonunu belirlemek için piksel değeri kullanıyorsanız, elementin sol üst köşesine göre zemin resminizi piksel değeri vererek konumlandırırsınız. Yüzdesel konumlandırma ile zemin resmi konulandırıldığında, atanan değerler hem üst elemente göre, hem de elementin kendine göre konumunu belirler. Örneğin:

1. background: #fff url(resim.gif) no-repeat 25% 10%;

Yukarıdaki tanımlama sonucunda zemin resmi hem üst elementin %10 üst ve %25 solundan mesafe alacaktır, hemde kendi içinde %10 üst ve %25 soldan mesafe alacaktır. Aşağıdaki şekilde gösterilmiştir:

Likit içerikli üç kolonlu sayfalarda Aksak kolon sorununun çözümüne bakalım.

Bir örnek yapacak olursak;

Daha önce likit bir sayfanın nasıl yapılacağını bahsetmiştik. İsterseniz yine de bir göz atın Yukarıdaki ekranda da görüldüğü gibi orta kısıma birden fazla zemin rengi uygulamamız gerekiyor. Bunun için likit sayfa oluştururken yaptığımız Kapsayıcı katmana bir zemin resmi sağ taraftaki iki kolonumuzu kapsayana ikinci katmana da ikinci zemin resmimizi tanımlayarak güzel bir sayfa oluşturacağız.

2000 piksel genişliğinde ve 10 piksel yüksekliğinde bir zemin resmi hazırlayalım(Sol Alan Zemin resmi). Sonra 1.Aksak Kolonumuzu oluşturalım(#SolKolon) . Menü alanı bu kapsayıcı elementin 23% genişliğine sahip olacaktır. Ayrıca yine 23% genişliğe sahip bir alan daha oluşturmalıyız(Sağ İçerik Alanı). 2000px genişliğindeki zemin resmini kapsayan alandan Aksak Kolona atanan zemin renginin genişlik değeri 460 piksel olacaktır. Aksak alanın zemin renginin dışındaki alalanları(1540px) transparan yapmak için zemin resmimizi .gif formatında yapmalıyız.

1. #KapsayiciAlan {
2. width: 85%;
3. margin: 0 auto;
4. text-align: left;
5. background: #fff url(images/sol_zemin_resmi.gif) repeat-y 23% 0;
6. }

Benzer şekilde ikinci bir içerik oluşturarak sağda kalan iki kolona aynı metod uygulanabilir. Yine 2000 piksel genişliğinde 10 piksel yüksekliğinde bir zemin resmi hazırlayıp bu sefer resmin sağ tarafına sağ kolon zemin rengi doldurulur ve kalan bölge transparan olacak şekilde kaydedilir. ikinciAlan’ın KapsayiciAlan’a göre konumu karşılatırmak için Bu Aksak kolonun soldan mesafesi resmin soldan mesafesi %77(100-23)’den başlamalıdır. Çünkü KapsayiciAlan’ın zemin resmi zaten uygulanmıştır bu nedenle biz ilk Kapsayici alan içine bir tane daha ikinciKapsayiciAlan eklemeliyiz. Bu yeni ikinciKapsayiciAlan‘nınada zemin resmi atamalıyız.

1. #ikinciKapsayiciAlan
2. {
3. background: url(images/sag_zemin_resmi.gif) repeat-y 77% 0;
4. }

Bu şekilde çok güzel bir 3 kolonlu likit bir sayfa elde ederiz.

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:45 pm

Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)
Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir.
min-width, min-height

Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız.

1. p.menu {
2. float:left;
3. width:200px;
4. min-width:150px;
5. }

Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 6+
W3C’s CSS Level 2+
CSS Profile 2.0

Aynı şekilde max-width ve max-height tanımlamalarıda yapılır.
max-width, max-height

Yapısı : max-width, max-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | none | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

max-width, max-height kapsayıcı kutunun maksimum alacağı değerleri belirtmek için kullanırız.

1. p.menu {
2. float:left;
3. width:200px;
4. max-width:400px;
5. }

Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0

şžöyle bir sonumuz vardır ki oda IE’nin 7 versiyonundan sonra bu özellikleri desteklemeye başlamasdır. Bu çok kullanışlı özellikleri bu nedenden dolayı kullanmamazlık yapmayacağız tabi.

IE için bir çözüm vardır. expression() özelliği bu özellik sadece IE tarafından yorumlanır. Bu özellik dinamik özellik olarak tanımlanır. Yani bu kod normalde bir javascript kodudur.

1. #icerik
2. {
3. min-width: 600px;
4. max-width: 1200px;
5. width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? “1200px” : “auto”);
}
6. <body>
7. <div id="icerik">
8. …
9. </div>
10. </body>

Yukarıdaki tanımlamda css içerisinde javascript komutları kullanılmıştır. Bu tanımlamaları sadece IE anlayacaktır ve uygulayacaktır. Kodda eğer genişlik belirtilen maksimum değerden büyükse atanan değeri alacak değilse auto değeri alacaktır.

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:46 pm

Yuvarlak Kenarlı Kutular
CSS ile XHTML kodlaması yaparken daha çok köşeli kutular kullanılır. Ancak CSS ile yuvarlak kenarlı kutularda yapabiliriz. CSS ile yuvarlak kenarlı kutu yapmanın bir çok tekniği vardır. Her tekniğin yerine ve durumuna göre avantajları olabilir. Biz burda en kolay ve en kullanışlılarını öğrenmeye çalışacağız.
Sabit Genişlikte Yuvarlak Kenarlı Kutu Oluşturmak

Sabit Genişlikte Yuvarlak Kenarlı Kutular en basit oluşturulabilen kutulardır. İçeriğin uzaması veya kısalması durumunda genişlik sabit kalır yükseklik değişkendir. İki adet resim kutuyu oluşturmamız için yeterlidir. Birini üst kısma diğerini alt kısıma yerleştirerek yuvarlak kutumuzu oluşturabiliriz.

200px genişliğinde bir yuvarlak kenarlı kutu olşuturmak için ilk önce alta ve üste koyacağımız kutuları hazırlayalım.

ust_yuvarlak.gif

alt_yuvarlak.gif

XHTML kodumuzu yazarsak:

1. <div class="yuvarlakKutu">
2. <h2>Başlık</h2>
3. <p>İçerik</p>
4. </div>

alt_yuvarlak.gif resmini .yuvarlakKutu kapsayıcı katmanının alt kısımına dayalı olarak zemin resmi olarak atıyoruz. Ayrıca .yuvarlakKutu zemin resminin bitiminden itibaren zemin dolgu rengini(#84E0FF) atıyoruz.

1. .yuvarlakKutu {
2. width: 200px;
3. background: #84E0FF url(images/alt_yuvarlak.gif) no-repeat left bottom;
4. }
5. .yuvarlakKutu h2 {
6. background: url(images/ust_yuvarlak.gif) no-repeat left top;
7. }

Başlık ve içeriğinin kutunun kenarlarına yapışmaması için padding değerlerini ayarlamalıyız:

1. .yuvarlakKutu h2 {
2. padding: 10px 20px 0 20px;
3. }
4. .yuvarlakKutu p {
5. padding: 0 20px 10px 20px;
6. }

Örnek kodları indirmek için tıklayınız.

Eğer başlıksız bir yapı istiyorsanız, h2 kaldırıp h2‘ye atadığımız zemin resmini paragraf(p)’a atamamız yeterlidir.

Eğer zemin dolgu alanı düz renk değilde degrade renkler içeriyorsa, bu iş için iki metod vardır birincisi yukarıdaki metod ile de yapabilrsiniz ama kutu yüksekliği kabul edilebilir bir yükseklik ise. Yukarıdaki metod ile bunu yapmak için bu kutunu maksimum 300px genişliğe çıkabileceğini farz edelim. İki adet resim hazırlarız.

ust2_yuvarlak.gif

alt2_yuvarlak.gif

Diğer bir yöntem ise kutuyu üç kısıma bölerek yapmaktır ki bu daha esnek bir yöntemdir.

1. .yuvarlakKutu {
2. width: 424px;
3. background: url(images/orta_yuvarlak.gif) repeat-y;
4. }
5. .yuvarlakKutu h2 {
6. background: url(images/ust3_yuvarlak.gif) no-repeat left top;
7. padding-top: 20px;
8. }
9. .yuvarlakKutu .altYuvarlak {
10. background: url(images/alt3_yuvarlak.gif) no-repeat left bottom;
11. padding-bottom: 20px;
12. }
13. .yuvarlakKutu h2, .yuvarlakKutu p {
14. padding-left: 20px;
15. padding-right: 20px;
16. }

1. <div class="yuvarlakKutu">
2. <h2>Başlık</h2>
3. <p class="altYuvarlak">İçerk</p>
4. </div>

Örnek kodları indirmek için tıklayınız.
Esnek Boyutlu Yuvarlak Kenarlı Kutular

Yukarıdaki örnekde sadece dikeydeki genişlemelere olanak sağlıyor bazen hem yatayda hemde dikeyde genişleye bilen esnek yuvarlık köşeli kutulara ihytiyacımız olur. Bunun için yukarda uyguladığımız yöntemden biraz farlı bir yöntem deneyeceğiz, iki resim değil de dört resime ihtiyacımız olacak. Bu dört resim için artı katmanlara ihtiyacımız olacaktır, bu katmanlar kodumuzu biraz temiz kod üretimi dışına çıkarsada işimizi görecektir:

1. <div class="yuvarlakKutu">
2. <div class="yuvarlakKutuDisi">
3. <div class="yuvarlakKutuIci"><h2>Başlık</h2>
4. <p>İçerik</p>
5. </div>
6. </div>
7. </div>

Dört resimin iki tanesi üst köşeleri yuvarlamak için, iki tanesi alt köşeleri yuvarlamak için kullanacağız.

1. .yuvarlakKutu {
2. width: 20em;
3. background: #effce7 url(images/alt_sol.gif)
4. no-repeat left bottom;
5. }
6. .yuvarlakKutuDisi {
7. background: url(images/alt_sag.gif) no-repeat right bottom;
8. padding-bottom: 5%;
9. }
10. .yuvarlakKutuIci {
11. background: url(images/ust_sol.gif) no-repeat left top;
12. }
13. .yuvarlakKutu h2 {
14. background: url(images/ust_sag.gif) no-repeat right top;
15. padding-top: 5%;
16. }
17. .yuvarlakKutu h2, .yuvarlakKutu p {
18. padding-left: 5%;
19. padding-right: 5%;
20. }

Yukarıdaki örnekte esneklik sağlamak için değerler (% ve em) gibi görece değerler verilerek font boyutunun arttırılması durumlarında esnek bir kutu oluşturulmuş olur.

Örnek kodları indirmek için tıklayınız.

Yuvarlak kenarlı kutu yapımında bir çok örnek ve yöntem mevcut, aşağıda ki link de bu metodları linkleri ile katagorize etmişler:

http://css-discuss.incutio.com/?page=RoundedCorners

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:46 pm

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:

1. <ul class="menu">
2. <li><a href="index.html">Ana Sayfa </a></li>
3. <li><a href="hakkimizda.html">Hakkımızda</a></li>
4. <li><a href="urunler.html">Ürünler</a></li>
5. </ul>

Kodlama sonucu görüntü aşağıdaki gibi olacaktır.

Her linkin başındaki imgeleri kaldırmak için:

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

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }

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:

1. ul.menu a { display: block; }

Biraz görselliği arttırırsak:

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

Linkler web tarayıcısının genişliği kadar uzayacaktır, kendi istediğimiz genişliğe sahip olmak için:

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

Linkler arasına biraz boşluk verelim:

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

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

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

şžimdi linklerimize rollover efekti vermek için a:hover kullanacağız:

1. ul.menu a:hover
2. {
3. background-color: #999;
4. }

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

1. ul.menu li { margin: 0 0 .2em 0; }

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:47 pm

CSS ile Menü Yapmak II - Yatay Menüler

Yatay Menüler

Bir önceki makalede dikey menüye bir örnek yapmıştık. şžimdi de yatay menülere bir örnek vereceğiz. Önceki makalede bahsettiğimiz gibi yatay ve dikey menüler belli bir yere kadar kodlaması aynıdır. Biz aynı olan kısmı geçip sonrasına devam ediyoruz.

Kaldığımız yerden devam edersek. Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }
6. ul.emu li { display: inline; }

Linklerin altındaki çizgileri kaldırıyoruz:

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }
6. ul.menu li { display: inline; }
7. ul.menu li a { text-decoration: none; }

Linkler arasına biraz boşluk veriyoruz:

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }
6. ul.menu li { display: inline; }
7. ul.menu li a {
8. text-decoration: none;
9. padding: .2em 1em;
10. }

Menüyü biraz renklendiriyoruz:

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }
6. ul.menu li { display: inline; }
7. ul.menu li a {
8. text-decoration: none;
9. padding: .2em 1em;
10. color: #1B1B1B;
11. background-color: #E2E2E2;
12. }

Son olarakta rollover efekti vermek için a:hover özelliğine renk atıyoruz:

1. ul.menu {
2. list-style-type: none;
3. padding: 0;
4. margin: 0;
5. }
6. ul.menu li { display: inline; }
7. ul.menu li a {
8. text-decoration: none;
9. padding: .2em 1em;
10. color: #1B1B1B;
11. background-color: #E2E2E2;
12. }
13. ul.menu li a:hover
14. {
15. background-color: #999;
16. }

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:49 pm

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

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(<ul>) kullanacağız. Buradaki fark alt kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış liste olarak eklenmesidir.

1. <ul id="menu" >
2. <li><a href="#">Anasayfa</a></li>
3. <li><a href="#">Haberler</a>
4. <ul>
5. <li><a href="#">şžirket Haberleri </a></li>
6. <li><a href="#">Yurt içi Haberleri </a></li>
7. <li><a href="#">Yurt dışı Haberleri</a></li>
8. </ul>
9. </li>
10. <li><a href="#">Ürünler</a>
11. <ul> <li><a href="#">Tencere</a></li>
12. <li><a href="#">Tava</a></li>
13. <li><a href="#">Ütü</a></li>
14. <li><a href="#">Tost Makinesi </a></li>
15. <li><a href="#">El Süpürgesi </a></li>
16. </ul>
17. </li>
18. </ul>

İ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.
Internet Explorer 7. versiyonuna kadar :hover pseudo sınıfını sadece linklerde (<a>) uygulanmasını destekler diğer elementlerde bu özelliğin kullanımını desteklemez.

Peki menümüz böyle mi kalacak hayır. IE6 ve altı için bir javascript kodu yazacağız.

1. startList = function() {
2. if (document.all&&document.getElementById) {
3. navRoot = document.getElementById("menu");
4. for (i=0; i<navRoot.childNodes.length; i++) {
5. node = navRoot.childNodes[i];
6. if (node.nodeName=="LI") {
7. node.onmouseover=function() {
8. this.className+=" over";
9. }
10. node.onmouseout=function() {
11. this.className=this.className.replace(" over", "");
12. }
13. }
14. }
15. }
16. }
17. window.onload=startList;

Bu çözümü bize kazandıran arkadaşlara teşekkürü bir borç biliriz ve linkini de yazarız.

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

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

Ayrıca kod daki<ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); aynı olmasına dikkat edelim.

Örnek kodları indir
Kaynaklar

* http://www.alistapart.com/articles/horizdropdowns
* http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
* http://www.seoconsultants.com/css/menus/tutorial/
* http://www.cssplay.co.uk/menus/flyout2.html

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:51 pm

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.

1. <ul id="menu" >
2. <li id="elma"><a href="#" title="Elma">Elma</a></li>
3. <li id="armut"><a href="#" title="Armut">Armut</a></li>
4. <li id="muz"><a href="#" title="Muz">Muz</a></li>
5. <li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
6. </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:

1. ul#menu {
2. height: 54px;
3. width: 500px;
4. margin: 0;
5. padding: 0;
6. position: relative;
7. }

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

1. ul#menu li {
2. list-style: none;
3. position: absolute;
4. }

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).

1. ul#menu li a {
2. height: 54px;
3. display: block;
4. position:relative;
5. }

Her menü elemanı için kendi genişliği ve arkaplan resmindeki(menu.jpg) yerini belirleyelim.

1. #elma a{
2. width:130px;
3. background: url(images/menu.jpg) 0 0 no-repeat;
4. }
5. #armut a{
6. width:142px;
7. background: url(images/menu.jpg) -130px 0 no-repeat;
8. }
9. #muz a{
10. width:120px;
11. background: url(images/menu.jpg) -272px 0 no-repeat;
12. }
13. #kivi a{
14. width:108px;
15. background: url(images/menu.jpg) -392px 0 no-repeat;
16. }

ve tüm menü elementlerinin soldan konumu belirleyelim.

1. #elma {left: 0px;}
2. #armut {left: 130px;}
3. #muz {left: 272px;}
4. #kivi {left: 392px;}

Resimler üzerindeki metinleri kaldırmak için

1. ul#menu li a {
2. text-indent: -9999px;
3. text-decoration: none;
4. }

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.

1. #elma a:hover{
2. width:130px;
3. background: url(images/menu.jpg) 0 -54px no-repeat;
4. }
5. #armut a:hover{
6. width:142px;
7. background: url(images/menu.jpg) -130px -54px no-repeat;
8. }
9. #muz a:hover{
10. width:120px;
11. background: url(images/menu.jpg) -272px -54px no-repeat;
12. }
13. #kivi a:hover{
14. width:108px;
15. background: url(images/menu.jpg) -392px -54px no-repeat;
16. }

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.

1. <ul id="menu" >
2. <li id="elma"><a href="#" title="Elma">Elma</a></li>
3. <li id="armut"><a href="#" title="Armut">Armut</a></li>
4. <li id="muz"><a href="#" title="Muz" class="secili" >Muz</a></li>
5. <li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
6. </ul>

1. #elma a.secili{
2. width:130px;
3. background: url(images/menu.jpg) 0 -54px no-repeat;
4. }
5. #armut a.secili{
6. width:142px;
7. background: url(images/menu.jpg) -130px -54px no-repeat;
8. }
9. #muz a.secili{
10. width:120px;
11. background: url(images/menu.jpg) -272px -54px no-repeat;
12. }
13. #kivi a.secili{
14. width:108px;
15. background: url(images/menu.jpg) -392px -54px no-repeat;
16. }

Örnek kodları indirmek için tıklayınız..

Konu: Geri: Gelişmiş CSS Dersleri 10/6/2008, 7:52 pm

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:

1. <ul>
2. <li><a href="#">Ana Sayfa</a></li>
3. <li><a href="#">Haberler</a></li>
4. <li><a href="#">Ürünler</a></li>
5. </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:

1. ul {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. width: 600px;
6. float: left;
7. border-bottom: 1px solid gray;
8. }

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:

1. ul li {
2. float: left;
3. background: url(images/sekme_sag_resim.gif) no-repeat top right;
4. }

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:

1. li a {
2. background:url(images/sekme_sol_resim.gif) no-repeat left top;
3. display: block;
4. padding: 0 2em;
5. line-height: 2.5em;
6. text-decoration: none;
7. float: left;
8. color:#000;
9. }

6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

1. ul a:hover {
2. color: #9D9C9C;
3. }

Ö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.

» Css Dersleri