‘CSS’ Etiketi Arşivi
Yatay ve Dikey Ortalama Tekniği
Daha önce CSS Ortalama Tekniği isminde bir yazı yazmıştım ve DIVleri ortalamayı anlatmıştım. Fakat bu ortalama yatay ortalamaydı. Şimdi ise hem yatay hem de dikey ortalama tekniğini anlatacağım.
Adım 1 - HTML kodları
<div id="OrtalananGenelAlan"> <div id="Icerik"> <h1>Yatay ve Dikey Ortalama Tekniği</h1> <p>Gördüğünüz bu kutu şeklindeki DIV, yatay ve dikey olarak ekranın tam ortasında durmaktadır.IE5 ve Mac' lerde bazı problemler olsa da bunları bazı CSS hackler ile çözüyoruz. Yeni nesil tarayıcılar ise hiçbir sorun çıkarmadan yatay ve dikey ortalamayı yapabiliyorlar. Tarayıcınızın ekranını küçülttüğünüzde dahi bu ortalanmış DIV hiçbir şekilde kaymayacaktır. Sayfanın genelinde hiçbir şekilde kaydırma çubuğu görmeyeceksiniz. DIV içindeki kaydırma çubuğu DIV' e verilen overflow özelliğinden kaynaklanmaktadır.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla. Quisque faucibus tellus. Proin iaculis. Donec lobortis. Maecenas ut velit. Quisque molestie wisi. Sed sem lectus, ullamcorper quis, bibendum in, tincidunt quis, nulla. Nulla malesuada. Donec a elit at risus bibendum commodo. Duis quis ipsum. Sed ultricies, odio quis rutrum porta, lorem lacus sodales erat, nec scelerisque felis ipsum ut diam. Nunc lorem eros, dignissim quis, rhoncus sit amet, mattis eu, lacus. Vestibulum ipsum tellus, imperdiet iaculis, vulputate gravida, venenatis sit amet, lacus. Cras cursus. Cras dignissim mauris nec lorem. Curabitur malesuada. Nulla eleifend.</p> ..... </div> </div> </div>
Adım 2 - CSS Kodları
/* Mac ve IE5 için hack */
#OrtalananGenelAlan {
background-color:#999999;
width:720px;
height:420px;
margin:10px auto;
position:relative;
}
#Icerik {
background-color:#fff;
position:absolute;
top:10px;
left:10px;
height:380px;
width:670px;
padding:10px 20px 10px 10px;
overflow:auto;
}
/* commented backslash hack - invisible to IE 5 \*/
#OrtalananGenelAlan {
position:absolute;
margin:-210px 0 0 -360px;
left:50%;
top:50%;
}
/* hack biter */
OrtalananGenelAlan isimli DIV için Mac ve IE5′ te yatay hizalamasında sorun çıkarmaması için önce bir hack uyguladık. İkinci değerler ise dikey ortalama için verildi.
Yeni Seneye Yeni Tema İle Başlamak
Yeni yıl ile ilgili yazımdan önce bir önceki temam için logoyu düzenlemiştim şimdi de sıra temaya geldi. İşte şimdi onu da değiştirip yeni yıla yeni bir arayüz ile başlayalım dedim.
Neden bu arayüz?
Öncelikle sadeliği ve kullanımı çok hoşuma gitti. Sonrasında ise renkleri ve son yazı bölümünün kullanımını görünce evet bu dedim. İlk olarak iç karartıcı gibi gelse de gözü çok yormadığını yazılar arasında geçiş yaptıkça anlayacaksınız.
Bu nasıl bir logo?
Görüp tanıyanlar beni az çok bilirler, saçlarım sürekli kısa hatta tabiri caiz ise 1 numara ve sakalım uzundur. Çalışırken, yolda yürürken sürekli kulaklık takarım. İşte bunları alıp birleştirdim ve ortaya böyle bir logo çıktı. Logoyu Adobe Illustratorda tasarladım. Daha sonra Photoshopa aktardım ve png formatında kaydettim. Logoya eklenecek bir kaç özellik daha var aslına bakarsanız. Logo ile alt kısımları görünüşte bağlayacak bazı ufak detaylar. Onları da yakın zaman içinde tamamlayacağım.
Güncelleme öncesi
Aslına bakarsanız 1-2 gündür logo çalışması üzerindeyim. Şu andaki logo sadece o kısmın boş kalmaması için FWde çabuk biçimde hazırlanmış ve konulmuş bir logo. Önümüzdeki hafta içinde web 2.0 mantığında ve çizgilerinde bir logo ekleyeceğim o bölüme. Ekleyeceğim logonun %70′ lik kısmı bitti sayılır. Aklımda tasarladığım ve AIde çizdiğim bir iki örnek var. O örneklerden birisine karar verip ekleyeceğim.
Arayüz (Tema) kime ait?
Daha önceki sürümlerde de temalarını kullandığım Blog Oh Blog’ a ait. http://www.blogohblog.com/wordpress-theme-portfolio-press/ adresinden tema ile ilgili yorumlara bakabilir, ön izleme yapabilir ve indirebilirsiniz.
Ben temanın CSS, sidebar.php dosyaları ile oynadım ve Türkçeleştirdim.
Gördüğünüz hata veya eksik yerleri yorum olarak yazarsanız çok sevinirim.
jQuery ile Kayan Panel
Yazı başlığında olduğu gibi jQuery ile oluşturulmuş kayan panel yapıp içine ufak bir iletişim formu ekleyeceğiz.
jQuery Kayan Panel
Adım 1 - XHTML Oluşturmak
<div class="GenelAlan"> <div id="FormAlan"> <div id="IletisimForm"> <fieldset> <label for="Name">İsim *</label> <input id="name" type="text" /> <label for="Email">E-Posta Adresi*</label> <input id="Email" type="text" /> <label for="Message">Mesajınız *</label> <textarea id="Message" rows="3" cols="20"></textarea> <input id="sendMail" type="submit" name="submit" onClick="closeForm()" value="Gönder" /> <span id="MesajGonderildi">Mesajınız başarıyla gönderildi!</span> </fieldset> </div> <div id="IletisimBtn"></div> </div> <div class="header"> <h1> <img src="logo.png" style="margin-top: -20px;" /></h1> </div> .....
Adım 2 - CSS Hazırlamak
.GenelAlan
{
margin: 0px auto;
width:960px;
background-color:#ffffff;
text-align:left;
position: relative;
}
#FormAlan
{
position:absolute;
left:600px;
float:right;
}
#IletisimForm
{
height:277px;
width:351px;
background-image:url('bkg.jpg');
display:none;
}
#IletisimForm fieldset
{
padding:30px;
border:none;
}
#IletisimForm label
{
display:block;
color:#ffc400;
}
#IletisimForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#IletisimForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#IletisimForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#IletisimBtn
{
height:40px;
width:351px;
background-image:url('iletisim_form_btn.png');
display:block;
cursor:pointer;
}
#MesajGonderildi
{
color:#ff9933;
display:none;
}
Adım 3 - jQuery Dosyalarını İndirmek ve HTML Dosyasına Tanıtmak
Bildiğiniz gibi jQuery bir javascript kütüphanesi. jQuery ile çalışmak istiyorsanız bu kütüphaneye ait js dosyasını indirmek zorundasınız. İndirmek için jQuery resmi sitesini ziyaret edip son versiyonu indirebilirsiniz. İndirdiğiniz js dosyasını şu şekilde HTML dosyanıza ekleyin;
<script src="dizin/jquery-1.2.6.min.js" type="text/javascript"></script>
Siz direk ana klasöre de ekleyebilirsiniz.
Adım 4 - jQuery Kodlarını HTML Dosyasına Eklemek
Daha önceki konularda da söylediğim gibi jQuery ile ilgili işlemleri gerçekleştirebilmek için sadece js dosyasını eklemek yeterli olmuyor. Gerekli alanlar için tetikleyici bir kod bloğu eklemeniz gerekir.
<script type="text/javascript">
$(document).ready(function(){
$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});
});
function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
</script>
Bu kod’u kısaca anlatmamız gerekirse;
$(document).ready(function(){
Tetikleyiciyi çalıştır
$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});
#IletisimBtn isimli dive bir tıklama fonksiyonu oluştur ve eğer bu div gizli ise yavaş biçimde (.slideDown(”slow”)) aşağıya kaydır. Gizli değilse yine yavaş biçimde yukarı kaydır (.slideUp(”slow”))
;function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
closeForm isminde bir fonksiyon oluştur ve #MesajGonderildi isimli div’i yavaşca göster. setTimeout komutu ise MesajGonderildi divi içindeki mesajın yok olma zamanını belirtiyor. Bu mesaj yok olduktan sonra da IletisimForm isimli divi yani aşağıya kayan divimizi yavaşca yukarı doğru ilerlet ve kapat komutunu gerçekleştiriyor.
Not: Orjinal makale adresi http://designshack.co.uk/tutorials/creating-a-slide-in-jquery-contact-form ben jQuery kod bloğunu, css ve xhtml dosyalarını Türkçe anlattığım ve herkesin anlaması için bir bölümünü değiştirdim.
CSS Framework - CSS Yapıları
Daha önce hatırlarsanız http://www.kadirgunay.com/web-standartlarinda-en-bilinen-5-yanlis-anlasilma.html bağlantılı yazımda standartlara uymak istiyorsanız muhakkak web sitelerinizi CSS ile kodlamalısınız demiştim ve bunun etkilerini anlatmıştım. İşte bu yazımda da sizlere CSS Yapıları yani Framework dediğimiz olayı anlatacağım. Framework kelimesinin karşılığına baktığımızda önümüze çokca seçenek sunuluyor; “yapı, çatı, iskelet, kadro ve kafes” bunlardan en bilinen kelimeler. Ben genel anlamda yapı dedim. Sonuç olarak yaptıkları iş de bu kelimeye uygun.
Framework - Yapı Nedir?
Framework işi gereği hazır sınıfların, betik kodlarının ve örneklerin bulunduğu yapıların genel adıdır. Hemen hemen her yazılım dilinin kendine özgü bir veya birden fazla çeşitli işlere yaran yapıları ve bu yapılara ait hazır kodları, örnekleri bulunur.
Framework Ne İşe Yarar?
Genel olarak düşündüğümüzde;
- Hızlı üretim
- Bakımı kolaylaştırmak (güncelleme, değişiklik v.b durumlar)
- Projeye modülerlik kazandırma
- Farklı projeleri birleştirme ve yeniden kullanma
- Açık kaynak kod (tüm frameworkler değil)
gibi işlevsellikler sağlar.
CSS Frameworkleri - Yapıları Nedir, Nasıl Kullanılır?
Google’ da “css framework” diye arama yaptığınızda karşınıza bilindik css yapıları çıkacaktır. Bunlar,
Yukarıda verdiğim CSS Yapılarını açık kaynak kod oldukları için kolayca indirip kullanabilirsiniz. Örneklerin içinde çok güzel ve işinizi çok kolaylaştıracak kod örnekleri mevcut. Örnek verirsek, 2 kolonlu ve daha fazla kolonlu css kodlamaları, menu (navigasyon örnekleri), ie6 ve alt versiyonları için kutu modelleme ve hackler, css sıfırlama v.b daha bir çok kod örneğini göreceksiniz.
Bu css yapıları sayesinde kısa zamanda web sitelerinizin çatılarını oturtabilir ve daha hızlı bir şekilde css kodlaması yapabilirsiniz.
Kaynak Siteler;
sIFR
Merhaba arkadaşlar. Bu yazımda size jQuery’ nin sayısız nimetlerinden birisi olan sIFR tekniği hakkında bilgi vereceğim.
Öncelikle sIFR nedir ona bakalım?
sIFR jQuery eklentilerinden birisi ve özelliği web sitelerinizdeki metinleri flash tabanlı olarak istediğiniz yazı tipine çevirmenize yarıyor.
Peki jQuery nedir?
jQuery bir Javascript kütüphanesi. Bu kütüphane aracılı ile çok basit şekilde web sitelerinizde çok güzel uygulamalar yapabilirsiniz. Yazımı kolay ve kısadır.
sIFR’ i kullanabilmemiz için gerekli dosyalar nelerdir?
- jQuery kütüphanesi - jquery-1.2.1.pack.js
- jQuery Flash eklentisi - jquery.flash.js
- jQuery sIFR eklentisi - jquery.sifr.js
- Embed (sanırım Türkçesi içine gömmek oluyor) edeceğimiz yazı tipini hazırlayacağımız fla dosyamız - sifr.fla
- fonts dizini
Tüm bu dosyaları ve örnek dosyayı buradan indirebilirsiniz.
Adım 1 - Yazı Tipini Embed Etme (Flash içine gömme)
zipli dosyamız içinden çıkan sifr.fla isimli dosyamızı flash programı ile açın. İç içe gömülü movieclipler göreceksiniz. Metin kutusunu görünceye kadar moviecliplerin içine girin. Karşınıza örnek bir metin gelecek. Orada bulunan metni seçin ve değiştirmek istediğiniz yazı tipini seçerek metnin yazı tipini değiştirin. Değişikliği yaptıktan sonra metin ayarlarının bulunduğu yerde “Embed” isimli bir düğme göreceksiniz işte o düğmeye tıklayın. Karşınıza gelen pencerede “Basic Latin (95glyphs)” seçin ve aşağısında bulunan “Include these characters” isimli kutucuğa şunları ekleyin; “ŞşİiÖöÇçÜüIıĞğ” (tırnaklar olmadan ekleyin). Bu yaptığımız işlem şunun içindir; seçtiğimiz yazı tipi Türkçe karakterleri desteklemiyor ise buraua girdiğimiz karakterleri de almasını sağlayacağız.
Bu işlemleri yaptıysanız eğer son olarak ctrl+enter tuşları yardımı ile swf dosyanızı oluşturun. Bu dosyayı kendi belirleyeceğiniz bir dizin içine atın. Ben fonts olarak ayarladım ve fonts dizini içine attım.
Adım 2 - Javascript dosyalarını tanıtmak
zip dizini içinden çıkan
- jquery-1.2.1.pack.js
- jquery.flash.js
- jquery.sifr.js
dosyalarımızın yolunu <head></head> etiketleri arasında göstererek tanıtın.
Adım 3 - jQuery tetikleyicisini eklemek
Bildiğiniz gibi javascript kodları bir tetikleyici kod satırı ile çalışmaktadır işte jQuery’ de tetikliyici kod bloğu da şu şekilde olmaktadır;
$(document).ready(function(){
// Your code here
});
Şimdi de sIFR için kullanacağımız kodu yazalım
$(function(){
$.sifr({path:'fonts'});
$('h3.KadirGunay, p.KadirGunay').sifr({font:'NeoSans'});
});
Burada dikkat etmemiz gereken şu; $(’.KadirGunay’).sifr({font:’NeoSans’}); bu kısımda .KadirGunay olarak geçen kısım CSS dosyamızda KadirGunay sınıfına atadığımız özellikleri alacaktır ve yine aynı şekilde KadirGunay sınıfındaki değişkenleri sIFR eklentisi ile belirlediğimiz yazı tipine değiştirecektir.
Hepsi bu kadar arkadaşlar 
