Kadir GÜNAY’ ın Css, Xhtml, jQuery ve Wordpress Günlüğü

‘div’ Etiketi Arşivi

jQuery ile Kayan Panel

Yorum Yap | Bu yazı 27 Ara 2008 tarihinde yazılmıştır

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.

Örnek Uygulama

Örnek Dosyaları İndir

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, div, html, javascript, jQuery, jquery kayan div, jquery slide div, jquery slider, kütüphane, library, XHTML

CSS, XHTML, jQuery

Web Standartlarında En Bilinen 5 Yanlış Anlaşılma

5 Yorum | Bu yazı 30 Eki 2008 tarihinde yazılmıştır

Konu ismi oldukça uzun ama korkmayın yazacaklarım o kadar uzun değil. Web ile ilgilenmeye başladığınız ilk günden bu yana bir çok saçma duyum, konu ve terim duymaya başladınız değil mi? İşte en bilinen yanlış anlaşılmaların doğruları;

1) Web Standartları = Doğrulama (Web Standarts = Validation)

Css doğrulaması web standartlarında çok büyük bir rol oynar. Bu rolün dışında size web standartlarının nasıl olması gerektiğini öğretir. Bu doğrulamayı web konsorsüyumu olan W3C yapmaktadır. Bu şekilde standartları öğrenirken onlarla ilgili sorunları nasıl çözmeniz gerektiğini de öğrenmiş olursunuz. Doğrulaması yapılmamış bir sayfa asla standartlara uygun bir sayfa değildir. Bunu sakın unutmayın.

2) Web Standartları = CSS (Web Standarts = CSS)

CSS bir stil dilidir. Her ne kadar bu tartışmaya açık olsa da ben CSS’ i bir dil olarak görüyorum. Çünkü standartlarda çok büyük bir paya sahiptir. Tablo (Table) ile yapılan sayfalara göz attığınızda bir çoğunun CSS kullanmadığını göreceksiniz. İşte bu da onların standartlara uygun olmadığı anlamına gelmektedir. Sayfanızda kullandığınız her elementin işlevselliğini CSS ile arttırabilir ve değer atayarak güçlendirebilirsiniz.

3) Web Standartları = Tablosuz Kullanım (Web Standarts = No Tables)

Tablo kullanımından CSS tabanlı derlemeye geçildiğinde bir çok web yazılımcısı ciddi anlamda tablolara küfür etmiştir Çünkü tablolar semantik bir yapıya sahip değildir. Konumlandırmaları, alacakları özellikler kısıtlıdır. Bu da sayfanızın çok fazla kod yığını olmasına ve standartlara uymamasına, böylece tarayıcıların sayfalarınızı açarken zorlanmasına sebep olacaktır. Peki tablolar hiçbir şekilde kullanılmamalı mıdır? Hayır, elbette tablolarında kullanılacağı hatta kullanılması zorunlu olduğu yerler mevcuttur.

4) Web Standartları = Div Kullanımı (Web Standarts = Divs)

Tablo kullanımından CSS tabanlı uygulamalara geçildiğinde en çok kullandığımız element DIV elementi oldu. Sayfalardaki kod yığını kalktı, konumlandırma ve semantik kullanım kolaylaştı. İlk başta çaylak olarak adlandırdığımız (ki buna ben de dahilim) DIV kullanımını tercih etmediler. Neden çünkü DIV kullanımı tamamen CSS bilgisine dayanmaktadır. Zaman içerisinde DIV kullanımı ve web standartlarının bu yöne kayması kullanıcıları CSS tabanlı derlemeye itti. Ve daha sonra anlaşıldı ki DIV her yönde tablodan daha iyi.

5) Web Standartları = IEsiz Kullanım (Web Standarts = No IE)

CSS tabanlı kullanımlarda piyasada bulunan hemen hemen her tarayıcı IE (Internet Explorer) hariç çoğu değeri olduğu gibi kabul edip ekrana basmaktadır. Fakat IE kendi değerleri ile bunu ekrana basmaktadır. Bu şekilde bir çok web yazılımcısı CSS konusunda sorun yaşamaktadır. Fakat zaman içinde IE için bazı düzenlemeler ile bu sorunlar aşılmaktadır ki aşılmalıdır da. Bizler tasarladığımız her sayfayı her tarayıcı için aynı şekilde düzenlemek zorundayız. Çünkü sadece kendi kullandığımız tarayıcıda açılacak bir sayfa düzenlemek olmaz.

Sonuç olarak tasarladığınız sayfanın web standartlarına mümkün olduğu kadar uymasına dikkat edin.

CSS, div, doğrulama, no ie, no table, validate, w3c, web, web standartları, web standarts

CSS, XHTML

CSS + Mootools ile Kayan DIV’ ler

1 Yorum | Bu yazı 18 Ağu 2008 tarihinde yazılmıştır

CSS’ in güzelliği ile Mootools’ un kullanılabilirliği birleştiği zaman ortaya çok güzel işler çıkıyor. İşte onlardan birisi de farenizin konumuna göre kayan divler Aynı flashda paralax mantığı ile hareket eden bir sistem.

css ve mootools ile yapılmış kayan div örneği

Bu sistemi yapmak çok basit arkadaşlar. Bunun için öncelikle mootools.svn isimli javascript dosyasına ihtiyacımız var. Buradan indirebilirsiniz. Daha sonra ise normal bir html sayfası açıp şu kodları giriyoruz;


<div id="icerik">
   <div id="kayanAlan">
      <div class="bolum">
         Bölüm1
      </div>
      <div class="bolum">
         Bölüm2
      </div>
      <div class="bolum">
         Bölüm 3
      </div>
      <div class="bolum">
         Bölüm 4
      </div>
      <div class="bolum">
         Bölüm 5
      </div>
   </div>
</div>

icerik ID’ sine sahip alan genel alanımız, kayanAlan ID’ si içeriğimiz olduğu ve faremizin hareketi ile kayan alan, geri kalan alanlarımız ise bolum sınıfı ile tanımlanmış içerik alanlarımız.

Şimdi bu alanlarımızın CSS kodlarını yazalım;
Devamını Oku »

CSS, div, flash, javascript, kayma efekti, mootools, mouse effect, paralax, XHTML

CSS, XHTML

CSS Ortalama Tekniği

Yorum Yap | Bu yazı 11 Ağu 2008 tarihinde yazılmıştır

CSS kullanırkan div leri ortalamak bir derttir. Peki bu dertten en basit yolu ile nasıl kurtulabiliriz? Çok basit arkadaşlar. Öncelikle ihtiyacımız olan içerik olarak düşündüğümüz her nesneyi içinde tutacak genel bir div yani CSS kodlamaya yapısına göre bir “container”. Hoş ben böyle isimler vermeyi sevmiyorum sürekli kendim Türkçe isimler ekliyorum ve birazdan yine öyle yapacağım

<body> <div id="genelIcerik"> tüm içerik bu kısma gelecek </div> </body>

Şu an için basit bir html ve div yapısı oluşturduk. Şimdi bunun CSS kodunu yazalım ve genelIcerik divimizi ortalayalım.

body { text-align: center; }
#genelIcerik { margin: 0 auto; width: xxxpx; }

Ne yaptık? İlk olarak genel sayfamızda bulunan her şeyi Devamını Oku »

CSS, div, hizalama, margin, ortalama

CSS