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

0 yorum:

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

0 yorum:

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

0 yorum:

CSS'e Başlamak

CSS (Cascading Style Sheets) HTML 'deki bazı problemleri gidermek içinkullanılır, ama asıl neden olarak  web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır. CSS 1996'da W3C tarafından duyuruldu. Son olarak CSS3.0 versiyonu işler durumdadır.

CSS kullanmanın günümüzde bir çok avantajı bulunmaktadır.Bunlar;

Görünüm Avantajları

CSS bir çok stil özelliğne sahiptir. CSS'in sayfa içeriğindeki öğelerini sayfa görünümünden ayrılması için geliştirildiğini düşünürsek avantajı anlamış oluruz.

Tasarım Kolaylığı

Tek bir css dosyası ile tüm web sitenizdeki öğelerin stillerini yönetebilirsiniz.Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz.Kullanıcıya düzenli bir içerik sunabilir ve sayfaların hızlı yüklenmesini sağlayabilirsiniz.
Read More

0 yorum:

Blog Yazıları