tarihinde Fatih Hayrioğlu

Projede karşılaştığım sorunlardan biri textarea elemanı içinde enter’a basınca alt satıra geçmiyordu. Diğer tarayıcılarda sorun yokken ie sürümlerinde böyle bir sorun çıkıyordu.

Sonra incelediğimde ve araştırdığımda bu sorunun benim kullandığım sıfırlama kodundaki bir durumdan kaynaklandığını gördüm.

textarea, input, select {
    font:inherit;
    white-space:normal;
}

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

Sıfırlama kodundaki yukarıdaki kodda white-space:normal; tanımlaması sorunu çıkarıyor. Bu kodu çıkarınca sorun ortadan kalkıyor. Ancak yinede ie’nin textarea’daki white-space:normal; kullanımında sorun oluşturduğu gerçeğini bu ortadan kaldırmıyor.

Bu durumu halletmenin daha düzgün bir yolu var

textarea {
	white-space:pre;
}

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

Tanımıda bu sorunu gidermek için yeterlidir.

Kaynaklar

tarihinde Fatih Hayrioğlu

Birçok kişi bu soruyu sordu ve bende belirli aralıklar bu tip bir ihtiyacım oldu, sonunda buraya yazmaya karar verdim. Bu işi sadece CSS kullanarak nasıl yapıldığını yazacağım burada.

Bir kaç yöntem var bu konuda. Burada sabit genişlik ve yükseklikte alanları sayfanın dikeyde ve yatayda ortalı olması durumu yazımı yazacağım. position:absolute metodu denen yöntem ile yazacağız kodu.

HTML kodumuz

<div id="ortalaAlan">
	Fatih Hayrioğlu'nun not defteri
</div>

CSS kodumuz yazmaya başlayalım

html, body {
	height: 100%;
}

body{
	margin:0;
	padding:0;
}

İnternet explorer için ilk satırı ve body boşluklarını sıfırlamak içinde ikinci satırı yazdık.

#ortalaAlan {
   width: 300px;
   height: 80px;
   background-color:#fff;
   border:5px solid #E9E9E9;
}

Sabit genişlik ve yükseklik veriyoruz ve genel tanımlarımızı yapıyoruz. Şimdi bu alanı ortalamak için kodumuzu yazalım.

#ortalaAlan {
   width: 300px;
   height: 80px;
   background-color:#fff;
   border:5px solid #E9E9E9;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -40px;
}

Yukarıdaki kodu incelersek, postion:absolute ve left:50% ve top:50% değerleri ile elemanımızı ortalıyoruz. Bu ortalama elemanımızın sıfır noktası içindir, ancak bizim elemanımızın belirli bir genişliği ve yüksekliği olduğu için bu tam bir ortalama sağlamayacaktır.

Tam bir ortalama için ise elemanın genişliğinin yarısı kadar sola çekmeli ve elemanın yüksekliğinin yarısı kadarda yukarı çekmeliyiz. Bunun için eksi değerli margin-left ve margin-top kullanıyoruz. Bu kodlar elemanımızı dikeyde ve yatayda ortalayacaktır.

Kodumuzu ve içeriğimiz biraz daha süslersek

<div id="ortalaAlan">
	<p>Fatih Hayrioğlu'nun not defteri</p>
</div>

CSS kodumuzu

html, body {
	height: 100%;
}

body{
	margin:0;
	padding:0;
	background-color:#D2D2D2
}

#ortalaAlan {
   width: 300px;
   height: 80px;
   background-color:#fff;
   border:5px solid #E9E9E9;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -155px;
   margin-top: -45px;
}

#ortalaAlan p{
    background:url(gudi.gif) 0 0 no-repeat;
    color:#333333;
    font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding-left:35px;
    margin:10px
}

Border olarak eklediğimiz değerleride çıkardığımız için değerlerimiz -5px daha azalmıştır.

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

Bu kodu tüm tarayıcılar destekliyor.

Kaynaklar

tarihinde Fatih Hayrioğlu

Aslında başlığı nasıl atacağımı şaşırdığım için kısa bir başlık attım.

Sorun

Sorunumuz tam olarak anlamak için daha önce anlattığım CSS ile buton yapmak adlı makaledeki görselliği arttırılmış esnek butonu örneğini incelememiz yeterli.

Genelde esnek yapılı bu tip resimli menüler veya butonları oluştururken bir elemana iki background-image atayamadığımız için iç içe iki eleman koyarız. (Sliding Door) esnek yapılar olarak adlandırılan yöntem kullandığımızda başımıza geliyor.

a {
    display:block;
    float:left;
    width:auto; background:url(cancanli_butonlar_ard.gif) 0 0 no-repeat;
    text-decoration:none;
    font-size:14px;
    font-weight:bold
}

a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636
}

HTML kodu

<a href="#">
	<span>Örnek Buton Metni</span>
</a>

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

Diğer tarayıcılarda sorun olmazken ie6 ve ie7’de el işareti yerine normal fare imleci görünüyor.

Aşağıda ie7 ve Firefox görüntüleri yanyana görünmektedir.

IE7 de buton üzerinde normal imleç görünürken Firefox ve diğer tarayıcılarda normal olarak el işareti görüntülenecektir.

Çözüm

Çözümü çok basit tabi

a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636;
    cursor:pointer
}

cursor:pointer özelliğini eklemek yeterli oluyor.

Bu sorunu niye yazdım? Benim gibi kod yazarken unutuyorsanız hatırlayalım diye. İşin ilginç yanı internette ufak bir araştırma yaptım ama hiç bu sorun ile karşılaşanı görmedim, belki ben tam anahtar kelimeleri bulamadım