Kategori: CSS

Bu sorunla bir çok kez karşılaştım.. Sorun nesneye verdiğimiz float’tan kaynaklı olarak kaymaya yol açıyor. Önce bir örnek göstereyim..

Html kodlarımız;

<div class="test">
	Tayfun Erbilen: <img src="resim.jpg" alt="" height="60" />
</div>

CSS kodlarımız;

.test {
	width: 200px;
	border: 1px solid #ddd;
	overflow: hidden;
	padding: 10px
}
.test img {
	float: right
}

Sonuç;

Çözüm

Çözüm basit. Float uyguladığımız nesneyi başa alacağız.. Yani yazıdan öncesine ekleyeceğiz. Yani;

<div class="test">
	<img src="resim.jpg" alt="" height="60" /> Tayfun Erbilen:
</div>

Ve sonuç;

Evet bir sorunun daha üstesinden gelmiş olduk ???? IE ile bol dertli günler.

Eğer touch ekranlar için CSS kodlaması yapıyorsanız, böyle bir sorunla karşılaşabilirsiniz.. Özellikle makinalar dandik ve kullanan kişilerde bu işi bilmeyenlerden ise gereksiz tıklamalar ile nesne içerisindeki değerleri seçeceklerdir.. Bunun olmasını önlemek için CSS imdadımıza yetişiyor.. Tüm modern tarayıcılarda ve IE10 olmak üzere ön ekler ile birlikte kullanıldığında herhangi bir sorunla karşılaşmıyorsunuz.. Bu işlem için user-select değerini none yapmamız yeterli.

Tüm elemanlara uygulamak için gerekli CSS kodu;

*:not(input):not(textarea) {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

Ya da bazı belli başlı elemanlara uygulamak için onlara unselectable adında bir sınıf atayabilir ve bu sınıf için bu kod tanımlamalarını yapabilirsiniz;

.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

IE9 ve Altı İçin Çözüm

CSS ile bir çözümünü bulamadım.. Ancak html niteliği ve javascript ile çözümleri mevcut.. Seçilemez olmasını istediğiniz nesneye unselectable=”on” eklemeniz yeterli olacaktır.

<div unselectable="on">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>

Ya da javascript ile yapmak istersek setAttribute() ile niteliği ekleyebiliriz.

<div id="nesne">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>
<script type="text/javascript">
document.getElementById("nesne").setAttribute("unselectable", "on");
</script>

Evet işte bu kadar, artık nesneler içerisindeki yazılar seçilemez oldu ????

IE7’ye uygun tasarımlar dökmeye çalışıyorsanız, bu tarz sorunlarla muhakkak karşılaşıyorsunuzdur.. Bir türlü z konumunu yükselttiğiniz değer bir diğer nesnenin üzerine çıkmıyordur.. Bu sorunun sebebi z-index verdiğiniz nesnenin üst nesnelerinden birisine position uygulamanızdan kaynaklıdır. Yani bu mantıkla baktığımızda IE7 z-index uygulanacak nesnenin üst nesnelerinde position olmasını kabul etmiyor. Küçük bir örnek vermek gerekirse;

Burada hakkımda menüsünün üzerine gelince açılan bir alt menüsü mevcut.. Şuan tüm tarayıcılarda arama kutusu açılan menünün üzerine çıkmış durumda.. Şimdi z-index değerini açılan ul nesnesine verelim.. Örneğin z-index: 1 ekleyip deneyelim;

Evet şuan IE7 hariç diğer tüm tarayıcılarda (muhtemelen) açılır menü yukarıya çıktı. Ancak IE7’de ne hikmetse hala altta ???? Bunun sebebi en başta da dediğim gibi ul’nin üst nesnesi olan li’de position değeri olmasından kaynaklanıyor. Burada li’nin position değerini silemeyeceğimize göre ul’ye verdiğimiz z-index değerini li’ye vermemiz gerekecek. Yani IE7 ve diğer tarayıcılar için uyumlu hali;

Bir başka iğrenç IE hatasında görüşmek üzere ????

Bilmeyenler için css‘de özellikle modern dökümler yaparken çokça kullandığım calc() fonksiyonundan bahsetmek istiyorum..

Nedir?

Css’de matematik hesapları yapmak için kullanılır.. İçerisinde değerler toplanabilir, çıkartılabilir, bölünebilir, çarpılabilinir..

Nerede, Ne İçin Kullanılır?

Aslında kullanım yeri çook fazladır.. Öyle ki bu css fonksiyonunu sonradan keşfetmem bile benim için üzücü oldu ???? En basit örnek vermek gerekirse.. Sağ ve Sol adlı iki nesnemiz olsun.. Sağ bölümün genişliği sabit, sol bölümün ise yüzdeli.. Buna göre bu 2 nesneyi kolayca nasıl yanyana getirebiliriz? Elbette cevap belli .

Birkaç Basit Örnek Kullanımı

div {
    width: calc(100% - 200px); /* 100%'ün 200px küçüğü */
}
a {
    font-size: calc(2 * 15px);
    /* önek kullanımı */
    font-size: -webkit-calc(2 * 15px)
}

Tarayıcı Desteği

Internet Explorer – IE9 ve üzerisi için geçerlidir.
Firefox – 15.0 sürümünden öncesi için -webkit- öneki ile birlikte kullanılıyor. Ancak 15.0 sonrası için kullanılmasına gerek yok. (Not: Şuanki sürümü 24.0 siz düşünün)
Chrome – 25.0 sürümünden öncesi için -webkit- öneki ile birlikte kullanılıyor. Ancak 25.0 sonrası için kullanılmasına gerek yok. (Not: Şuanki sürümü 30.0 siz düşünün)
Safari – 6.0 ile birlikte kullanılmaya başlanıldı. Ancak -webkit- öneki olmak şartıyla. Şuan 7.0 sürümünde önek olmadan kullanılabilinir.
Opera – 15.0 sürümü ile birlikte geldi. Önek olmadan kullanılabilinir.
Daha fazla tarayıcı desteği için tıklayın!

Dış Kaynaklar

Şunlarada bakmanızda fayda var;
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
http://www.w3.org/TR/css3-values/#calc

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 ????