++Sitene Ekle++
TürkçeEnglishFranceGermanyRusiaSpain
Siteme Hoş Geldiniz!Biliyorum Sitede Eksikler Var Ama En Kısa Sürede Düzeltilecektir!!
reklam
Sitemize Hos Geldiniz.

closeSitemiz Sizlere Daha İyi Hizmet Vermek İçin Günlük Güncellenecektir...

KILI«LAR DİYARI

Css4

 

...:Şablon Oluşturmak 2.Adım:...

2. Adım:  Şablonu oluşturmak


c-) Arka planı oluşturduktan sonra bu tasarıma bir başlık ekleyerek devam edelim. Başlık için de bir katman oluşturaralım.
#baslik{
width: 845px;
height: 150px;
background: url(https://img.webme.com/pic/h/hackerfriend/hayalimbaslik.jpg);
border: 3px  solid #4699C3;
}
Şablonumuza başlık eklerken koda dikkat ederseniz resimin boyutlarını belirttim. Etrafına kenarlık ekledim. Kenarlık boyutunu 3px, rengini de başlığa uygun tonlardan seçtim. Renk kodlarını BURADAN Bulabilirsiniz.

Bu haliyle sitemizin görünümü Buradaki gibi olacak.

TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
<div id="baslik"></div>

TASARIM ALTINDAKİ YAZI
</div>

CSS
BURAYA TIKLAYINIZ
---------------------------------------------------------------------------------------------------------------------------------
d-) Şablonumuza başlığımızı da ekledik. Şimdi sıra sayfalarımızın gözükeceği içerik kısmını oluşturmak. Tasarım konusunda henüz yolun başında olan arkadaşlar kodlara dikkat edin, mantığı kavramaya çalışın.

#ust {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/ustsablon.png);

}

#orta {
width:845px;
background: url(https://img.webme.com/pic/h/hackerfriend/ortasablon.png);

}

#alt {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/altsablon.png);
float: left;

}

Orta kısımda yükseklik değerini vermiyoruz. Çünkü yükseklik değeri sayfların uzunluğuna göre kendisi oluşacak. Alt kısımda da koda float: left ekliyoruz. Çünkü TR.GG'nin orjinal katmanları nedeniyle IE tarayıcılarında kaymalar olabiliyor. float: left koduyla bunun önüne geçiyoruz.

Bu haliyle sitemizin görünümü buradaki gibi olacak.

TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
<div id="baslik"></div>
<div id="ust"></div>
<div id="orta">

TASARIM ALTINDAKİ YAZI
</div>
<div id="alt"></div>
</div>

CSS KODU
Burayı tıklayınız...
--------------------------------------------------------------------------
e-) Sıra geldi ince ayarlar yapmaya. Eğer metinlerin, resimlerin (yani nesnelerin)  katman içinde sağa, sola, üste ve alta uzak kalmasını istiyorsak padding ayarlarını yapmak gerekecek. Katmanların kendi aralarında uzaklıklarını ayarlamak istersek margin ayarlarını yapmak gerekiyor. Bu da katmanın dışa olan uzaklık ayarı demektir. Resmi inceleyin, daha sonra kodlara bakarak anlamaya çalışın.


Margin özellikleri için burayı, padding özellikleri için de burayı inceleyiniz. Şimdi bir önceki sayfada verdiğimiz kodda küçük ince ayarlar yapacağız.

#ust {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/ustsablon.png);
margin: 50px 0 0 0;

}

#orta {
width:795px;
background: url(https://img.webme.com/pic/h/hackerfriend/ortasablon.png);
padding: 0 25px 0 25px;

}

#alt {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/altsablon.png);
float: left;

}


Üst kısmı yukarıdan (yani başlıktan) 50px uzaklaştırdık. Orta kısımda da nesneleri sağdan ve soldan 25px uzaklaştırdık.

Toplamda 845px olan orta kısım genişliğini 50px düşürdük. Çünkü padding olarak sağdan 25px soldan 25px olmak üzere 50px uzaklık verdik. Bu durumda orta kısım genişliği 795px'e düştü.

Eğer bunu formüllersek:

Katman Genişlik Değeri + Toplam Padding Değeri = Resim Genişlik Değeri
               795px              +                 50px                  =             845px

En çok kullanılan margin ve padding kodlaması 4'lü değerlerin yan yana verilmesidir. Yani şu şekilde:

margin: 5px 20px 15px 10px;
padding: 10px 15px 20px 5px

Sırasıyla üst, sağ, alt , sol uzaklıklardır. (top right bottom left)


margin: top right bottom left;
padding: üst sağ alt sol


Bu haliyle sitemizin görünümü buradaki gibi olacak.

TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
<div id="baslik"></div>
<div id="ust"></div>
<div id="orta">

TASARIM ALTINDAKİ YAZI
</div>
<div id="alt"></div>
</div>

CSS KODU
Burayı tıklayınız...
Bugün 1 ziyaretçi (38 klik) kişi burdaydı!
Bugün: 1 | Klik: 38 | Buradasın: Css4 | İp: 54.226.64.30
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=