Sayfa Kaymalarına CSS İle Son

Firefox ile sayfalara bakarken hazırlanan sayfalar ekranda yer alan alandan daha küçükse normalde sağ tarafta yer alan dikey kaydırma çubuğu görünmemekte. Ancak bir linke tıklandığında eğer hazırlanan sayfa ortalanmış şekilde ve aşağı doğru uzun ise sanki önceki görüntüye göre belirli bir oran (8px) sola kaymış gibi görünür zira sağ tarafa gelen kaydırma çubuğu nedeni ile sayfa yeniden ortalanır.

CSS dosyamıza ekleyeceğimiz basit bir kod ile bu durumu önleyebiliyoruz.

html { min-height: 100%; margin-bottom: 1px; }

Basit ancak kullanışlı bir çözüm.

Tam Ortalayalım

Bazen ihtiyaç olan ve ekranın tam ortasında bilgi gösterme ihtiyacını çok basit gibi görünüyor olsa da gerçekleştirmek epey uğraş ister.

İşte güzel bir örnek sayfa:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

ve basit bir "Yapım Aşamasında" sayfası. :)

Tablosuz Tablo

Tablo yaratımı ve biçimlendirimi web tasarımının temel elemanlarından birisi halinde. Peki tablo kullanmadan da tablo hissi verdirip aynı işlevi gerçekleştirmek olanaklı mıdır aceba?

İşte basit bir CSS tablo örneği.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tablo</title>
<style type="text/css">
<!--
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}

#tablom {
   display: table;
   border:1px solid #000;
   border-spacing: 5px; /* cellspacing için kullanılan değer */
   background-color: #CCC;
   }

#satir {
   display: table-row;
}

#hucre {
   display: table-cell;
   width:150px;
   padding:10px; /* cellpadding için kullanılan değer */
   border:1px solid #DDD;
   background-color: #FFF;
   }
-->
</style>
</head>

<body>
<div id="tablom">
   <div id="satir">
      <div id="hucre">Test 11</div>
      <div id="hucre">Test 12</div>
      <div id="hucre">Test 13</div>
   </div>
   <div id="satir">
      <div id="hucre">Test 21</div>
      <div id="hucre">Test 22</div>
      <div id="hucre">Test 23</div>
   </div>
   <div id="satir">
      <div id="hucre">Test 31</div>
      <div id="hucre">Test 32</div>
      <div id="hucre">Test 33</div>
   </div>
</div>
</body>
</html>

Bence oldukça pratik kullanım alanları olabilecek bir kullanım şekli. Özellikle "hucre" alanlarının farklı tanımlar kullanarak farklı şekilde gösterimi oldukça ilginç olanaklar sunacaktır.

CSSVault.com : CSS Destekli Web Tasarımları

CSS destekli web sayfalarına ait örneklerin bolca bulunabileceği bir site.

Olukça çeşitli ve kullanışlı CSS kaynaklarına da bu siteden ulaşabilmek olanaklı.

http://cssvault.com

Benim gibi CSS tabanlı tasarıma yoğunlaşmışsanız kesinlikle bakılması gereken bir çalışma.

CSS İle Frame Yaratımı

Web sayfalarında "frame" kullanımı eskisi kadar güncel ve tercih edilir bir yöntem olmasa da özellikle sayfalardaki menü gibi elemanların kolay erişilebilirliği açısından kimi zaman faydalı olabilmekte.

"Frame" tekniğini doğrudan CSS kullanarak gerçekleştirmeyi anlatan güzel bir yazı önermek istiyorum.

http://www.webreference.com/programming/css_frames/

Örnek bir sayfaya da "http://www.stunicholls.myby.co.uk/layouts/fixit.html" adresinden ulaşabilirsiniz.

CSS Yaratıcı

Son zamanlarda oldukça zevk alarak ilgilendiğim konulardan birisi de CSS ile gelen yenilikleri keşfetmeye çalışmak. Özellikle yoğun geçen iş ortamından arda kalan zamanda fazlası ile ilgi duyarak incelemeye çalıştığım bir konu.

Yapmakta olduğum bazı projeler için de tamamı ile CSS destekli sayfalar üretmeye çalışmaktayım. Özellikle tablosuz tasarımlar ciddi bir sanat olayı gibi gelmekte.

Tam bu noktada da fazlası ile yardımcı olan bir kaynaktan bahsetmek istiyorum.

"CSS Creator". CSS hakkında bir çok olanak sunulsa da en faydalı diye düşündüğüm alanı ise sayfa taslağının oluşturulduğu "Layout Designer".

Mutlaka deneyiniz ...

http://www.csscreator.com/version2/pagelayout.php

Max Design CSS Örnekleri ve Eğiticiler

CSS ile çalışmak artık web platformunda standartlaşmaya başladı. Ancak CSS ile çalışırken henüz neler yapılabilirliği konusunda bilgi sahibi olmayan bir çok tasarımcı da bulunmakta.

Max Design tarafından oluşturulmuş ve temel olarak listeleri CSS ile nasıl kullanılabilirliğine güzel örnekler içeren bir siteyi önermek istedim.

Konumlandırma konusundaki eğiticileri de özellikle incelemenizi öneririm.

http://css.maxdesign.com.au

jComponents: ColdFusion İçin Faydalı Araçlar

jComponents ColdFusion geliştiriciler için özellikle CSS kullanılarak hazırlanmış kullanıcı arayüzünü geliştiren çok güzel uygulamalardan oluian bir paket.

jTab, jTree, jAccordian, jContainer olarak adlandırılan uygulamaları denemenizi tavsiye ederim.

http://clearsoftware.net/jComponents1_0/

Renkler & Estetik & Kullanılabilirlik

Renk seçimi gerek estetik, gerekse de kullanılabilirlik açısından çöok önemli olabilmekte. İçerik olarak oldukça başarılı olan bir çok projenin sırf tasarımı yüzünden başarısız olabildiğini, yada içerikten yoksun bir çalışmanın sunum tarzı ile öne çıkabildiğini görebilmekteyiz.

http://www.colorcombos.com renk seçimi konusunda yardım alınabilecek oldukça faydalı bir çalışma. Tasarımla ilgilenen tüm arkadaşlara öneririm.

Birden Fazla CSS Bir Arada

Oldukça hoşuma giden ve sıkça kullandığım bir CSS özelliğini sizlerle de paylaşmak istedim.

Birçoğumuzun bilmediğini düşündüğüm durum bir sayfa elemanı için aynı anda birden fazla CSS özelliğinin kullanılabilirliği.

<div class="SolaKaydir icArka">
   İçerik buraya ...
</div>

Bu şekilde "div" için geçerli olan alan CSS içerisinde tanımlı sola kaydırma (float left) etkisi hem de iç dizayn için kullandığım arka plan özelliklerini aynı anda almış oluyor.

Pratik bir yöntem ...

Creative Commons License | Oğuz Demirkapı | blog <AT> demirkapi.net | This blog is running BlogCFC version 5.8.001.