Kodlarla Dövüşen Adam:HF

Forum


    Bilgi Paylaşım Formu
    Sormak istediğniz herşeyi sorabilir, paylaşımda bulunabilirsiniz...

Hakkında


    Her yıl yapılan 'en iyi buğday' yarışmasını yine aynı çiftçi kazanmıştı. Çiftçiye bu işin sırrı soruldu...




Bir Hikaye: En iyi Buğday
Her yıl yapılan 'en iyi buğday' yarışmasını yine aynı çiftçi kazanmıştı. Çiftçiye bu işin sırrı soruldu. Çiftçi,

- "Benim sırrımın cevabı, kendi buğday tohumlarımı komşularımla paylaşmakta yatıyor" dedi.

Elinizdeki kaliteli tohumları rakiplerinizle mi paylaşıyorsunuz? Ama neden böyle bir şeye ihtiyaç duyuyorsunuz? diye sorulduğunda, devamını oku...


Bilgi Paylaşımı grubumuza kayıt olun...
Grubu ziyaret et!
Hafta içi hergün bir adet komik, eğlenceli yada
ilginç video ve güncel full program sizlerle...

Tümünü Göster / Kapat




Big Dog Robot




Arap Köy
3D Wallpapers
Photoshopar
Komplo Var
Pazarlama©a
Uğra Buraya
FreGEN
Kuş ve Balık Evi
Hakan-Fan


ÖrneXiteler
Afilli Yalnızlık
Ali Web1
Bzmcty
Cixin Mekanı
İddaa Zamanı
İstanbul Rehberi
Orjinal Game
Sanalcity


HackeR FrienD

onelayout05

Hayalimdeki Site

Tek Sütun

2. Adım:  Şablonu oluşturmak


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...






Bu site 1024x768 çözünürlük ve üzeri,
32 bit görüntü kalitesi ile
FF1, IE7 ve Google Chrome
tarayıcıları için optimize edilmiştir.
Alıntı olarak göstermek şartıyla
sitemizdeki tüm içeriği kullanabilirsiniz.




Etiketler: CSS|Wordpress|Joomla|HTML|JAVA|Tasarım|Photoshop|İngilizce|Google Adsense|Google Pagerank|Tekno Bilgi|Tekno Haber|Bilgi Paylaşımı|


Zulüm, başkasına ait olanları sahiplenmektir ve Allah zulmedenlerin yanında değildir!





=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=