11 Eylül 2008 web’den seçme haberler

fatih.hayrioglu — Thu, 11 Sep 2008 11:59:28 +0000

jQuery ile yapılmış güzel bir efekt. Bağlantı
FireFox, Opera ve Webkit’den sonra Internet Explorer’da kendi özel ön ekini CSS özelliklerine eklemiş. Bağlantı
Partilerin İnternet Stratejileri – hasanyalcin.com Bağlantı
TechCrunch50′den ilk gün izlenimleri – webrazzi.com Bağlantı
CSS ile Konumlandırma ilgili güzel bir ipucu uyugulama. Bağlantı
WordPress 2.6.2 sürümü çıkmış yükselttim. Yaklaşık 5 dakikamı aldı. Bir sorun görünmüyor.
Form girdi alanlarını maskelemk için jquery ile yapılmış bir script. Bağlantı
CSS sıfırlama teknikleri hakkında güzel bir makale. Bağlantı
Google Chrome’dan beklenen 10 şey. Bağlantı
Web kod yazarları için 20 Firefox eklentisi. Bağlantı
Güzel
örnekleri. Bağlantı
Neden Webkit yükselirken Mozilla düşüşe geçti. Bağlantı
CSS 3.0 çalışmalarını sürdüren grup kenarlık(border) ve ardalan(background) üzerine son çalışmalarını tamamlamış. Bağlantı
Tek tıklama ile dosya göndermek için jquery eklentisi. Bağlantı
jQuery ile menü elemanlarına efekt vermek. Bağlantı
WordPress Temanızdan Silebileceğiniz 13 Etiket – alemsite.com geçen haberlerde bahsettiğim konuyu Selman Kara Türkçeye çevirmiş. Bağlantı

CSS ile sayfalarımızı ve elementlerimizi ortalamak

fatih.hayrioglu — Tue, 12 Sep 2006 19:55:22 +0000

CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.

1- Genişleyebilir blok-level elementleri ortalamak

.ortala
{
    margin-left: 10%;
    margin-right: 10%;
}

Lorem Ipsum is simply dummy text of the printing and typesettingindustry.

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.

2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: "Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamına gelir."

.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}

NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir.

Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç)

Bu metodu desteklemeyen web tarayıcıları için body etiketine text-align:center ataması yaptığımızda sorun çözülmüş demektir.

body
{
	text-align: center;
}
.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine(yani sola yaslamalıyız) çevirmeliyiz.

body
{
	text-align: center;
}
.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: left;
}

Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)

2.b. Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

.ortala3 {
    width: 720px;
    position: relative;
    left: 50%;
    margin-left: -360px;
}

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

Fatih Hayrioğlu'nun not defteri » Konumlandırma

11 Eylül 2008 web’den seçme haberler

CSS ile sayfalarımızı ve elementlerimizi ortalamak

1- Genişleyebilir blok-level elementleri ortalamak

2- Sabit genişlik atanan blok-level elementlerini ortalamak