Dinozorus.com - Web Tasarım & Geliştirme

CSS, PHP, HTML, Ajax ve jQuery çalışmalarımızda çoğu kez kullandığımız, sık sık çalışmalarımıza eklediğimiz kod parçaları vardır. Hem yeni başlayanlar hem de sık çalışıp çok unutanlara yardımcı olacağına inandığımız makaleyi siz geliştiricilerle paylaşıyoruz.

1. CSS Print Framework

ÇoÄŸu insan Web sayfası dendiÄŸinde onların sadece göründüğünü düşünür, ancak eninde sonunda bazı Web sayfalarını basmak isteyen çıkacaktır. Ekran da güzel göründüğü gibi baskı da güzel netice alınacak diye bir kaide yok! Baskı için farklı olarak kullanabileceÄŸiniz Hartija isimli css framework’ünü , indirip çalışmanızda < /head > etiketinden önce baskı (print.css) için css tanımınızı yapabilirsiniz.

2. @font-face kullanımı

Bazen web geliÅŸtiricisi ve tasarımcılarının sıklıkla düşündüğü, aÅŸmak için türlü yollara baÅŸvurduÄŸu bir sıkıntı vardır. Sitelerin de sürekli kalıplaÅŸmış yazı tiplerini görmek onlara sıkıntı verir ve farklı olmanın yolunu seçmek isterler. Bu herkesin en tabi hakkı…otf ve ttf uzantılı fontları dilediÄŸiniz gibi kullanabilirsiniz. Yeni nesil tarayıcıların hepsi desteklemektedir. Bu konu ile ilgili detaylı bilgi için aÅŸağıdaki incelemeleri de okuyabilirsiniz.

• Fatih HayrioÄŸlu’nun incelemesi
• Kadir Günay’ın incelemesi

@font-face {
font-family: MyFontFamily;
src: url('http://');
}

3. CSS Reset

Bir tasarımcı için olmazsa olmaz, css dosyasında bulunması gereken satırların bütünlüğü. 6 adet çalışmaya buradan erişebilirsiniz.

• Eric Meyers Yöntemi
• Yahoo UI CSS Reset Yöntemi

4. IE6 Transparan PNG Çözümlemeleri

Tasarımcıların kabusu denilebilir. Her ne kadar PC ile haşır neÅŸir olmuÅŸ kullanıcıların artık tercih etmediÄŸi bir tarayıcı olsa da yine de dünya genelinde Internet Explorer 6 tarayıcısının azımsanmayacak bir kullanıcı kitlesi var. Bu yüzden tasarımcılar gerek iÅŸ yaptığı müşterilerine, gerek kendi projeleri için IE6 desteÄŸini vermek zorunda, png olayına el atmak durumunda (not: 24 bitlik transparan sorunu)…

• Hakan Demiray’ın Çözümü (DMRY)
• Fatih HayrioÄŸlu’nun çözümü

5. CSS Layout Koleksiyonu

Bu sayfada projelerinizde kullanabileceÄŸiniz, css düzeni için 300′den fazla ızgara bulunmaktadır. Mutlaka göz atın, iÅŸinize yarayacaktır.

6. Çok Yönlü Navigasyon Menü

HTML, CSS ve JQuery kütüphanesi kullanıcılarak JavaScript ile yapılmış bu menüyü çalışmalarınızda dilediğiniz şekilde kullanabilirsiniz. Resimden görüntüsünü görebilir, bu bağlantıdan da kaynak kodları indirebilirsiniz.

JQuery ile yapılandırılmış menünün HTML yapısını buradan inceleyebilirsiniz.

Link 1
Link 2
Link 3

Link 3.1
Link 3.2

…temel css yapısını görüntüleyebilirsiniz. (siteniz de kullanacaksınız kendinize göre özelleÅŸtirmenizi tavsiye ederiz.)

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}

… ve son olarak JavaScript kodunu görüyoruz. Her zamanki gibi buradaki kodları < /head > etiketinden önce sayfamıza ekliyoruz.

7. Min-height kullanmanın faydaları

Aşağıdaki örnek resimde gördüğünüz üzere bazen kısa kalan sayfalar, hem mizanpajı bozmasından hem de göze hoş gelmemesinden dolayı tasarımcılar sorun yaşarlar.

… buradaki gibi çok basit css kodu sayesinde projelerinizde kullanabilirsiniz.

.secici  {
  min-height: 550px;
}

Min-height kullanımı için IE6 çözümü

“Min-height” kullanımını Internet Explorer 6 desteklememektedir. AÅŸağıdaki çözüm sorununuza yardımcı olabilir.

.secici {
  min-height:550px;
  height:auto !important;
  height:550px;
}

Benzer makaleler:

1. Facebook Navigasyon Menü Yapalım Her zaman kullanıcı dostu (user-friendly) navigasyon menüler kullanıcıların web sitesi...

Related posts brought to you by Yet Another Related Posts Plugin.