Kategori : CSS

Jul 20 2009

Basit Bir Form İpucu

Formlarımızda yer alan "checkbox" yada "radio button" için tanımlı olan açıklamaya tıklayarak gerekli kutucukların seçilmesini sağlamak olanaklı.

<form action="#cgi.script_name#" method="post">
   ColdFusion kodlama için hangi editörü kullanmaktasınız?
   <br />
   <input type="checkbox" name="editor" id="editor-dw" value="dw" />
   <label for="editor-dw">Dreamweaver</label>
   <br />
   <input type="checkbox" name="editor" id="editor-hs" value="hs" />
   <label for="editor-hs">Homesite/CF Studio</label>
   <br />
   <input type="checkbox" name="editor" id="editor-cfeclipse" value="cfeclipse" />
   <label for="editor-cfeclipse">CFEclipse</label>
   <br />
   <input type="checkbox" name="editor" id="editor-notepad" value="notepad" />
   <label for="editor-notepad">Notepad</label>
   <br />
   <input name="gönder" type="submit" value="Gönder!" />
 </form>

1 yorum - Gönderen : Oğuz Demirkapı (2:13 PM) - Kategori : CSS | HTML

Jul 20 2009

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.

0 yorum - Gönderen : Oğuz Demirkapı (2:12 PM) - Kategori : CSS

Jun 30 2009

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.

1 yorum - Gönderen : Oğuz Demirkapı (2:55 PM) - Kategori : CSS

Jun 30 2009

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"> "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.

0 yorum - Gönderen : Oğuz Demirkapı (2:54 PM) - Kategori : CSS

Jun 30 2009

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ı. :)

0 yorum - Gönderen : Oğuz Demirkapı (2:54 PM) - Kategori : CSS

Jun 30 2009

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; }

0 yorum - Gönderen : Oğuz Demirkapı (2:44 PM) - Kategori : CSS

Jun 29 2009

Bu Kitaba İhtiyacımız Var! CSS

Fatih Hayrioğlu'nun uzun süredir üzerinde çalıştığı CSS’e başlangıç kitabımı bitti. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur.
Bu kitap makaleleri derleyip hazırlanan ilk kitap. İnşallah ikinci kitapta yazılacak. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.

Umarım herkesin yararlanacağı bir Türkçe kaynak olur.

http://www.fatihhayrioglu.com/kitap/

0 yorum - Gönderen : Yunus Özay (6:12 AM) - Kategori : CSS | Dhtml | Genel | HTML

Kategorİler

Gelecekonline


* GALAXY Nexus, Avea işbirliğiyle Mart ayında Türkiye’ye geliyor

AylIk Arşİv

Arama

İçerİk OrtaklarImIz

Kod Bulutu

coldfusion sql genel javascript css bizden haberler seminerler html workcube dhtml ajax tsql erp xml java