CSS ile Komutları Kullanarak Header Kodlama..

[Hatake]

Bu dersi şu anda kendim yazıyorum herkesin headeri kendine göre değişebilir elbet ben ekranı kaplayan yüksekliği büyük header severim başka biri ise; ekranı ortalayan tarzdan headerler sever. Peki biz neye göre header kodlayacağız? CSS3 ile birlikte pek çok yenilik geldi. Öncelikle Header kodlamadan önce değerleri öğrenelim.

Kod: Tümünü Seç Tümünü Kopyala

Position:

Fixed, Absolute, Relative olarak kullanılabilir. Fixed: elementin web sayfasında sabit durmasını sağlayacaktır, Absolute bağımsız bir şekilde istediğimiz yere taşıyabilmemizi, Relative komutu ise bulunduğu alanın içinde konumlandırmamıza olanak sağlar.

Örneğin:

Kod: Tümünü Seç Tümünü Kopyala

<div id="header">
<div class="headerustbosluk"></div>
</div>

CSS Kodu ise

Kod: Tümünü Seç Tümünü Kopyala

.headerustbosluk {
   width: 925px;
   min-height: 135px;
   border-bottom: 1px solid blue;
   background: blue;
   position: relative;
}

css kodunda relative kullandık yani şu an biz bu nesneye left komutu uygulasakta right komutu uygulasakta <div id="header"> in içindeki yere göre konumlanacaktır. Biz kodumuzu absolute yapsaydık başlangıç yeri olarak left yazıldıgında sayfanın sol tarafını alıcaktı relative kullandıgımızda başlangıç noktası olarak <div id="header">'in sol kısmını alacak.

Komutlar

Kod: Tümünü Seç Tümünü Kopyala

margin:
padding:
left:
right:
border-radius:

margin ne işe yarar?
Margin elementin dış boşluğunu yansıtır mesela

Kod: Tümünü Seç Tümünü Kopyala

margin-right: 25px;

kodunu uygularsak sağdan 25px boşluk bırak demiş oluruz elementler arası boşluklar gibi düşünebilirsiniz. Menü kodlarken işinize yarar.

padding ne işe yarar?
Padding tam olarak nesnenin iç kısmındaki boşluklardır. Biz headerimize

Kod: Tümünü Seç Tümünü Kopyala

paddig-top: 25px;

yazdıgımızda yukardan 25px boşluk bırakarak başlayacaktır.

left, right komutları ne işe yarar?
Bu komutlar konum belirlemek için kullanılır genellike örneğin;

Kod: Tümünü Seç Tümünü Kopyala

position: absolute;
left: 15px;

sol taraftan 15px e göre konumlanır elementimiz.

border-radius ne işe yarar?
Border-radius tam olarak elementlerin kenarlıklarını yuvarlamaya yarar

Kod: Tümünü Seç Tümünü Kopyala

border-radius: 2px 1px 2px 1px;

Kenarlar saat yönünde gider. Yani ilk yazdıgımız değer(2px) üst kenarın, ikincisi(1px) sağ kenarın, üçüncüsü(2px) alt kenarın, ve sonuncusu(1px) sol kenarın yuvarlama oranıdır.

Kendim yazdığım için biraz karışık olabilir :) Umarım yararlı olur..

[Einstein™]

İşinde uzman ve ekibimizde olan çok başarılı birisin mete, tema yapımcı arkadaşlar için güzel bir konu olacak. Teşekkürler

[Ciri]

bunların sonucunda basitte olsa bir ekran görüntüsü fena olmazdı.
Ders / konu için teşekkürler +rep

[Hatake]

@Einstein™ ben foruma başladığımda sen grafikerdin ;) benden daha uzman olduğun kesin kardeşim :) Sağolun genel şefim kendimce anlatmaya çalıştım :)

[Ufufuk]

Ders için teşekkürler :)

[Hatake]

Önemli değil :)

[AUSXR]

İşinde uzman ve ekibimizde olan çok başarılı birisin mete, tema yapımcı arkadaşlar için güzel bir konu olacak. Teşekkürler

Katılıyorum sağolasın Metehan :D

[Hatake]

Önemli değil :) Ekibimi kendim seçme hakkım yokmu? Ekibimdekilerde Uzman olduğu için seçtim ben bu ekibi :)

[Einstein™]

sağol mete :D 

[Hatake]

Bu konum sabitlenmemiş mi :( halbu ki o kadar uğraşmıştım.