Tayfun Erbilen

Bu sorunla bir çok kez karşılaştım.. Hep bir şekilde çözdüm ancak sorunun tam olarak neden kaynaklandığını ve nasıl çözdüğümü bir türlü bulamıyordum.. Neyse ki bu gece buna bir son verdim ve adam akıllı sorunu anladım, çözdüm ve mutluyum  Şimdi bu sorun nasıl oluşuyor önce ondan bahseseyim..

Sorun nasıl oluşuyor?

Normal şartlarda kapsayıcı nesneye overflow: hidden verdiğinizde belirlediğimiz genişlik ve yükseklikten taşan her şeyi gizlemesi gerekir.. Bir yere kadar bu şekilde gizleniyor.. Ancak kapsayıcı nesne içindeki nesnelerden herhangi bir tanesine position tanımı yapılırsa.. İşte o zaman işin rengi değişiyor! O zaman taşınca gizlemesi gereken ie, gizlemekten vazgeçiyor.. Bu sorun IE7 ve muhtemelen alt sürümleri için geçerli.. IE8‘de böyle bir sorun yok.

Çözümü nedir?

Çözümü basit, overflow: hidden verdiğimiz kapsayıcı dive birde position: relative tanımı yapmamız yeterli.. Böylece taşan position tanımlı bir nesne bile olsa gizlenecektir. Kısaca şöyle bir kod yapımız olduğunu düşünürsek;

<div class="box_container">
    <div class="box"></div>
</div>

Bunun ie7 ve alt sürümlerinde gizlenmeyen css kodları şöyledir;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve çözümü ise .box_container’a position: relative tanımını yapmaktır. Yani;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green;
    position: relative
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve işte hepsi bu kadar! ie7 ve alt sürümlerinde çalışan demosuna aşağıdan ulaşabilirsiniz..

Eğer ie7 uyumlu tasarımlar döktüyseniz bazen blok seviyesinden elemanları float yerine display özelliğini inline-block yaparak yan yana getirmek istemişsinizdir.. Ancak fark edeceğiniz üzere ne yazık ki doğrudan display: inline-block; ie7’de işlevini yerine getirmiyor.. Ancak bu sorunu aşmanın kolay bir yolu var.. Kısaca eğer inline-block uygulayacaksanız ie7 uyumlu hali şöyledir;

ul.tab li {
    display: inline-block;
    *display: inline;
    zoom: 1
}

Ve işte hepsi bu kadar, artık ie7 uyumlu hale geldi.

Bu dersimizde CSS’de tüm font özelliklerini ele alacağız.. Fontlar için bir çok tanmlı özellik bulunmakta, bu dersimizde göreceğimiz özellikler şunlardır;

• font-family
• font-size
• font-style
• font-variant
• font-weight
• font
• @font-face

Bu dersimizde CSS’de tüm font özelliklerini ele alacağız.. Fontlar için bir çok tanmlı özellik bulunmakta, hepsine sırasıyla bir göz atalım..

1) font-family

Nesnenin yazı tipini belirlemek için kullanılır.
Değer olarak yazı tipi isimleri belirlenir.. (Örn: Arial, Tahoma, comic sans ms gibi..)
Özel fontlar bu şekilde isim belirlenerek doğrudan kullanılmaz.. Onun için ayrı bir font özelliği olan @font-face kullanılır. Bunu dersimizin sonunda sizlerle birlikte inceleyeceğiz.

/*
 * h1 nesnesini seç ve
 * yazı tipini Arial yap
 */
h1 {
    font-family: Arial
}

– Birden Fazla Yazı Tipi Tanımlamak

Eğer birden fazla yazı tipi tanımlamak isterseniz virgül ile ayırarak yazı tipi isimlerini yazmanız yeterlidir.

/*
 * h1 nesnesini seç ve
 * yazı tiplerini ata
 */
h1 {
    font-family: Verdana, Arial, 'Comic Sans Ms'
}

Peki böyle bir durumda hangi yazı tipi geçerli olacaktır? Böyle bir durumda önce ilk yazı tipine bakılır.. Eğer Verdana fontu var ise yazı tipi Verdana olarak belirlenir.. Ancak Verdana fontu yok ise bir sonraki font’a bakılır.. Eğer Arial fontu var ise yazı tipi Arial olarak belirlenir.. Bu şekilde bir sıralaması vardır..

Not: Eğer font ismi birden fazla kelimeden oluşuyorsa tırnak içinde de yazılabilir..

2) font-size

Yazı boyutunu belirlemek için kullanılır..
Standart olarak kullanabileceğimiz değerler şunlardır;

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Ayrıca px, pt, em, % gibi değerlerde kullanabiliriz.. Örnek vermek gerekirse;

/*
 * paragraf nesnesini seç ve
 * yazı boyutunu 21px olarak ayarla
 */
p {
    font-size: 21px
}

3) font-style

Her ne kadar font-style genel bir özellik ismi gibi görünsede sadece yazının eğik olup olmadığı belirlenir ????
Aldığı standart değerler şunlardır;normal
italic
oblique

Bir örnek vermek gerekirse;

/*
 * paragraf nesnesini seç ve
 * yazıyı eğik yap
 */
p {
    font-style: oblique
}

/*
 * em nesnesini seç ve
 * eğik yazıyı normala dönüştür
 */
em {
    font-style: normal
}

4) font-variant

Yazıları büyük harfe çevirir. Ancak ı ve i harflerini büyük I olarak çevirdiği için pek hoşunuza gitmeyebilir.. 2 değer alır ancak sadece small-caps değeri kullanılır.

/*
 * paragraf nesnesini seç ve
 * küçük harfleri büyük yap
 */
p {
    font-variant: small-caps
}

5) font-weight

Yazı tipinin kalınlık ve incelik ayarlarını yapar..
Aldığı standart değerler şunlardır;normal

• bold
• bolder
• lighter
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

Örnek vermek gerekirse;

/*
 * paragraf nesnesini içindeki spanı seç
 * ve yazısını kalınlaştır
 */
p span {
    font-weight: bold
}

/*
 * strong nesnesini seç ve
 * kalın olan yazıyı incelt.
 */
strong {
    font-weight: normal
}

6) font

Tüm font özelliklerinin tek seferde kullanılmasını sağlar.. Sırasıyla şöyle kullanılmalıdır;
font-style -> font-variant -> font-weight -> font-size / line-height -> font-family
Bu özelliğin kullanılması için her zaman font-size ve font-familyözelliklerinin olması gerekir.

/*
 * paragraf nesnesini seç ve
 * eğik yap - harfleri büyüt - kalın yap
 * boyutunu 20px yap - satır yüksekliğini 25px yap
 * yazı tipini Arial yap
 */
p {
    font: oblique small-caps bold 20px/25px Arial
}

7) @font-face

Özel yazı tiplerini belirlemek için kullanılır. Normal şartlarda modern tarayıcılar ttf uzantılı font dosyasını kabul ediyorlar, ancak internet explorer sorun çıkardığı için onun kabul ettiği eot uzantılı halinide dahil etmemiz gerekir..

Temel anlamda @font-face için gerekli örneğimiz şöyledir;

@font-face {
    font-family: 'erbilenFont';
    src: url(http://www.erbilen.net/demo/font_face/font.ttf)
}

Şimdi internet explorer sorunu için ttf uzantılı dosyamızı eot’a çevirmemiz gerekli.. Bunun için şu aracı kullanabiliriz;
http://convertfonts.com/ttf-to-eot.php

Evet, eot uzantılı font dosyamızıda dahil ettiğimizde kodlarımız şöyle olacak;

@font-face {
    font-family: 'erbilenFont';
    src: url(http://www.erbilen.net/demo/font_face/font.eot);
    src: url(http://www.erbilen.net/demo/font_face/font.ttf)
}

Şimdi birde local tanımı var.. Bunun anlamı ise şu, sitenizi ziyaret eden kullanıcıda yükleteceğiniz font var ise yükletmeden direk kullanmasını sağlamak..

@font-face {
    font-family: 'erbilenFont';
    src: url(http://www.erbilen.net/demo/font_face/font.eot);
    src: local('Font İsmi'),
         url(http://www.erbilen.net/demo/font_face/font.woff) format('woff'),
         url(http://www.erbilen.net/demo/font_face/font.svg#fontid) format('svg')
}

Evet, son olarak diğer formatlarıda yukarıdaki gibi dahil edebilirsiniz.. Ben sadece ie, firefox ve chrome’da desteklerini kontrol ettim.. Destekleri ise şu şekilde;

– svg => chrome, safari
– eot => internet explorer
– woff => firefox, chrome, safari

Tabi bu destekler tarayıcıların sürümlerine göre değişebilir, bir başka makalede okuduğumda otf tüm tarayıcılarda desteklenir diyordu ancak ben chrome ve firefox’da sadece otf ile fontu görüntüleyemedim.

Evet bu CSS dersimizin sonuna geldik, bir sonraki derste görüşmek üzere!

Bazen menü yapımında şöyle bir sorunla karşılaşıyoruz.. Örneğin menüye hover ve aktif işlemleri uyguluyoruz.. Bir menü aktifken üzerine gelince hover işlemi gerçekleşiyor.. Halbuki aktif için bunun olmaması gerekir.. Peki böyle bir durumda ne yapmamız gerekecek? Öncelikle olası menü yapımız şöyle olsun;

<ul class="menu">
    <li><a href="#">Menü 1</a></li>
    <li class="aktif"><a href="#">Menü 2</a></li>
    <li><a href="#">Menü 3</a></li>
    <li><a href="#">Menü 4</a></li>
</ul>

Şimdi bu menü yapısına uygun css kodlarımız ise şöyle;

ul, li {
    padding: 0; margin: 0; list-style: none; font-family: Arial; font-size: 14px
}
a { text-decoration: none }

/* menü */
ul.menu {
    overflow: hidden
}
ul.menu li {
    float: left
}
ul.menu li a {
    display: block;
    padding: 8px 15px;
    color: #111
}
ul.menu li.aktif a {
    background: darkred;
    color: #fff
}
ul.menu li a:hover {
    background: #111;
    color: #fff
}

Ancak bu şekilde, aktif olan menü üzerine gelindiğinde de yine aynı şekilde hover işlemi uygulanır.. Bunun sebebi, aktif bölümünü yazdığımız css kodlarının, hover işleminden önce yazılmış olmasıdır.. Yani aktif ve hover şöyle yer değiştirirse;

ul.menu li a:hover {
    background: #111;
    color: #fff
}
ul.menu li.aktif a {
    background: darkred;
    color: #fff
}

Sorunumuz çözülür ????