Özellikle içerik bakımından daha zengin olan web sitelerinde, ziyaretçilerin içeriğe daha kolay ulaşma yollarından birisi de arama yapmaktır. Arama işlemini yapan arama formları ise pek çok web sitesinde özensiz bir şekilde hazırlanmış veya biçimlendirilmemiş oluyor. Oysaki birazcık CSS ve resim desteğiyle çok şık arama formları oluşturabiliriz
1. Arama formunun hazırlanması
İlk önce klasik bir arama formu oluşturalım. Bu arama formu için 4 adet HTML etiketi kullanacağız. Bunlar div, form, input ve button etiketleri... Burada önemli olan, arama formunu oluşturan bütün nesneleri div etiketi içerisine almak. Sonuç olarak arama formunu alttaki kodlar yardımıyla oluşturuyoruz:
<div id="aramaFormu">
<form action="" method="get">
<input type="text" name="aranan" />
<button type="submit">Ara</button>
</form>
</div>
Böylece "en sade" haliyle klasik bir arama formu oluşturmuş oluyoruz. Bu kodların ekran görüntüsü alttaki gibi olacaktır. Fazla bir albenisi yok değil mi
2. Arama formu için görsellerin hazırlanması
Arama formunu biçimlendirmeden önce 2 adet "görsel" hazırlamamız gerekmektedir. Hazırlanan bu görsellerin birincisi arama formumuzun arka planını, ikincisi ise arama butonumuzun arka planını oluşturacak. Alttaki şemada bu iki görseli ve bu iki görsel kullanılarak hazırlanmış arama formunun son halini görebilirsiniz. Şemadaki "pembe" bölümü ise, arama kutusunun yerleştirileceği alanı işaretlemek için kullandım. Arama formumuzun son halinde bu pembe alanın yerini arama kutusu yer alacak.
Yukarıdaki şemada dikkatinizi çekmek istediğim asıl nokta, görsellerin genişlik (W) ve yükseklik (H) değerleridir. Çünkü bu değerleri, CSS kodlarımız içerisinde kullanacağız. CSS kodlarından bahsetmişken artık CSS kodlamaya geçebiliriz
3. Arama formu için CSS kodlarının hazırlanması
Yukarıda yazmış olduğumuz kodlara tekrar baktığımızda, div etiketinin ID özniteliğine "aramaFormu" ismini verdiğimizi görüyoruz. Çünkü bütün CSS biçimlendirmesini bu ismi referans alarak yapmamız gerekiyor. Öncelikle bu biçimlendirmeyi yapan CSS kodlarına bakalım; kodların incelemesini daha sonra yaparız (:
<style type="text/css">
/* = 1. bölüm
------------------------------------------------- */
#aramaFormu {
width: 210px;
height: 39px;
overflow: hidden;
background: #fff url(arkaForm.png) no-repeat
}
/* = 2. bölüm
------------------------------------------------- */
#aramaFormu input {
width: 148px;
height: 21px;
padding: 0;
margin: 8px 0 0 8px;
float: left;
border: none;
background: #fff;
font: normal 13px Verdana
}
/* = 3. bölüm
------------------------------------------------- */
#aramaFormu button {
width: 40px;
height: 29px;
margin: 3px 9px 0 0;
float: right;
text-indent: -9999px;
border: none;
background: #fff url(arkaButon.png) no-repeat;
cursor: pointer
}
</style>
1. bölümde arama formundaki bütün nesneleri kapsayan div etikeni biçimlendirdik. Genişlik ve yükseklik değerlerini girip, hazırladığımız görseli arkaplan olarak atadık. Taşma problemi olmasın diye de overflow:hidden kodunu kullandık.
2. bölümde arama sözcüğünün yazıldığı kutuyu biçimlendirdik. Genişlik ve yükseklik değerlerini girip, margin ile kenarlardan uzaklıklarını belirledik. Ayrıca float:left ile sola yaslanmasını sağladık. Arkaplan rengini beyaz olarak atadıktan sonra, border ile kenar çizgilerinin görünmemesini belirttik. Son satırda ise kutu içerisine yazılacak yazının tipini ve büyüklüğünü ayarladık.
3. bölümde formun gönderilmesini sağlayan butonu biçimlendirdik. Yine genişlik ve yükseklik değerlerini girdik, kenar uzaklıklarını belirledik. Daha sonra float:right ile sağa yaslanmasını sağladık. Buton üzerindeki "Ara" yazısını göstermemek amacıyla text-indent:-9999px kodunu kullandık. Ayrıca kenar çizgilerinin görünmemesini ve hazırladığımız görselin arkaplan olarak atanmasını sağladık. cursor:pointer kodunu ise, imleç butonun üzerine getirildiği zaman imlecin "el işareti" olarak görünmesi için ekledik.
Sonuç...
CSS'nin nimetlerinden faydalanarak kolayca zarif nesneler hazırlanabildiğini gördük. Benim tasarım bilgim zayıf olduğundan dolayı, siz görselleri daha güzel hazırlayıp bu örneği daha iyi bir hale getirebilirsiniz
|
