Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj22.07.2008, 21:37 (UTC)    
Mesaj konusu: Css Site Yapmak İçin Bilgiler

cursoru değiştirmek
Kod:
<style>body{CURSOR: url("http://www.tatildizayn.com/cursor/mause.cur")</style>


TABLO ÖZELLİKLERİ (table - tr - td - th)

margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.


TEXT ÖZELLİKLERİ

word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

LİSTE ÖZELLİKLERİ (ul - li)
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.








BUDA AYRI BILGI



Ö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
______________

Mesaj23.07.2008, 08:04 (UTC)    
Mesaj konusu: gzl

güzel paylaşım bilmeyenlere yardımcı olabilir..
______________
Şimdi yine yanlızım ağlamak neye yarar zalimin zulmü varsa sevenin allahı var!!!ağlamak neye yararr...
Mesaj23.07.2008, 10:12 (UTC)    
Mesaj konusu: Google

Googleden CSS yazdığınız zaman zaten bir sürü şeyt çıkıyor. burda da yayınlanların çoğu ctrl-c ctrl-v tekniğidir...
______________
Sedat YILDIZ

Mesaj14.12.2008, 08:31 (UTC)    
Mesaj konusu:

Resimler gözükmüyoki Confused
______________
Mesaj14.12.2008, 08:41 (UTC)    
Mesaj konusu:

ÜStelik Sabit Başlıklarda Bildirilmiş!!!
Mesaj14.12.2008, 12:04 (UTC)    
Mesaj konusu:

izle-yelim yazmış:
ÜStelik Sabit Başlıklarda Bildirilmiş!!!

Konunun Tarihine Bakıp Yorum Yapınız..! Confused
______________
Aşağıdaki yazı fontunun adı Angilo Tatto'dur. Gelen mesajlara istinaden yazdım Smile
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu