Blogger tarafından desteklenmektedir.

27 Mart 2013 Çarşamba

Sayfa Dibine Yapışık Footer


Çoğumuzun karşılaştığı sorun aslında; sayfa içeriğimiz az olduğu zamanlarda footer div imizde yukarıya çıkmasıdır.Bunu javascript kullanmadan css yardımı ile sayfanın en altına nasıl sabitleriz onu anlatmaya çalışacağım.

Html kodumuz :

<div id="master">
    <div id="header">
        <h1>Deneme yazıları</h1>
    </div>       
    <div id="content">
        <div id="icerik">
        </div>

        <div id="sagAlan">
        </div>
    </div>
</div>
<div id="footer">
</div>

Css kodumuz :

html, body, #master {
height: 100%;
}
body > #master {
height: auto; min-height: 100%;
}
#content {
padding-bottom: 133px;
}

/* footer yukseligi ayni olmali */

#altAlan {
    position: relative;
    margin-top: -133px; /* footer yuksekliginin eksi degeri */
    height: 133px;
    clear:both;
}

Burada en çok dikkat etmemiz gereken kısım yukseklik padding ve margin kısımları aynı olmalıdır.



 Read More

26 Mart 2013 Salı

Z-index


Uygulanan elementin z-eksenindeki konumunu belirler.Her elemente z-index uygulanmaz ve gereksinim duyulmaz.Aslında konumlandırma değeri verilen elementlere z-index uygulamamız gerekir.z-index in asıl anlamı elementin altta yada üstte kalmasını belirler.

Destekleyen tarayıcılar;
  • Firefox
  • Chrome
  • Safari
  • Opera
  • İnternet Explorer
  • Mobil Tarayıcılar
  • iOS Safari
  • Opera Mobile
  • Android Browser

Örnek CSS :

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

.kutu-temp{
    width:200px;
    height:200px;
    position:absolute;
}

.kutu1 {
    background: #333;
    border:2px solid #000;
    top: 0;
    left: 0;
    z-index:2
}

.kutu2 {
    background: #d90000;
    top: 10px;
    left: 10px;
    z-index:1 ;

html:

<body>
    <div class='kutu-temp'>
        <div class='kutu1'></div>
        <div class='kutu2'></div>
    </div>
</body>


Yukardaki örnekte verildiği gibi kutu-temp class ının içerisine 2 adet div konulmustur.kutu2  classına belli olması için yukarıdan ve soldan 10px boşluk verilmiştir.kutu1 class ının z-index ine 2px değer verildiği için kutu2 class ının ustunde kalacaktır.


 Read More

Css ile Yer Tutucuya Nasıl Stil Verebilirim?


Formların input veya textarea alanlarında bilgileri gösterdiğimiz kısma Yer Tutucu (Placeholder) denir. Chrome’un öncülüğünde kullanıcı bir şeyler yazdıktan sonra kaybolmaktadır :) Eskiden bu işlemi javascript ile yaparken artık HTML5 ile placeholder'a stil verebiliyoruz.

Klasik olarak yer tutucularında en büyük sorunu İE 10 da desteklenip 8 ve 9 da desteklenmemesidir.

Örnek HTML :

<input type="text" name="arama" placeholder="Aramak İstediğiniz İçerik?" />

Stillerede örnek css gibi bir css yazarak müdahale edebilirsiniz.





  • input{
  • color:#333;
  • width:150px;
  • padding:3px 0 0 15px;
  • border-radius:3px;
  • border:1px solid #ccc;
  • }
  •  
  • input::-webkit-input-placeholder { color:#1633c7}
  • input:-moz-placeholder { color:#1633c7 }
  • input:-ms-input-placeholder { color:#1633c7 }
Not : -webkit tanımının başında iki adet iki nokta üst üste konulması gerekiyor.
 


 




 Read More

Blog Yazıları