tarihinde Fatih Hayrioğlu

Sözde sınıf ve elementler makalesinde değindiğim bir konu idi bu. Ancak genelde bu özelliği tasarımcılar ve kod yazarları atlıyor. Şimdiye kadar ki hiç bir projemde kullanma gereği duymadım açıkçası. Ama bence kullanılabilirlik açısından önemli bir özellik. Bundan sonraki projelerimde kullanmayı düşünüyorum.

http://www.evalotta.net/ sitedeki uygulamayı görünce çok hoş bir şey olduğu aklıma geldi. Bende bu konuda bir şeyler yazmalıyım diye not ettim. Nasip bu güneymiş.

İnternet tarayıcıları daha önce ziyaret ettiğimiz sayfa bağlantılarını ön belleğinde tutar. Biz ön belleği silmediğimiz müddetçe hafızasında kalır. CSS bize daha önce ziyaret ettiğimiz sayfa bağlantılarının stilini değiştirme imkanı sunar, böylece kullanıcıya sen burayı daha önce ziyaret etmiştin bilgisini verebiliriz. İnternet tarayıcıları ziyaret edilmiş bağlantılara kendileri standart bir stil atarlar. Mesela Firefox altını çizili ve mor renkli yapıyor.

stadart_ff

Tarayıcılar bize bu ayrımı gösterir, tabi biz bağlantı tanımları değiştirmediğimiz müddetçe. Biz bağlantıya genel tanım yaptığımızda bu özellik bir bakıma göz ardı edilecektir. Bir çok projede bu tanımlamayı yazpıyoruz.

a {
    color:#f00;
}

genel_bag_renk

Yukarıdaki tanımlama tüm bağlantı tipleri için genel bir tanımdır ve ziyaret edilmiş sayfa stilinide belirler.

Bizim amacımız ziyaret edilmiş bağlantıları farklı stil ile belirterek ayrımı göstermek. Bir çok yerde  yazı üstünü çizerek belirlenir.

a:visited {
    text-decoration: line-through;
}

ziy_sayfa_uzeri_ciz

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

Diğer bir yöntemde ardalan resmi koymak. Bu yöntem ile hoş bir görüntüde sağlamış oluyoruz. http://www.evalotta.net/ sitesi buna çok güzel bir örnek.

a:visited {
    padding-right:20px;
    background:url(images/ziyaret_edilmis_baglanti.gif) right top no-repeat;
    color:#666;
    text-decoration:none;
}

ziy_sayfa_oki

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

Benzer yöntemlerle birçok alternatif oluşturulabilir. Ayrıca :before ve :after ile oluşturulan örnekler var ama hala ie6 hayatta olduğu için ve :before ve :after özelliklerini desteklemediği için pek kullanma taraftarı değilim.

Kaynak

tarihinde Fatih Hayrioğlu

yapisik_altalan

Bir çok sitede karşılaştığımız sayfanın dibine yapışık alt kısımları bu makalede anlatmaya çalışacağım. Bunu hiç javascript kullanmadan sadece css yardımı ile yapacağız.

Site içeriğinin az olduğu durumlarda sayfanın alt kısımları normal akış içerisinde ise yukarı doğru kayacaktır ve hoş olmayan görüntülere neden olacaktır. Bu gibi durumları engellemek için sayfamızın alt kısımlarını sayfa dibine yapıştırmalıyız, böylece sayfa içeriğinin az olması ve çok olması durumunda  alt kısmın yerini aynı olacaktır.

Bu işi yapmak için bir kaç türlü yöntem geliştirilmiştir, mantık olarak aynı olan bu yöntemlerde farklı tarayıcılardaki sorunlara çözüm bulmak için farklılıklar içerir. Ben bunlarda bazıları çeşitli projelerimde uyguladım, ancak makaleyi yazarken en iyisi hangisi ise onu yazmaya karar verdim. cssstickyfooter.com‘um anlattığı yöntem benim gördüğüm en iyi yöntem.

Kodumuzu yazmaya başlarsak.

XHTML kodu:

<div id="kapsul">
    <div id="ustAlan">
        <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div id="icerikAlani">
        <div id="icerik">
        </div>

        <div id="icerikSagAlani">
        </div>
    </div>
</div>
<div id="altAlan">
</div>

XHTML kodunda dikkate değer olan kısım içerik alanı ve alt alanı iki farklı bölüm olarak kodlamamız. altAlan ve diğer alanları kapsayan bir kapsayıcı katmandan(#kapsul) oluşuyor kodumuz. Bizim yaptığımız örnekte üst alanı ve iki kolonlu içerik kısmını kapsayıcı katman içine alıyoruz.

CSS Kodu

html, body, #kapsul {height: 100%;}
body > #kapsul {height: auto; min-height: 100%;}
#icerik {padding-bottom: 133px;} /* altAlan yukseligi ile ayni olmali */
#altAlan {
    position: relative;
    margin-top: -133px; /* altAlan yuksekliginin eksi degeri */
    height: 133px;
    clear:both;
}

Buradaki 133px tanımına dikkat etmemiz gerekiyor. 133px altAlan yüksekliğidir ve 3 yerde birden aynı değeri kullandığımıza dikkat edeniz.

Kodu incelersek birinci ve ikinci satırda yüksekliklerin tüm alanı kapsaması için farklı tarayıcılar için %100 tanımını yapıyoruz.

​3. satırda alta yapışık alan kadar padding değeri vererek içerik kısmının alt kısmın altında kalmasını engelliyoruz.

4-8 satır arasında alt alan tanımlarımızı yapıyoruz. Göreceli konumlandırdığımız alanı içerik alanında padding-bottom değeri ile açtığımız boşluğa yerleştirmek için negatif üst kenar boşluğu değeri veriyoruz.

Bu yöntemde float uygulanmış içerik kısmında tam alanı kapsayamama sorunu ile karşılaşıyoruz. Float uygulanmış alanların kapsayamama sorunu çözmek için http://fatihhayrioglu.com/float-uygulanmis-elementleri-tam-kapsayamama-sorunu/ makalemiz anlattığımız yöntemi kullanıyoruz.

.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

Bu sınıfı tanımlıyoruz ve içeriği kapsayan(#icerikAlani) katmana atıyoruz.

<div id="kapsul">
    <div id="ustAlan" class="kapsayamamaSorunu">
        <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div id="icerikAlani" class="kapsayamamaSorunu">
        <div id="icerik">
        </div>

        <div id="icerikSagAlani">
        </div>
    </div>
</div>
<div id="altAlan">
</div>

Bu yöntemin ryanfait.com’un yöntemine göre en büyük avantajı bence ryanfait.com’un yöntemindeki anlamsız tampon katmanı gibi bir fazla kodlamadan kaçınış oluyoruz.

Örneği görüntülemek için tıklayınız.

Sorunlar ve Çözümleri

  • Benim kullandığım projede body ve üstAlan’daki margin-top değeri sorun çıkardı. Bunun yerine padding kullanarak sorunu çözdüm. Üst kısım body’deki margin-top ve margin-bottom tanımları sorun çıkarıyor, bunun yerine padding kullanın.

  • Ayrıca yazı tipi boyutunu büyük kullanmak isteyen kullanıcılarda sorun çıkabileceği söyleniyor. Eğer yazı tipi boyutunu piksel(px) vb. kesin değerler ile belirlerseniz bu tip sorunları engelleyebilirsiniz.

  • Son olarakta asp.net ile oluşturulan sayfalarda <form> elemanı ile kapsanan sayfanızda sorun çıkabilir. Bunu engellemek için kodunuzu

CSS kodu;

html, body, form, #kapsul {
    height: 100%;
}

şeklinde değiştirmelisiniz. [][]

Kaynaklar

tarihinde Fatih Hayrioğlu

ie8İnternet Explorer 8 çıktı ve hızla yayılıyor. Sitemi ziyaret edenlerin %5’i İnternet Explorer 8 kullanıcısı imiş. Bir makalede görmüştüm. İnternet Explorer 8’in hızlı yayılması ile alakalı.

Burada ie8’de css düzeltmesi yapmamız gerektiğinde nasıl bir yol izleyeceğimiz konusunda bir ipucu vereceğim.

.uyari {
    color /***/: red9
}

Bir çok yerde bu kodun tek başına ie8 için yeterli olduğu yazıyor. Ama ben test ettiğimde ie7’de bu kodu görüyor. Bunun için

.uyari{color:blue} /* tum taricilar */
.uyari { color /*\**/: red\9 } /* ie8 ve ie 7 */
*+html .uyari{color:blue} /* ie 7 */

Şeklinde bir çözüm işimize yaracaktır.

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

Ayrıca şartlı yorumlar yardımı ile de yapabiliriz.

<!–[if gte IE 8]>
    <style type="text/css">
    .uyari {
        color: red;
    }
    </style>
<![endif]–>

Ayrıca daha önce bahsettiğimiz ie7 gibi yorumlama kodu var.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Testlerimi ietester ile yaptım.